コンテキストAPIを理解する

React.jsプロジェクトでは、コンポーネントを作成してから、それらのコンポーネントに小道具を渡します。これらの小道具を、ネストされたコンポーネントの無限のレベルに渡すことができます。ただし、コンポーネントが多数あり、すべてが異なる共有プロップを必要とする場合、プロジェクトは管理不能になります。そこで、Context APIが登場します。これにより、プロップのドリルを行わなくても、ネストされた深いレベルでプロップを使用できます。

それを使用する方法は、最初にコンテキストを作成することであり、そのために、reactからcreateContextフックを使用します。必要に応じて、デフォルト値を渡すこともできます。次に、そのコンテキストのプロバイダーコンポーネントを作成します。コンテキストオブジェクトには、コンテキストの値を小道具として渡すプロバイダーコンポーネントがあります。ここでは、コンテキスト値と、コンシューマーコンポーネントが値を変更できるようにする関数の両方を渡しました。

プロバイダー内にネストされたコンポーネントはすべて、その特定のコンテキストの値にアクセスできます。コンポーネントを複数のプロバイダー内にネストすることもでき、それらすべての値を消費します。

ここで、PlayerコンポーネントとMatchコンポーネントは、FootballProviderとOtherProviderからの値も消費します。

プロバイダーからの値を使用するには、useContextフックを使用する必要があります。

これにより、ブリッジなどの値を保持する中間コンポーネントがなくても、深くネストされたコンポーネント間で共有値を使用できます。Context APIを使用することの欠点は、コンテキストの値が変更されるたびに、その下にあるすべてのコンポーネントが再レンダリングされることです。ただし、この動作は一部のシナリオでも有益であるため、これをマイナス面と呼ぶのは完全に公平ではありません。