掌握 React 的 useReducer Hook：透過操作管理複雜狀態

在 React 中使用Reducer Hook

useReducer 鉤子是一個內建的 React 鉤子，用於管理功能元件中更複雜的狀態邏輯。當您需要處理涉及多個子值的狀態或狀態邏輯很複雜時，它是 useState 鉤子的替代方案。雖然 useState 適合管理簡單狀態，但 useReducer 提供了一種更結構化和可擴展的方式來處理狀態更新，特別是當狀態轉換依賴於操作時。

---

什麼是 useReducer？

useReducer 鉤子在下列情況下通常是首選：

• 狀態有多個相互依賴的值。
• 你有複雜的狀態轉換。
• 您需要明確處理操作（就像在 Redux 中一樣）。

它透過使用 reducer 函數 來運作，該函數接受當前狀態和操作並傳回新狀態。此模式的靈感來自 Redux 狀態管理庫。

---

useReducer 語法

const [state, dispatch] = useReducer(reducer, initialState);

• reducer：接受目前狀態和操作並傳回新狀態的函數。
• initialState：reducer 將使用的初始狀態值。
• state：目前狀態，由reducer更新。
• dispatch：用於向reducer發送action的函數，從而觸發狀態更新。

---

useReducer 的工作原理

1. 建立一個Reducer函數： reducer 函數接收兩個參數：目前狀態和操作。它使用這些來計算並返回新狀態。

   const reducer = (state, action) => {
     switch (action.type) {
       case 'increment':
         return { count: state.count + 1 };
       case 'decrement':
         return { count: state.count - 1 };
       default:
         return state;
     }
   };

1. 定義初始狀態： 初始狀態是調度任何操作之前狀態的起點。

   const initialState = { count: 0 };

1. 在您的元件中使用 useReducer： 現在，在元件內部，您可以使用 useReducer 來處理狀態。您將從鉤子中獲取狀態和調度。

   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>
     );
   };

• 說明：
  • 點擊增量按鈕時，它會調度類型為「增量」的操作。
  • reducer 函數接收此操作並相應地更新狀態。
  • 調度用於透過向減速器發送操作來觸發狀態更新。

---

使用 useReducer 的完整範例：

這是一個完整的範例，示範如何使用 useReducer 來管理計數器：

const [state, dispatch] = useReducer(reducer, initialState);

• 說明：
  • useReducer 使用reducer 函數和initialState 進行初始化。
  • 調度用於觸發操作（遞增、遞減或重設）。
  • 每個操作都會根據操作類型導致狀態更新。

---

何時使用 useReducer 而不是 useState

• 複雜狀態邏輯：當狀態涉及多個子值或狀態之間複雜的轉換。

範例：管理具有多個欄位的表單，其中欄位需要獨立更新，但又相互依賴。

• 更適合多個操作：如果您的組件具有以各種方式修改狀態的不同操作（例如，遞增、遞減、重設）。

• 調試： useReducer 更具可預測性和可測試性。由於狀態轉換是明確的（透過操作），因此可以更輕鬆地追蹤更改和調試。

• 與 Redux 更相似：如果您正在構建一個稍後將使用 Redux 的大型應用程序，useReducer 具有類似的模式，並且可以成為一個很好的墊腳石。

---

性能考慮因素

• 批次：在React 中，useReducer 觸發的更新是批次的，這意味著在一個渲染週期中處理多個調度（即使是快速連續的），這有助於提高性能。

• 避免過度使用：如果您的狀態邏輯很簡單（例如，單一計數器），那麼使用 useState 通常更簡單，並且可以避免不必要的複雜性。當您發現自己需要更多結構時，請使用 useReducer。

---

比較 useState 與 useReducer

功能 使用狀態 使用Reducer 標題>

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

簡單 非常適合具有原始值的簡單狀態 最適合複雜狀態或多個操作 狀態結構 適用於單一值或陣列/物件 非常適合具有多個子值的狀態物件 動作處理 不需要執行任何操作；只是直接更新狀態 需要操作物件來更新狀態 用例 小型、獨立的國家 具有許多操作的複雜狀態轉換 表>

---

Reducer Hook使用總結

• useReducer 用於管理 React 中複雜的狀態邏輯。
• 與 useState 相比，它提供了對狀態轉換的更多控制，並且當狀態依賴操作或需要以結構化方式更新時是理想的選擇。
• 鉤子傳回一個陣列：目前狀態和一個調度函數來觸發更新狀態的操作。
• 它使用 reducer 函數 接收目前狀態和計算並傳回新狀態的操作。

---

結論

useReducer 鉤子對於管理 React 中的複雜狀態邏輯非常強大。它使您可以更好地控制狀態更新，並更輕鬆地處理依賴多個值或操作的狀態轉換。如果您的元件具有需要結構化更新的複雜狀態，或者如果您來自 Redux，useReducer 是一個很好的解決方案。

---

以上是掌握 React 的 useReducer Hook：透過操作管理複雜狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！