代表通信～React Context APIまとめ

こんばんは。代表の草場です。

Slackのクローン作ろう的な動画を見ながら作っていたら、Context APIが良く出てきたので、とりあえずまとめ。
すごくイメージ的な話をします。親コンポーネント→子コンポーネント→孫コンポーネント→ひ孫コンポーネント→続く、という感じでコンポーネントがつながってるのですが、あるユーザーが「ひ孫コンポーネントのこのデータくれ」といった場合、
ユーザー→親→子→孫→ひ孫、発見、ひ孫→孫→子→親→ユーザー、て流れになるわけですが、時間かなるよね？ということで、データを事前に共有しておきましょう的なイメージです。

公式によると、
「コンテキストは、各レベルで手動でプロップを下に渡さなくても、コンポーネントツリーを介してデータを渡す方法を提供します。典型的なReactアプリケーションでは、データはプロップを介してトップダウン（親から子へ）で渡されますが、アプリケーション内の多くのコンポーネントで必要とされる特定のタイプのプロップ（ロケール環境設定、UIテーマなど）の場合、これは面倒な作業になります。コンテキストは、このような値をコンポーネント間で共有する方法を提供します。」

で、実際どう使うか？よく使うAPIがいくつかあります。
React.createContext
コンテキストオブジェクトを作成します。ReactがこのContextオブジェクトをサブスクライブしているコンポーネントをレンダリングするとき、ツリー上で最も近いマッチするプロバイダから現在のコンテキスト値を読み込みます。
const MyContext = React.createContext(defaultValue);

Context.Provider
コンテクストオブジェクトには、コンテクストの変更をコンシューマコンポーネントがサブスクライブできるようにするProvider React コンポーネントが付属しており、この Provider の子孫であるコンシューマーコンポーネントに渡される値のプロップを受け取ります。1つのProviderは多くのコンシューマーに接続することができます。プロバイダを入れ子にすることで、ツリー内のより深い部分の値を上書きすることができます。

ふむ。で、あとは使い方を書きますがまた明日。以下はお勧め記事です。
「Use Hooks + Context, not React + Redux」

明日もContex API