基于前状态值的setState异步执行及连续调用无竞态原理

你说的没错，React里的状态更新（不管是类组件的setState还是函数组件的useState更新函数）确实是异步批量处理的，但函数式更新的设计从根本上避免了竞态问题，下面给你拆解具体逻辑：

两种更新写法的核心差异 #

先明确两种更新方式的区别，这是理解问题的关键：

• 直接传值更新：setNum(num + 1)
• 函数式更新：setNum(prevNum => prevNum + 1)

如果用第一种写法在循环里连续调用5次，因为异步批量更新的特性，每次取到的num都是更新前的旧值，最终结果只会加1。但函数式更新就不会出现这个问题，原因就在React的更新队列处理逻辑里。

更新队列的执行机制 #

React内部维护了一个更新队列，当你调用状态更新函数时：

• 要是用函数式更新，React会直接把这个更新函数塞进队列，不会提前计算新状态值。
• 当React准备好执行批量更新时，会按顺序遍历这个队列，每次执行更新函数时，传入的prevNum都是上一次更新完成后的最新状态。

拿你的代码举例：

const IncrementByFive = () => {
    for (let i = 0; i < 5; i++) {
      setNum(prevNum => prevNum + 1);
    }
};

循环里的5次setNum调用，会把5个prevNum => prevNum +1的函数依次加入更新队列。等React处理这个队列时：

1. 第一次执行：prevNum是初始状态（比如0），返回1
2. 第二次执行：prevNum是刚更新的1，返回2
3. 第三次执行：prevNum是2，返回3
4. 第四次执行：prevNum是3，返回4
5. 第五次执行：prevNum是4，返回5

最终状态就准确变成了5——因为每个更新函数都依赖前一次的结果，而队列的顺序执行保证了这个依赖链不会断，自然不会出现竞态。

异步批量更新的底层逻辑 #

这里要澄清一点：React的“异步”不是说更新函数本身是异步函数，而是它会延迟状态更新的执行时机，把多个更新合并成一次渲染，以此提升性能。但不管怎么延迟，只要用的是函数式更新，更新逻辑是被保存下来的，等到批量执行时，每一步都基于最新的前状态计算新值，所以能准确完成累加。

反观直接传值的情况，调用setState时就已经计算好了要更新的值（比如num+1里的num是当时的旧值），所以多次调用都是基于同一个旧值，最终只生效一次。而函数式更新把计算逻辑延迟到了批量更新阶段，每次都用最新的状态，这就是它能准确执行的核心原因。

内容的提问来源于stack exchange，提问作者Mahdi