usereducer reactフックを知るようになります

React 16.7.0で導入されたReactのuseReducerフックは、複雑なアプリケーション状態を管理する強力な方法を提供します。還元剤関数と初期状態が必要で、現在の状態と派遣関数を返します。これは、より単純な州管理に適したuseStateとは対照的です。

useReducerのコアは、JavaScriptのreduceメソッドをミラーリングするReducer関数です。還元剤は常に単一の値（数、文字列、配列、またはオブジェクト）を返し、複数の出力に効果的に「削減」します。これにより、ロジックを複数の値に適用し、統合結果を生成するのに最適です。

たとえば、数字の配列を合計することを検討してください。

const numbers = [1、2、3];
const reducer =（tally、number）=> tally number;
const total = numbers.reduce（reducer、0）; //合計は6になります

useReducer 、この概念を州の管理に拡張します。

const [state、dispatch] = usereducer（reducer、initialstate、init）;

ここでは、 initialState初期アプリケーション状態を設定します。オプションのinit関数は、初期値が他の要因に依存する場合に役立つ初期状態をゆっくりと計算します。フックは現在のstateとdispatch機能を返し、状態を更新します。

説明するために、車のカスタマイザーを作りましょう：

まず、初期状態を定義します。

const InitialState = {
  追加価格：0、
  車： {
    価格：26395、
    名前：「2019 Ford Mustang」、
    画像： "https://cdn.motor1.com/images/mgl/0an2v/s1/2019-ford-mustang-bullitt.jpg"、
    特徴： []
  }、
  店： [
    // ...（利用可能な機能のリスト）...
  ]
};

次に、機能の追加と削除を処理するレデューサー関数を作成します。

const reducer =（state、action）=> {
  switch（action.type）{
    ケース "add_feature"：
      // ...（機能を追加して価格を更新するロジック）...
      壊す;
    ケース "remove_feature"：
      // ...（機能を削除して価格を更新するロジック）...
      壊す;
    デフォルト：
      返品状態;
  }
};

アプリコンポーネントは、 useReducerを使用して状態を管理し、ユーザーインタラクションに基づいてアクションを発見します。

useStateでuseReducer選択するのはいつですか？ useReducer 、状態の移行が複雑な場合、またはある状態要素が別の要素に依存するときに輝きます。より単純な状態では、 useState十分です。 useReducer Reduxと同様の機能を達成できますが、Reduxは非常に大きなアプリケーションに必要なミドルウェアやタイムトラベルデバッグなどの追加機能を提供します。ただし、多くのプロジェクトでは、 useReducer 、複雑な状態を管理するためのより軽量で効率的なソリューションを提供します。

以上がusereducer reactフックを知るようになりますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。