1.4 React Context API

在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傳對象字面量。