前言
React组件中的Context与Android中的Context类似,都可以理解为上下文。而React中的Context拥有着组件间通信的功能,与props通信方式不同,Context的通信是跨层次的。
一、初识Context
React官网:Context 通过组件树提供了一个传递数据的方法,从而避免了在每一个层级手动的传递 props 属性。
二、什么时候使用Context
三、怎么使用Context
Context API在React v16.3的时候迎来了一次大变动,因此在使用上就有Old Context API和New Context API之分
New Context API
React.createContext
构造一个Context对象,该对象含有Provider和Consumer两个Component,Provider可以理解成生产者,用于定义 context的值,而Consumer则为消费者,当 React 渲染 context 组件 Consumer 时,它将从组件树的上层中最接近的匹配的 Provider 读取当前的 context 值并对其进行“消费”。
const {Provider, Consumer} = React.createContext(defaultValue);
createContext接受一个defaultValue ,用于 Consumer 组件找不到匹配的Provider时提供默认的context,这有助于在不封装它们的情况下对组件进行测试。
Provider
<Provider value={/* some value */}>
React 组件接收一个 value 属性,允许 Consumers 订阅 context 的改变。一个 Provider 可以提供context给多个 Consumers。Providers 可以被嵌套以覆盖组件树内更深层次的值。
Consumer
<Consumer>
{value => /* render something based on the context value */}
</Consumer>
使用render props,Consumer的子组件为一个函数,该函数接收当前 context 的值并返回一个 React 节点。传递给函数的 value 将等于组件树中上层 context 的最近的 Provider 的 value 属性。如果 context 没有 Provider ,那么 value 值将为创建createContext(defaultValue)中的defaultValue