Reactガイドを読んでいくその33

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

コンテクスト

コンポーネントツリー内でデータを渡す方法
典型的なReactアプリケーションはpropsを通してトップダウンでデータが渡されるが、ロケール設定やUIテーマなどはトップダウン式では不便だったりする。
なので、ツリーの各階層で明示的にプロパティを渡すことなくコンポーネント間で値を共有するような仕組みを提供するようにしている。

コンテクストはいつ使用するべきか

コンテクストはコンポーネントツリーを「グローバル」とみなすことができるように作られている。
例えば以下のようなコードでは手動でthemeプロパティを通して実行するようにしているが

class App extends React.Component {
  render() {
    return <Toolbar theme="dark" />;
  }
}

function Toolbar(props) {
  // Toolbar コンポーネントは外部から "theme" プロパティを受け取り、
  // プロパティを ThemedButton へ渡します。
  // アプリ内の各ボタンがテーマを知る必要がある場合、
  // プロパティは全てのコンポーネントを通して渡される為、面倒になります。
  return (
    <div>
      <ThemedButton theme={props.theme} />
    </div>
  );
}

class ThemedButton extends React.Component {
  render() {
    return <Button theme={this.props.theme} />;
  }
}

コンテクストを使用すると中間の要素群を経由してプロパティを渡すことを避けられます。

// コンテクストを使用すると、全てのコンポーネントを明示的に通すことなしに
// コンポーネントツリーの深くまで値を渡すことができます。
// 現在のテーマ（デフォルトは "light"）の為のコンテクストを作成します。
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    // 以下のツリーへ現在のテーマを渡すためにプロバイダを使用します。
    // どんな深さでも、どのようなコンポーネントでも読み取ることができます。
    // このサンプルでは、"dark" を現在の値として渡しています。
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// 間のコンポーネントはもう明示的にテーマを
// 下に渡す必要はありません。
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // 現在のテーマのコンテクストを読むために、contextType に指定します。
  // React は上位の最も近いテーマプロバイダを見つけ、その値を使用します。
  // この例では、現在のテーマは "dark" です。
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

ついでにこの辺も参考にしながら引き続きコンテクストについてやっていきたいと思います。 qiita.com

今日はここまで。