react进阶－Context

    基于react父子组件互相嵌套的基础，在复杂结构中，一定会出现层层嵌套的情况。导致父子组件相隔甚远，遥遥不可相见。为了解决这个问题，react团队推出了Context。切记，这个东西会打乱原来的父子嵌套传递属性的规则，还是少用为好。

    Context在这里借鉴了生产者和消费者的概念。通过生产者生产，消费者直接消费的模式，打破props原本的传递规则。实际应用如下：

context用法

这里用到了3个API：

1）React.createContext：（创世者）

    const { Provider,Consumer } = React.createContext(defaultValue);

    创建一对 { Provider, Consumer }。当 React 渲染 context 组件 Consumer 时，它将从组件树的上层中最接近的匹配的 Provider 读取当前的 context 值（就近原则）。如果上层的组件树没有一个匹配的 Provider，就会用到defaultValue。

2）Provider：（生产者）

    React 组件允许 Consumers 订阅 context 的改变。接收一个 value 属性传递给 Provider 的后代 Consumers。一个 Provider 可以联系到多个 Consumers。Providers 可以被嵌套以覆盖组件树内更深层次的值。

3）Consumer：（消费者）

    可以订阅 context 变化的 React 组件。和Provider对应。