Context

无需手动为每层组件添加 props，就能在组件树中进行数据传递。但是，注意其主要场景在于很多不同层级的组件需要访问同样的数据。

API

React.createContext

创建一个Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。 provider 与 consumer 都通过此api 创建 context对象。

const MyContext = React.createContext(defaultValue);

Context.Provider

每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化。 当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。

<MyContext.Provider value={/* 某个值 */}>

Class.contextType

挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象。此属性能让你使用 this.context 来消费最近 Context 上的那个值。你可以在任何生命周期中访问到它，包括 render 函数中。

Context.Consumer

被包裹的 React 组件可以订阅 context 的变更。

useContext

接收一个 context 对象（React.createContext的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的valueprop 决定。

调用了 useContext 的组件总会在 context 值变化时重新渲染。