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 函数中。你只通过该 API 订阅单⼀ context。

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组件中。

总结

React的官⽅⽂档中，Context被归类为⾼级部分(Advanced)，属于React的⾼级API，建议不要滥⽤。我们可以通过react-redux的<Provider />，就是通过Context提供⼀个全局态的store，路由组件react-router，通过Context管理路由状态等等。在React组件开发中，如果⽤好Context，可以让你的组件变得强⼤，⽽且灵活。