react：context上下文的使用

解決的問題

react 中，數據是通過 props 屬性自上而下（由父及子）進行傳遞的，但這種做法對於某些類型的屬性而言是極其繁瑣的。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() {
  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} />;
  }
}