React 异步陷阱：`setState` 不是立刻生效？—— 从“累加失败”到“优雅批处理”的实战指南
React 异步陷阱：setState不是立刻生效？—— 从“累加失败”到“优雅批处理”的实战指南
正文目录
- 为什么
setState是异步？ - 3 个高频翻车现场 & 修复代码
- 优雅写法：函数式更新与回调
- 性能对比与最佳实践
- 一句话总结
一、为什么setState是异步？
React 为了批量更新和性能优化，会把多次setState合并为一次重渲染。
因此：
this.setState({ count: 1 })后立刻读this.state.count仍是旧值。- 多次连续调用会被累加合并，而非顺序执行。
二、3 个高频翻车现场 & 修复
① 累加失败：连续 +1 只生效一次
class Counter extends React.Component { state = { count: 0 }; handleClick = () => { this.setState({ count: this.state.count + 1 }); this.setState({ count: this.state.count + 1 }); // ❌ 仍是旧值 console.log(this.state.count); // 0（未更新） }; }修复：函数式更新（拿到最新状态）
handleClick = () => { this.setState(prev => ({ count: prev.count + 1 })); this.setState(prev => ({ count: prev.count + 1 })); // ✅ 基于最新值 };② 依赖旧状态做计算
const [count, setCount] = useState(0); const handleAdd = () => { setCount(count + 1); console.log(count); // ❌ 仍是 0 };修复：函数式更新（Hook 同样适用）
const handleAdd = () => { setCount(prev => prev + 1); console.log('下次渲染时才是新值'); };③ 需要在更新后立刻操作
const [show, setShow] = useState(false); const handleToggle = () => { setShow(!show); if (!show) console.log('已打开'); // ❌ 仍是旧值 };修复：用回调（类组件）或useEffect（Hook）
const handleToggle = () => { setShow(prev => { const next = !prev; console.log(next); // ✅ 最新值 return next; }); }; // 或 useEffect(() => { if (show) console.log('已打开'); }, [show]);三、优雅写法：函数式更新与回调
| 场景 | 推荐写法 |
|---|---|
| 累加/累乘 | setState(prev => prev + 1) |
| 依赖旧状态 | 始终用函数式 |
| 更新后操作 | 类：setState(updater, callback)Hook：useEffect |
类组件回调：
this.setState( prev => ({ count: prev.count + 1 }), () => console.log('更新完成', this.state.count) );四、性能对比（DevTools Profiler）
| 写法 | 渲染次数 | 是否批处理 |
|---|---|---|
| 连续对象式 | 1 次 | ✅ 批处理 |
| 函数式 | 1 次 | ✅ 批处理 + 正确值 |
| 同步读取 state | 0 次（旧值） | ❌ 拿不到新值 |
函数式更新：既批处理又正确，一石二鸟。
五、一句话总结
「setState 异步」= 不要立刻读 state，用函数式更新拿最新值，用回调/useEffect 处理后续逻辑。
让批处理发挥性能，让代码保持正确，异步不再是坑！
最后问候亲爱的朋友们，并邀请你们阅读我的全新著作
📚 《 React开发实践：掌握Redux与Hooks应用 》