useReducer-是-React-Hooks-提供的状态管理工具,用于处理-复杂状态逻辑
目录
useReducer 是 React Hooks 提供的状态管理工具，用于处理 复杂状态逻辑
useReducer 是 React Hooks 提供的状态管理工具，其核心作用是将状态更新逻辑与 UI 组件分离.
一、useReducer 编写流程
1.定义初始状态（initialState）
声明需要管理的状态结构，通常是一个对象（适合多状态值的场景）。
jsx
const initialState = {
count: 0,
status: 'idle'
};2.创建 reducer 函数
reducer 是一个纯函数，接收当前 state 和 action，根据 action.type 返回新的状态（禁止直接修改原状态）。
state：当前状态
action：一个包含 type（必选，标识操作类型）和 payload（可选，传递数据）的对象
jsx
function reducer(state, action) {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 }; // 返回新状态
case 'DECREMENT':
return { ...state, count: state.count - 1 };
case 'SET_STATUS':
return { ...state, status: action.payload }; // 接收 payload 更新状态
default:
throw new Error('未知 action 类型');
}
}3.在组件中使用 useReducer
调用 useReducer，传入 reducer 和 initialState，返回 [state, dispatch]：
state：当前状态值
dispatch：用于触发状态更新的函数（接收 action 作为参数）
jsx
import { useReducer } from 'react';
function Counter() {
// 初始化 useReducer
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>计数：{state.count}</p>
<p>状态：{state.status}</p>
{/* 调用 dispatch 触发状态更新 */}
<button onClick={() => dispatch({ type: 'INCREMENT' })}>加 1</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>减 1</button>
<button onClick={() => dispatch({ type: 'SET_STATUS', payload: 'active' })}>
更改状态
</button>
</div>
);
}二、useReducer 的核心作用
处理复杂状态逻辑
例如：表单多字段校验、购物车加减库存 + 选中状态联动等。
状态逻辑复用
reducer 函数可独立抽离（无需重复编写 setState 逻辑）。
优化多组件通信
减少 props 层级嵌套。
三、与 useState 的区别
useState 适合 简单状态（如单个值、独立状态）
useReducer 适合 复杂状态逻辑（多状态联动、多条件更新）
例如：管理一个包含 “用户信息、登录状态、权限列表” 的组件，用 useReducer 会比多个 useState 更高效。