React の組み込み状態管理を理解する

React の組み込み状態管理は、useState フックと useReducer フックに依存してコンポーネント内の状態を管理します。内訳は次のとおりです:

1. useState:

   • このフックは、ローカル コンポーネントの状態を管理するために使用されます。現在の状態値とそれを更新する関数の 2 つの要素を含む配列を返します。
   • 例:

    const [count, setCount] = useState(0);
   
    // Update state
    setCount(count + 1);
   

2. useReducer:

   • より複雑な状態ロジックには、useReducer が使用されます。これは、リデューサー関数と初期状態を取得し、現在の状態とディスパッチ関数を返すことにより、Redux と同様に機能します。
   • 例:

    const initialState = { count: 0 };
   
    function reducer(state, action) {
      switch (action.type) {
        case 'increment':
          return { count: state.count + 1 };
        case 'decrement':
          return { count: state.count - 1 };
        default:
          return state;
      }
    }
   
    const [state, dispatch] = useReducer(reducer, initialState);
   
    // Dispatch actions
    dispatch({ type: 'increment' });
   

これらのフックは、外部ライブラリを必要とせずに、コンポーネント内でローカルに状態を管理するのに役立ちます。

以上がReact の組み込み状態管理を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。