最終更新:2022-09-22 (木) 14:32:39 (575d)  

useContext
Top / useContext

const value = useContext(MyContext);

https://ja.reactjs.org/docs/hooks-reference.html#usecontext

概要

  • コンテクストオブジェクト（React.createContext からの戻り値）を受け取り、そのコンテクストの現在値を返します
  • コンテクストの現在値は、ツリー内でこのフックを呼んだコンポーネントの直近にある <MyContext?.Provider> の value の値によって決定されます。
↑

レンダリング

  • 直近の <MyContext?.Provider> が更新された場合、このフックはその MyContext? プロバイダに渡された最新の value の値を使って再レンダーを発生させます。
  • 祖先コンポーネントが React.memo や shouldComponentUpdate? を使っている場合でも、useContext を使っているコンポーネント自体から再レンダーが発生します。
↑

使い方

↑

定義

↑

参照する値を設定

  • どの値を提供したい値をContext.Providerで指定 (JSX)
↑

参照

↑

React.createContext

↑

useContext

↑

メモ

  • useContext(MyContext?) は現在のコンテクストの値を読み取り、その変化を購読することしかできません。コンテクストの値を設定するために、今後もツリーの上の階層で <MyContext?.Provider> が必要です。
↑

関連




検索：