组件通信 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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容