下载掌阅APP，畅读海量书库
立即打开
在React应用中，为了让数据在组件间共享，常见的方式是让它们以props的形式自顶向下传递。如果数据在组件树的不同层级共享，那么这些数据必须逐层传递到目的地，这种情况被称为prop-drilling。Context如同管道，它将数据从入口直接传递到出口，使用Context能避免出现prop-drilling。
实战部分将利用React Context API就近取值的原则，让容器组件将数据源传递给其他组件，本节只介绍Context的基本用法。总体而言，使用Context分为如下三步。
1.创建Context对象
Context只能使用React.createContext方法创建，代码如下。
2.用Context.Provider包裹组件树
用Context.Provider圈选（即包裹）Context的作用域，只有作用域内的组件才能消费Context中的数据，此处是管道的入口，在这里放入想要传递的数据。示例代码如下。
3.订阅Context
订阅Context的位置是管道的出口，对于Context对象而言，管道入口只有一个，但出口可以有多个。订阅Context有3种方式。
（1）类组件的静态属性contextType
在类组件中使用contextType去订阅Context。用法如下。
contextType订阅Context之后，除了不能在构造函数中使用this.context访问到context value之外，在类组件的其他位置都能使用this.context访问到数据。React组件的should-ComponentUpdate的第三个参数是组件即将接收的context。
（2）useContext
在函数组件中通过useContext订阅Context时，useContext的使用次数不限。用法如下。
（3）Context.Consumer
Context.Consumer是React组件，在Context作用域的任何位置都能使用它，它只接收一个名为children的props，children必须是一个返回React.ReactNode的函数，该函数以context作为参数。用法如下。
无论如何订阅Context，只要context的值被更新，那么订阅该Context的组件一定会重新渲染，而不管context更新的那部分值是否被自己使用，也不管祖先组件是否跳过重新渲染。所以推荐将不同职责的数据保存到不同的context中，以减少不必要的重新渲染。
如果给Context.Provider的value属性传递了一个对象字面量，那么Context.Provider的父组件每一次重新渲染都会使context值发生变化，进而导致订阅该Context的组件重新渲染，所以应该避免给Context.Provider的value传对象字面量。