你是否曾在 React 里写一个计数器。期待连续点击按钮能得到递增的结果，却只看到同一个数字？这正是因为 React 的状态更新并不是即时赋值，而是“快照 + 队列”机制导致的。下面让我们用最直观的方式拆解这一点，并给你一些实际方法。

一、useState 保存的不是普通局部变量

jsx import { useState } from 'react';function App { const = useState;const addCount = => { setCount;setCount，setCount;}，return ( <>

说到当前计数，{count}

 增加

);} export default App;说起来，

这里的count是当前渲染读取到的状态快照；setCount只是把一次更新请求放进队列，并不会立刻改动变量。

如果你在 setter 后立即打印：

jsx const addCount = => { setCount;console.log，// 打印仍为旧值 };

控制台会输出旧值。因为此时事件处理函数已拿到一次快照，无法反映后续更新。

二、每次渲染都有自己的状态快照

React 函数组件会在状态变化时重新调用。话说回来，第一次渲染时 count 为 0。addCount 函数捕获的是这个值。三次调用都基于同一快照计算：

jsx setCount;// count 为0 -> 更新为1 setCount;// count 为0 -> 更新为1 setCount;// count 为0 -> 更新为1

最终页面只显示“1”。 不过，如果想让每一次调用都累加，需要使用函数式更新。按理说，

再看痛点一。多次调用同一 setter 看似无效？

当你连续写了三行setCount却只看到一次变化，这往往让人误以为 React 丢弃了前面几条更新。但，它们都按顺序提交，只是基于同一个旧值而已。话说回来，

三、React 为什么要批量处理状态更新？

Batching可以避免不必要的重复渲染。例如你同时需要移动角色坐标、速度和方向：

`handleMove` 中连续写三行 setter 时React 会先收集所有请求。接下来一次性完成下一轮渲染，而不是每个 setter 都触发一次。

从痛点二来看，想同步多项状态却导致闪烁或性能下降？怎么说呢，

Batched 更新保证了一致性与性能。 但也可能让你误以为某些更新被“忽略”。 了解其工作原理后你就能更精准地控制 UI 渲染频率。

四、函数式更新实现真正累加

`setCount` 每个函数都会拿到前一步已经计算好的最新值，这样就能实现真正的累加：

const addCount = => {
setCount;setCount，setCount;}，其实，

至于痛点三。为什么直接传值会丢失中间状态？

因为直接传值会覆盖之前所有未执行的更新。而函数式写法则按照队列顺序逐步累计，非常适合依赖前一次状态的场景。

五、何时使用直接赋值 vs 函数式更新？

• 不依赖当前状态： 如表单输入、新数据加载等，直接传入新值即可。
• 依赖当前状态： 如计数器、布尔切换或数组追加等场景，用函数式写法避免旧快照问题。不过，

至于痛点四。混用两种写法导致逻辑难以追踪？