useState 明明是异步的，为什么你总以为它是同步的？

前端技术 Apr 12, 2020

每一个 React 萌新都踩过的坑：setState 到底什么时候生效？

你点了按钮，控制台打印出来的是 0。“啥？？？我明明 setCount(count + 1) 了！！！！”

兄弟，冷静。这不是 React 的 Bug，这是 Feature。useState 的更新是异步的。React 非常心机地把多个 setState 攒到一起，找个合适的时机一次性批量更新 DOM。这叫“批处理”（Batching），目的是为了性能和一致性。

解决方案：用函数式更新 setCount(prev => prev + 1)，或用 useEffect 监听变化。还有一个经典的 Stale Closure 陷阱：在 setInterval 里用 setCount(count + 1)，结果 count 从 0 变成 1 之后再也不变了！改成 setCount(prev => prev + 1) 就解决了。

总结：useState 是异步的，别跟它较劲，顺着它的规矩来。你越是想同步拿新值，React 就越让你失望——像极了爱情。