React拓展5-Context

Context：一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信

• Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。
• props传值的缺陷：使用props属性进行组件向下传值的操作。当多个组件嵌套时候。你就需要慢慢逐层向上寻找初值。

相关API

• React.createContext：创建一个上下文的容器(组件), defaultValue可以设置共享的
  默认数据
  const {Provider, Consumer} = React.createContext(defaultValue);
• Provider(生产者)：用于生产共享数据的地方。 value:放置共享的数据。
  <Provider value={/*共享的数据*/}> /*里面可以渲染对应的内容*/ </Provider>
• Consumer(消费者)： 接收Provider产生数据。
  Consumer需要嵌套在生产者下面。才能通过回调的方式拿到共享的数据源。
  当然也可以单独使用，那就只能接收到上文提到的defaultValue
  <Consumer> {value => /*根据上下文 进行渲染相应内容*/} </Consumer>

注意：在应用开发中一般不用context, 一般都用它的封装react插件