最終更新:2022-09-22 (木) 15:07:09 (73d)  

React/コンテクスト
Top / React / コンテクスト

https://ja.reactjs.org/docs/context.html

使い方

定義

  • React.createContextでコンテクストを定義
    const MyContext = React.createContext(defaultValue)
  • defaultValueはコンポーネントがツリー内の上位に対応するプロバイダを持っていない場合のみ使用

参照する値を設定

  • どの値を提供したい値をContext.Providerで指定 (JSX)
    <MyContext.Provider value={/* 何らかの値 */}>
  • Reactがコンテクストオブジェクトが登録されているコンポーネントをレンダーする場合、ツリー内の最も近い上位の一致するProviderから現在のコンテクストの値を読み取る

参照

React.createContext

useContext

React/コンテクストオブジェクト?

  • 値が更新された場合はそのコンテクストをuseContextしているコンポーネントはすべて再レンダリング

構造

  • {
      displayName: string;
      Provider: React.Component;
      Consumer: React.Component;
    }

データの流れ

  • コンテキストのProviderがConsumerにデータを提供

Provider

  • 親のJSXで定義
  • プロパティとしてvalueを受け取る
    <MyContext.Provider value={/* 何らかの値 */}>

Consumer

React/関数コンポーネント

  • useContext
  • 関数コンポーネント内でContext.Consumerを使える

React/クラスコンポーネント

  • Context.Consuperコンポーネントを使う or
  • Component.contextType?でコンテクストを指定して、this.context?で取得できる

複数のコンテクストを使用

  • コンテクストの再レンダーを高速に保つために、React は各コンテクストのコンシューマをツリー内の別々のノードにする必要がある

参考

関連