React-深入探究Context（1）

前言

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
• Provider
• Consumer

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

四、新旧API的比较

参考资料

React官网--Context(英文)
React官网--Context(中文)