关键词：React useReducer
useReducer是 React Hooks 的一个部分，它为状态管理提供了一个更加灵活的方法。useReducer特别适合处理包含多个子值的复杂状态逻辑，或者当下一个状态依赖于之前的状态时。与useState相比，useReducer更适合于复杂的状态逻辑，它使组件的状态管理更加清晰和可预测。
基础使用：
const [state, dispatch] = useReducer(reducer, initialState);state：当前管理的状态。dispatch：一个允许你分发动作(action)来更新状态的函数。reducer：一个函数，接受当前的状态和一个动作对象作为参数，并返回一个新的状态。initialState：初始状态值。
Reducer 函数：
Reducer 函数的格式如下：
function reducer(state, action) {
switch (action.type) {
case "ACTION_TYPE": {
// 处理动作并返回新的状态
return newState;
}
// 更多的动作处理
default:
return state;
}
}动作（Action）：
动作通常是一个包含type字段的对象。type用于在 reducer 函数中标识要执行的动作。动作对象也可以包含其他数据字段，用于传递动作所需的额外信息。
示例：
以下是一个使用useReducer的简单示例：
import React, { useReducer } from "react";
// 定义reducer函数
function counterReducer(state, action) {
switch (action.type) {
case "increment":
return { count: state.count + 1 };
case "decrement":
return { count: state.count - 1 };
default:
return state;
}
}
function Counter() {
// 初始化状态和dispatch函数
const [state, dispatch] = useReducer(counterReducer, { count: 0 });
return (
<>
Count: {state.count}
<button onClick={() => dispatch({ type: "decrement" })}>-</button>
<button onClick={() => dispatch({ type: "increment" })}>+</button>
</>
);
}在上面的例子中，我们创建了一个简单的计数器。当用户点击按钮时，会分发一个包含type的动作到useReducer钩子。然后，reducer函数根据动作type来决定如何更新状态。
使用场景：
- 管理局部组件的状态。
- 处理复杂的状态逻辑。
- 当前状态依赖上一状态时，可以通过上一状态计算得到新状态。
useReducer通常与Context一起使用可以实现不同组件间的状态共享，这在避免 prop drilling（长距离传递 prop）的同时使状态更新更为模块化。