构造函数 constructor(props,context)
生命周期 componentWillReceiveProps(nextProps,nextContext)
shouldComponentUpdate(nextProps,nextState,nextContext)
componentWillUpdate(nextProps,nextState,nextContext)
通过上面方法测试，没获取到
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>react demo</title> <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script></head><body><div id="app"></div><script type="text/babel"> const { createContext } = React; //创建store const AppContext=createContext({}); class A extends React.Component{ constructor(props,context){ super(props); this.state={ a:context } } shouldComponentUpdate(nextProps, nextState,nextContext) { console.log(nextContext); return true; } componentDidMount() { console.log(this.state.a.name); } //从store中取值 render(){ return ( <AppContext.Consumer> { (context)=>{ return <div> <div>A组件Name:{context.name}</div> <button onClick={context.changeName}>改变name</button> </div> } } </AppContext.Consumer> ) } } class App extends React.Component{ //在顶层包裹所有元素，注入到每个子组件中 constructor(props){ super(props); this.state={ name:'xz' } } shouldComponentUpdate(nextProps, nextState,nextContext) { console.log(nextContext,11); return true; } render(){ return ( <AppContext.Provider value={{name:this.state.name,changeName:()=>{ this.setState({ name:Math.random() }) }}}> <A/> </AppContext.Provider> ) } } ReactDOM.render( <App />, document.getElementById('app') );</script></body>
