なぜContext-APIを使用するのですか？

• Context-APIを使用する理由を理解するためにまず、小道具-ドリルとは何かを説明します。

• 左側のコンポーネントツリーの画像を見てください。
• その場合があるかもしれません、ツリーの下に子コンポーネントは、データが必要になります.butコンテナコンポーネントまたは途中で子コンポーネントのデータという必要はないかもしれません。
• この場合、中間のコンポーネントはデータを必要としませんが、子コンポーネントに渡すためだけにデータを受信する必要があります。
• アプリケーションが大きすぎる場合、これは大きな問題を引き起こします。開発者は、あるコンポーネントから次のコンポーネントにデータを渡し続ける必要があります。
• この問題は、小道具の掘削として知られています。

• Context-APIでは、データを格納する必要があるコンポーネントツリーの外側に個別のストレージスペースが作成されます。
• コンポーネント内でそのデータが必要な場合は、Context-APIからデータに直接アクセスできます。
• 次に、これがどのように機能するかを例で見てみましょう。

• CreateContextには、ReactのcreateContext（）を使用できます。
• UserContextが作成されたら、それをエクスポートする必要があります。
• Context内にデータを追加するには、親要素を<UserContext.Provider>または<UserProvider>でラップする必要があります。
• Wrapperでラップしたら、データをvalue属性に渡す必要があります。

1）機能コンポーネント内。

2）クラスコンポーネントのライフサイクルメソッド。

3）クラスコンポーネントのレンダリングメソッド。

1）機能コンポーネント内：-

• 機能コンポーネントまたはフック内では、Reactパッケージによって提供されるuseContext（）フックを使用する必要があります。
• 次に、UserContextをインポートして、useContext（）に渡す必要があります。
• useContext（UserContext）は、Context内のユーザーデータを返します。これはさらに使用できます。

• クラスコンポーネントからContextにアクセスする最も一般的な方法は、staticを使用することcontextTypeです。
• の外部renderまたはライフサイクルメソッドでContextの値が必要な場合は、この方法で使用します。

• コンテキスト値を取得する従来の方法は、子コンポーネントをでラップすることでしたConsumer。
• そこから、としてバリュープロップにアクセスできるようになりますprops。
• あなたはまだこれを見るかもしれませんが、それはコンテキストにアクセスするためのよりレガシーな方法です。