1.useReducer定義

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

• reducer：用于更新 state 的純函數。參數為 state 和 action，返回值是更新后的 state。state 與 action 可以是任意合法值。
• initialArg：用于初始化 state 的任意值。初始值的計算邏輯取決于接下來的 init 參數。
• 可選參數 init：用于計算初始值的函數。如果存在，使用 init(initialArg) 的執行結果作為初始值，否則使用 initialArg。

2.useReducer用法

這里我使用ts的語法，根據定義可以知道，我們首先需要聲明一個reducer函數，函數中包含兩個參數，一個是數據的狀態state，也就是初始值，另一個是對數據需要進行的操作，在函數體里面通過switch case語句指出不同的type需要進行的不同操作，這里實現的是一個計數器原理

type Action = { type: 'add' } | { type: 'del' };function reducer(state: number, action: Action) {switch (action.type) {case 'add':return state + 1;case 'del':return state - 1;default:return state;}
}

在組件中初始化useReducer，給按鈕分別添加響應事件，通過dispatch分發點擊的type，就可以執行reducer函數里對應的操作了

function App() {const [state, dispatch] = useReducer(reducer, 0);const handleAdd = () => {dispatch({ type: 'add' });};const handleDel = () => {dispatch({ type: 'del' });};return (<div className="App"><h1>Count: {state}</h1><button onClick={handleAdd}>Add</button><button onClick={handleDel}>Del</button></div>);
}

3.useState和useReducer區別

useState適用于處理簡單的狀態管理，適用于獨立的、無關聯的狀態。
useReducer適用于處理復雜的狀態邏輯，具有多個相關狀態需要統一管理的情況。