useReducer フックは、機能コンポーネントでより複雑な状態ロジックを管理するために使用される組み込みの React フックです。これは、複数のサブ値を含む状態を処理する必要がある場合、または状態ロジックが複雑な場合に、useState フックの代替となります。 useState は単純な状態を管理するのに適していますが、useReducer は、特に状態遷移がアクションに依存している場合に、状態更新を処理するためのより構造化されたスケーラブルな方法を提供します。
useReducer フックは、次のような場合によく使用されます。
現在の状態とアクションを取得して新しい状態を返す リデューサー関数 を使用して機能します。このパターンは、Redux 状態管理ライブラリからインスピレーションを得ています。
const [state, dispatch] = useReducer(reducer, initialState);
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
};
const initialState = { count: 0 };
const Counter = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
};
useReducer を使用してカウンターを管理する方法を示す完全な例を次に示します。
const [state, dispatch] = useReducer(reducer, initialState);
例: フィールドが個別に更新される必要があるが、相互に依存している複数のフィールドを持つフォームを管理します。
複数のアクションの方が良い: コンポーネントに、さまざまな方法で状態を変更するさまざまなアクション (例: インクリメント、デクリメント、リセット) がある場合。
デバッグ: useReducer はより予測可能でテスト可能です。状態遷移は (アクションを通じて) 明示的に行われるため、変更の追跡とデバッグが容易になります。
Redux にさらに類似: 後で Redux を使用する大規模なアプリを構築している場合、useReducer は同様のパターンを持っており、良い足がかりとなります。
バッチ処理: React では、useReducer によってトリガーされた更新がバッチ処理されます。これは、複数のディスパッチ (たとえ急速に連続している場合でも) が 1 つのレンダリング サイクルで処理されることを意味し、パフォーマンスの向上に役立ちます。
過剰使用の回避: 状態ロジックが単純な場合 (単一のカウンターなど)、一般に useState を使用する方が簡単で、不必要な複雑さを回避できます。さらに構造が必要な場合は、useReducer を使用してください。
| Feature | useState | useReducer |
|---|---|---|
| Simplicity | Ideal for simple state with primitive values | Best for complex state or multiple actions |
| State Structure | Works well for single values or arrays/objects | Great for state objects with multiple sub-values |
| Action Handling | Doesn’t require actions; just updates state directly | Requires action objects to update state |
| Use Case | Small, independent pieces of state | Complex state transitions with many actions |
useReducer フックは、React で複雑な状態ロジックを管理するのに強力です。これにより、状態の更新をより詳細に制御できるようになり、複数の値またはアクションに依存する状態遷移の処理が容易になります。コンポーネントに構造化された更新が必要な複雑な状態がある場合、または Redux から使用している場合は、useReducer が優れたソリューションです。
以上がReact の useReducer Hook をマスターする: アクションを使用して複雑な状態を管理するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
