前言

近年前端技術層出不窮，React 也是程序員間討論最多的 Javascript 框架之一。借這個機會開始學習 React，並把筆記作為 React 基礎教程系列（參考 React 官網）。

因為屬於入門，不太適合對 React 有經驗的同學，但希望到此的同學多少都有所收穫。

Context 用途

我們可以為組件添加 props 屬性，這樣組件之間可以通過傳入的屬性進行數據處理。

但是，對於比較深，或者繁瑣的組件中，如此處理會很繁瑣。

比如，我們有這樣的組件 UserInfoItem，在其內部還有一個 OtherInfoItem，他們都用到來自上級組件的 props 屬性，來展示用戶信息。

代碼示例：

能看到這樣在編寫代碼上會有個很不好的體驗，我們都需要層層在組件 props 定義 userInfo 對象。

為了解決這樣繁瑣的問題，就有個 Context 來幫助我們簡化操作。你可以把這個當成一個全局對象，然後為其定義好數字後，就可以直接從裡面拿對應的參數了，從而不需要 props 的支持了。

用法示例

創建上下文 context 對象，並設置默認值：

引用該 context 對象，並通過其 Provider 作為組件來使用，同時可以設置 value 覆蓋默認值：

這樣，我們的子組件們，可以直接從 context 中那所需要的值了：

API 說明

React.createContext(value)

用來創建 Context 上下文對象，所需要使用上下文值的組件，將從離它最近的組件樹 Provider 中獲取數據。

Context.Provider

每個 Context 對象將返回 Provider 組件，我們可以像用組件一樣使用 Foo.Provider ，該組件接受一個 value 屬性用於覆蓋 React.createContext 默認值。

因為 Provider 屬於組件，所以當 value 屬性更新時，內部"包裹"的組件將重新渲染。

Class.contextType

注意到 class 組件，可以使用 static contextType，用 context 賦值給它，我們就能在組件中使用 this.context 獲取上下文的 context 對象。

Context.Consumer

類似 Provider ，對應就有 Consumer 組件，其用來消費 Provider 定義的 value，也通過 function as a child 的形式來使用：

注意，value 的入參位置也可以是多個參數，這取決於 React.createContext 中定義的參數列表。

最後

簡單可以把 Context 看成一個類似 window/global 的全局變量，我們可以定義 Provider，內部組件可以直接通過 Consumer 的形式從其中拿到對應的值。

在 React JSX 的模板中有更自由的編寫方式，另外，可以對每層組件定義其範圍內的 Provider，根據“就近原則”來消費定義的 value 。

為了更好的閱讀體驗，可以在文章底下的“瞭解更多”中查看原文。

閱讀更多 前端雨爸 的文章

關鍵字: 技術 JavaScript 進階