关于context:邂逅react十二-组件通信之context

对于context概念解释起来很绕,很多性能也不罕用,就简略解释一下最罕用的办法

react中跨组件通信能够通过props逐层传递或者context创建对象进行数据传递,const name=React.createContext('name')再通过订阅取值

上代码~~~

//创立context对象const MyContext=React.createContext('getText')//根组件class ContextCom extends Component {    state = {         name:'我是大白白',        level:999,        content:'你好~~~~我是子组件2'     }    render() {         return (             <div>              {/* 订阅context 给state赋值 */}               <MyContext.Provider value={this.state}>                   <Page/>               </MyContext.Provider>                            </div>         );    }}//父组件class Page extends Component {    state = {  }    render() {                return (             <div>                 <div>                    类子组件                    <PageHead/>                </div>                                         <div>                   函数子组件                   <Content/>               </div>               <div>我是内容~~~~</div>            </div>         );    }}//子组件1 类组件class PageHead extends Component {    state = {  }    render() {         console.log(this.context)        return (             <div>                <h2>name:{this.context.name}</h2>                <h2>level:{this.context.level}</h2>            </div>         );    }}//给PageHead的contextType赋值 PageHead.contextType=MyContext//子组件2 函数组件function Content(){    return(        //函数组件 取值用 Consumer        <MyContext.Consumer>            {                value=>{                    return(                        // **留神 函数组件中取值为 value.                        <div>内容：{value.content}</div>                    )                                   }            }        </MyContext.Consumer>    )} export default ContextCom;

分享结束 感激浏览