ユーチューブ:

コードサンドボックス:

動機

Context を使用して React の状態を処理するのはなぜですか? Reduxを使用してアプリケーション ストアを管理するのと同じ理由です。コンポーネントが互いに通信し、状態を持ち上げるのが面倒になる場合、Context はアプリケーションの状態を処理するためのネイティブな方法です。

前提条件

<App>コンテキストを使用するために、ローカル状態を使用するリファクタリングを行います。

ご覧のとおり、カウントを増減する 2 つのボタンを備えたカウンターがあります。

プロバイダー

<Provider>propを作成valueして 0に設定します。

<Provider>の最上位コンポーネントとしてレンダリングindex.js:

でプロバイダーvalueを取得useContextし<App>ます。

useReducer

レデューサー関数を作成します。

useReducer状態を渡し、から Provider prop にディスパッチしvalueます。

<App>新しいコンテキスト値で更新します。

消費者

の代替useContextはConsumerです。

まず、ConsumerContext からエクスポートします。

useContext次に、次のように置き換え<Consumer>ます。

<Consumer>prop のコールバック関数が必要childrenです。最初の引数は Providervalueです。

クラス

クラス コンポーネントの場合、Provider 値には次の場所でアクセスできますthis.context。

トド

改善案:

• のカスタム フックを作成しuseContext(Context)ます。
• アクション タイプを定数にリファクタリングします。
• アクションクリエーターを作成します。
• Context に設定displayNameして、React DevTools での可視性を向上させます。

• YouTube ビデオ
• CodeSandbox デモ
• 環境
• useReducer