React - Context API 维护全局状态，实现全局组件通信

Context API 维护全局状态，实现全局组件通信

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

我们通过调用React.createContext，可以创建出一组 Provider。Provider 作为数据的提供方，可以将数据下发给自身组件树中任意层级的 Consumer。

React.createContext：

​ 作用是创建一个 context 对象。

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

​ 注意，在创建的过程中，我们可以选择性地传入一个 defaultValue，当 Consumer 没有对应的 Provider 时，value 参数会直接取 defaultValue 传递给 Consumer。

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

实例：

// 定义context方法：
const AppContext = React.createContext(defaultValue)
// 取出方法
const { Provider, Consumer } = AppContext

// 父组件使用Provider, 提供数据
<Provider value={title: this.state.title, content: this.state.content}>
  <Title />
  <Content />
</Provider>

// 消费者 Consumer, 使用传递的数据，这个函数需返回一个组件
<Consumer>
  {value => <div>{value.title}</div>}
</Consumer>