最終更新:2022-12-16 (金) 03:49:44 (496d)  

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 は各コンテクストのコンシューマをツリー内の別々のノードにする必要がある
↑

参考

↑

関連




検索：