React --Context

Context

 如果根组件需要向后代组件传递一个公共属性，那每个组件都需要通过props去传递，太繁琐 为了解决这个问题，react有一个Context对象，Context对象可以在组件之间共享数据（全局数据，所有组件可以通过Context调用）

//1.创建Context组件,createContext()构造函数返回一个Context组件

const ThemeContext = React.createContext();

class Son extends Component{

    render(){
        return <div>
        {/*Consumer可以订阅provider的value值，内部是一个函数，函数默认参数就是provider的value值 */}
        <ThemeContext.Consumer>
        {
            (value)=><h3>{value}</h3>
        }
        </ThemeContext.Consumer>
        </div>
    }
}

class Father extends Component {
    render(){
        console.log(this.context)
        return <div>
       <h2>{this.context}</h2>
        <Son name={this.props.name}/>
        </div>
    }
}

//3.把创建的ThemeContext组件挂载到Father组件，Father组件就有Context属性

Father.contextType = ThemeContext;

class App01 extends Component{   
    render(){
        //2.ThemeContext.Provider组件有一个value属性，value可以在Provider包裹的所有组件内部使用
        return <ThemeContext.Provider value="a1">
        <h1 className="h1">hello react app01</h1>
        <Father name="zs"/>
        </ThemeContext.Provider>
    }
}

ThemeContext.Provider的value属性是只读属性，可以传递一个state属性让其变为动态的数据

组件的插值放在children属性里