🤓 前言：
初出茅庐的我，只知道
useState，一行状态一个钩子，用得不亦乐乎。直到有一天，我看见大厂大佬们在项目中用useReducer一通操作猛如虎，看得我一脸懵......于是我决定搞懂这个"装逼又实用"的钩子，走上进阶之路！本文是我学习
useReducer后的总结，适合所有正在从小白往进阶之路迈进的朋友~
🍿useReducer 是什么？一句话解释
useReducer 就是
useState的"升级版"------当状态变复杂，用它更清晰、更可控、更像大厂！
换句话说，当你发现 useState 写得像麻辣烫一样混乱：
scss
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [data, setData] = useState([]);是时候让 useReducer 上场了！
🧠useReducer 的核心原理
先给出一句文艺又简洁的解释：
useReducer本质是 "状态 + 行为 = 新状态" 的一个组合公式。
拆开来看，它需要 3 个东西：
state: 当前的状态action: 一个"动作对象"，描述你想干嘛（一般含type字段）reducer: 一个纯函数，接收上面两个参数，返回新状态
官方签名：
scss
const [state, dispatch] = useReducer(reducer, initialState);🍱 举个香喷喷的例子！
我们写一个"计数器"，支持加一、减一和重置。
1️⃣ 初始状态
ini
const initialState = { count: 0 };2️⃣ Reducer 函数
js
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
case 'reset':
return { count: 0 };
default:
return state;
}
}3️⃣ 使用 useReducer
js
import React, { useReducer } from 'react';
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<h2>Count: {state.count}</h2>
<button onClick={() => dispatch({ type: 'increment' })}>加一</button>
<button onClick={() => dispatch({ type: 'decrement' })}>减一</button>
<button onClick={() => dispatch({ type: 'reset' })}>重置</button>
</div>
);
}💡说明一下
dispatch是你的"遥控器"，告诉 reducer 你想干嘛。action是指令内容，比如{ type: 'increment' }reducer会根据这条指令返回新的状态。
是不是感觉像是在操作一个小型的 Redux？没错！这就是它的灵感来源。
🧩 useReducer vs useState 有啥区别？
| 对比项 | useState | useReducer |
|---|---|---|
| 适用场景 | 简单状态 | 复杂逻辑（多状态、状态依赖） |
| 状态拆分 | 多个 useState | 一个 useReducer 管全局 |
| 状态更新方式 | 直接赋值 | dispatch 动作 |
| 维护成本 | 简单、上手快 | 稍难，但结构清晰、可控 |
🧪 再来个实战案例：表单状态管理
如果你做个登录表单：
js
const initialState = { username: '', password: '', error: null };
function reducer(state, action) {
switch (action.type) {
case 'setUsername':
return { ...state, username: action.payload };
case 'setPassword':
return { ...state, password: action.payload };
case 'setError':
return { ...state, error: action.payload };
default:
return state;
}
}
function LoginForm() {
const [state, dispatch] = useReducer(reducer, initialState);
const handleSubmit = (e) => {
e.preventDefault();
if (!state.username || !state.password) {
dispatch({ type: 'setError', payload: '请填写完整' });
} else {
dispatch({ type: 'setError', payload: null });
// 模拟登录...
}
};
return (
<form onSubmit={handleSubmit}>
<input
value={state.username}
onChange={(e) => dispatch({ type: 'setUsername', payload: e.target.value })}
placeholder="用户名"
/>
<input
type="password"
value={state.password}
onChange={(e) => dispatch({ type: 'setPassword', payload: e.target.value })}
placeholder="密码"
/>
{state.error && <p style={{ color: 'red' }}>{state.error}</p>}
<button type="submit">登录</button>
</form>
);
}对比用多个 useState 的写法是不是更集中清晰？
📌 总结：useReducer 核心知识点汇总
让我们来复盘一下：
- useReducer 适合管理复杂状态，特别是多个字段、多个行为逻辑。
- reducer 是个纯函数 ，根据
state和action决定新的state。 dispatch(action)就像触发一个"行为"，让状态发生更新。- 如果你熟悉 Redux，
useReducer简直就是微型 Redux！ - 它让你的状态逻辑 更清晰、更集中、更可测试------这也是大厂项目偏爱它的原因。
🎯 最后给还在努力学习的你几句话：
不要怕看不懂源码，不要怕 API 太复杂。就像你小时候学自行车，一开始不稳，骑着骑着就飞起来了！
今天学会
useReducer，明天 Redux Toolkit 就不在话下，大后天 Zustand、Jotai、Recoil 你也能手拿把掐！
📌觉得本文有帮助？帮我点个赞 + 收藏吧，更多前端成长经验持续更新中！评论区也欢迎你分享你的 reducer 使用场景～