一、簡介

? ?useReducer?是 React 提供的一個高級 Hook，用于管理復雜的狀態邏輯。它類似于 Redux 中的 reducer 模式，適合處理包含多個子值、依賴前一個狀態或邏輯復雜的狀態更新場景。與?useState?相比，useReducer?提供更結構化的狀態管理方式。

1.1 核心概念

• Reducer 函數

純函數，接收當前狀態?state?和操作指令?action，返回新狀態：

(state, action) => newState

• Action

描述狀態變化的普通對象，通常包含?type?字段（操作類型）和可選數據?payload。

• Dispatch 函數

用于觸發狀態更新，調用方式：dispatch(action)。

• 初始狀態

可直接提供初始值，或通過?惰性初始化函數?生成（適合復雜初始邏輯）。

---

1.2 基礎語法

const [state, dispatch] = useReducer(reducer, initialArg, init?);

• reducer：處理狀態更新的函數。

• initialArg：初始狀態值或初始化函數的參數。

• init（可選）：初始化函數，返回初始狀態。

• 無?init?函數（直接初始值）：

  const [state, dispatch] = useReducer(reducer, { count: 0 });

• 有?init?函數（惰性初始化）：

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

  • initialArg：傳遞給?init?函數的參數。

  • init：函數，接收?initialArg?并返回實際初始狀態。

二、代碼實現

import React, { useReducer } from "react";function reducer(state, action) {switch (action.type) {case "INC":return state + 1;case "DEC":return state - 1;case "TO10":return 10;default:return state - 1;}
}export default function App() {const [num, dispatch] = useReducer(reducer, 0);return (<div><div>當前值:{num}</div><button onClick={() => dispatch({ type: "INC" })}>+1</button><button onClick={() => dispatch({ type: "DEC" })}>-1</button><button onClick={() => dispatch({ type: "TO10" })}>to10</button></div>);
}