组件通信 context

概览

定义：Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。

内容

1 设计目的

共享那些被认为对于一个组件树而言是“全局”的数据。
误解：不要仅仅为了避免在几个层级下的组件传递 props 而使用 context，它是被用于在多个层级的多个组件需要访问相同数据的情景。

2 API

React.createContext

创建一对 { Provider, Consumer }。当 React 渲染 context 组件 Consumer 时，它将从组件树的上层中，最接近且匹配的 Provider 读取当前的 context 值。

如果上层的组件树没有一个匹配的 Provider，而此时你需要渲染一个 Consumer 组件，那么你可以用到 defaultValue 。

Provider

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

Consumer

接收一个函数作为子节点。 函数接收当前 context 的值并返回一个 React 节点。传递给函数的 value 将等于组件树中上层 context 的最近的 Provider 的 value 属性。如果 context 没有 Provider ，那么 value 参数将等于被传递给 createContext() 的 defaultValue 。

每当 Provider 的值发生改变时，所有的 Consumers 都将会重新渲染。通过使用相同的算法如Object.is 比较新旧值来确定变化。

参考文献

react context