何時使用context

Context 設計目的是為了共享那些對於一個元件樹而言是“全域性”的資料，例如當前認證的使用者、主題或首選語言。

// Context 可以讓我們無須明確地傳遍每一個元件，就能將值深入傳遞進元件樹。
// 為當前的 theme 建立一個 context（“light”為預設值）。
const ThemeContext = react.createContext('light');

class App extends react.Component {
  render() {
    // 使用一個 Provider 來將當前的 theme 傳遞給以下的元件樹。
    // 無論多深，任何元件都能讀取這個值。
    // 在這個例子中，我們將 “dark” 作為當前的值傳遞下去。
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// 中間的元件再也不必指明往下傳遞 theme 了。
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // 指定 contextType 讀取當前的 theme context。
  // React 會往上找到最近的 theme Provider，然後使用它的值。
  // 在這個例子中，當前的 theme 值為 “dark”。
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}
 

Context 主要應用場景在於很多不同層級的元件需要訪問同樣一些的資料。請謹慎使用，因為這會使得元件的複用性變差。

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

API

React.createContext

建立一個 Context 物件。當 React 渲染一個訂閱了這個 Context 物件的元件，這個元件會從元件樹中離自身最近的那個匹配的 Provider 中讀取到當前的 context 值。

只有當元件所處的樹中沒有匹配到 Provider 時，其 defaultValue 引數才會生效。這有助於在不使用 Provider 包裝元件的情況下對元件進行測試。注意：將 undefined 傳遞給 Provider 時，消費元件的 defaultValue 不會生效。

const MyContext = React.createContext(defaultValue);

Context.Provider

每個 Context 物件都會返回一個 Provider React 元件，它允許消費元件訂閱 context 的變化。 Provider 接收一個 value 屬性，傳遞給消費元件。一個 Provider 可以和多個消費元件有對應關係。多個 Provider 也可以巢狀使用，裡層的會覆蓋外層的資料。

當 Provider 的 value 值發生變化時，它內部的所有消費元件都會重新渲染。Provider 及其內部 consumer 元件都不受制於 shouldComponentUpdate函式，因此當 consumer 元件在其祖先元件退出更新的情況下也能更新。

通過新舊值檢測來確定變化，使用了與 Object.is 相同的演算法。

<MyContext.Provider value={/* 某個值 */}>

Context.Consumer

這需要函式作為子元素（function as a child）這種做法。這個函式接收當前的 context 值，返回一個 React 節點。傳遞給函式的 value 值等同於往上元件樹離這個 context 最近的 Provider 提供的 value 值。如果沒有對應的 Provider，value 引數等同於傳遞給 createContext() 的 defaultValue。

<MyContext.Consumer>
  {value => /* 基於 context 值進行渲染*/}
</MyContext.Consumer>