React 要点 函数式更新 1
在 React 的 useState Hook 中，状态更新函数（如 setCount）支持传入回调函数，这是 React 状态管理的一个重要特性。
深入解析 setCount 的两种调用方式：
-
直接传递新值（基础用法）：
setCount(10); // 直接将状态设置为 10 -
传递更新函数（函数式更新）：
setCount((prevCount) => prevCount + 1); // 基于前一个值计算新值
关键特性说明：
1. 函数式更新的工作原理
当您传递一个函数给 setCount 时：
setCount(updaterFunction);
- React 会在内部调用这个函数
- 它会将当前最新的状态值作为参数传递给该函数
- 函数的返回值会成为新的状态值
2. 为什么需要这种设计
考虑这个组件：
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
// 连续三次更新
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
};
return <button onClick={increment}>增加（实际只加1）</button>;
}
这里点击按钮后，count 只会增加 1 而不是 3，因为三次更新都使用了相同的 count 值（闭包问题）。
3. 函数式更新如何解决这个问题
const increment = () => {
setCount((prev) => prev + 1);
setCount((prev) => prev + 1);
setCount((prev) => prev + 1);
};
现在点击按钮后，count 会正确增加 3，因为每次更新都基于前一次的最新值。
技术细节图解
组件渲染周期
│
├── 初始状态：count = 0
│
├── 用户点击按钮
│ │
│ ├── setCount(prev => prev + 1) // prev = 0 → 新值=1
│ │
│ ├── setCount(prev => prev + 1) // React 记住这是第二次更新
│ │
│ └── setCount(prev => prev + 1) // React 记住这是第三次更新
│
├── React 批量处理更新：
│ ├── 第一次更新：prev=0 → 0+1=1
│ ├── 第二次更新：prev=1 → 1+1=2
│ └── 第三次更新：prev=2 → 2+1=3
│
└── 重新渲染：count = 3
何时必须使用函数式更新？
| 场景 | 是否必需 | 示例 |
|---|---|---|
| 更新依赖前一个状态值 | 必需 | 计数器、切换状态 |
| 连续多次状态更新 | 必需 | 批量增加/减少 |
| 异步更新后使用状态 | 必需 | 在 setTimeout 中更新 |
| 新值与旧值无关 | 可选 | 重置表单 |
实际应用示例
function ComplexComponent() {
const [user, setUser] = useState({
name: "张三",
points: 0,
});
// 更新用户点数（函数式更新）
const addPoints = (amount) => {
setUser((prev) => ({
...prev,
points: prev.points + amount,
}));
};
// 切换用户状态
const toggleStatus = () => {
setUser((prev) => ({
...prev,
isActive: !prev.isActive,
}));
};
return (
<div>
<p>
{user.name} - 点数: {user.points}
</p>
<button onClick={() => addPoints(5)}>+5点</button>
<button onClick={toggleStatus}>{user.isActive ? "禁用" : "启用"}</button>
</div>
);
}
为什么 React 这样设计？
- 解决闭包问题：确保总是获取最新状态
- 支持批量更新：提高性能
- 保证更新顺序：即使异步操作也能保持正确性
- 避免竞态条件：特别在并发模式下更重要
总结
useState 返回的 setCount 函数支持直接传递值，也支持传递回调函数。这种函数式更新方式是处理依赖前值的状态更新的推荐做法，也是 React 状态管理的核心模式之一。
