react-组件跨层级通信 Context

在⼀个典型的 React 应⽤用中，数据是通过 props 属性⾃上⽽下(由⽗及子)进行传递的，但这种做法对 于某些类型的属性⽽⾔是极其繁琐的(例如:地区偏好，UI 主题)，这些属性是应⽤程序中许多组件都 需要的。Context 提供了一种在组件之间共享此类值的⽅方式，⽽不必显式地通过组件树的逐层传递 props
React中使⽤用Context实现祖代组件向后代组件跨层级传值。Vue中的provide & inject来源于Context。

Context API

React.createContext

创建⼀个 Context 对象。当 React 渲染⼀个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。

Context.Provider

Provider 接收一个value属性，传递给消费组件，允许消费组件订阅 context 的变化。⼀个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使⽤用，⾥层的会覆盖外层的数据。
当 Provider 的 value 值发⽣生变化时，它内部的所有消费组件都会重新渲染。Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数，因此当 consumer 组件在其祖先组件退出更新的情况下也能更新

Class.contextType

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

Context.Consumer

这⾥，React 组件也可以订阅到 context 变更更。这能让你在函数式组件中完成订阅 context。
这个函数接收当前的 context 值，返回⼀一个 React 节点。传递给函数的 value 值等同于往上组件树离 这个 context 最近的 Provider 提供的 value 值。如果没有对应的 Provider， value 参数等同于传递 给 createContext() 的 defaultValue 。

useContext

接收⼀个 context 对象( React.createContext 的返回值)并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。只能用在function组件中。