05｜Context API

Context API 是 React 官方提供的一种组件树全局通信的方式。

Context API 有 3 个关键的要素：React.createContext、Provider、Consumer。

我们通过调用 React.createContext，可以创建出一组 Provider。Provider 作为数据的提供方，可以将数据下发给自身组件树中任意层级的 Consumer，这三者之间的关系用一张图来表示：

注意：Cosumer 不仅能够读取到 Provider 下发的数据，还能读取到这些数据后续的更新。这意味着数据在生产者和消费者之间能够及时同步，这对 Context 这种模式来说至关重要。

从编码的角度认识“三要素”

React.createContext，作用是创建一个 context 对象，在创建的过程中，我们可以选择性地传入一个 defaultValue：

const AppContext = React.createContext(defaultValue)

从创建出的 context 对象中，我们可以读取到 Provider 和 Consumer：

const { Provider, Consumer } = AppContext

Provider，可以理解为“数据的 Provider（提供者）”。

我们使用 Provider 对组件树中的根组件进行包裹，然后传入名为“value”的属性，这个 value 就是后续在组件树中流动的“数据”，它可以被 Consumer 消费。使用示例如下：

<Provider value={title: this.state.title, content: this.state.content}>
  <Title />
  <Content />
 </Provider>

Consumer，顾名思义就是“数据的消费者”，它可以读取 Provider 下发下来的数据。其特点是需要接收一个函数作为子元素，这个函数需要返回一个组件。像这样：

<Consumer>
  {value => <div>{value.title}</div>}
</Consumer>

注意，当 Consumer 没有对应的 Provider 时，value 参数会直接取创建 context 时传递给 createContext 的 defaultValue。