React - Context API 維護全域性狀態，實現全域性元件通訊

Context API 維護全域性狀態，實現全域性元件通訊

Context API 有 3 個關鍵的要素：React.createContext、Provider、Consumer。

我們通過呼叫React.createContext，可以建立出一組 Provider。Provider 作為資料的提供方，可以將資料下發給自身元件樹中任意層級的 Consumer。

React.createContext：

​ 作用是建立一個 context 物件。

const AppContext = React.createContext(defaultValue)
const { Provider, Consumer } = AppContext

​ 注意，在建立的過程中，我們可以選擇性地傳入一個 defaultValue，當 Consumer 沒有對應的 Provider 時，value 引數會直接取 defaultValue 傳遞給 Consumer。

注意：Cosumer 不僅能夠讀取到 Provider 下發的資料，還能讀取到這些資料後續的更新。這意味著資料在生產者和消費者之間能夠及時同步，這對 Context 這種模式來說至關重要。

例項：

// 定義context方法：
const AppContext = React.createContext(defaultValue)
// 取出方法
const { Provider, Consumer } = AppContext

// 父元件使用Provider, 提供資料
<Provider value={title: this.state.title, content: this.state.content}>

  <Title />

  <Content />

 </Provider>

// 消費者 Consumer, 使用傳遞的資料，這個函式需返回一個元件
<Consumer>

  {value => <div>{value.title}</div>}

</Consumer>