React中调用setCounter前执行函数，console.log是否始终输出旧counter值？

结论：_doSomethingWithCount()中的console.log始终会输出调用setCounter(counter + 1)之前的旧counter值，不会出现竞态或等待state更新的情况。

原因分析： #

1. React setState的异步批量更新特性：setState并非立即修改state，而是将更新请求加入队列，要等当前同步代码执行完毕后，React才会批量处理更新并触发组件重新渲染。在_onClick的同步执行流程里，调用setCounter后，state不会立刻变化。
2. 函数组件的state快照特性：函数组件中的state变量（比如这里的counter）是每次渲染时的固定快照。在_onClick执行的整个同步过程中，counter的值就是当前渲染周期的旧值，后续的setCounter调用不会修改这个已经捕获的快照——新的counter值要等组件重新渲染时才会生成。

代码执行流程拆解： #

点击按钮触发_onClick后：

• 先执行_doSomethingWithCount()，此时counter是当前渲染的旧值（比如第一次点击是0），所以console.log输出旧值。
• 接着调用setCounter(counter + 1)，这个操作只是把更新任务加入队列，不会立刻改变当前的counter变量。
• 等整个_onClick函数执行完毕，React才会处理队列中的更新请求，重新渲染组件，生成新的counter值（比如1），供下一次渲染使用。

不存在所谓的“竞态”情况，因为JavaScript是单线程的，同步代码会按顺序执行到底，setState的异步更新不会打断当前的同步执行流程；_doSomethingWithCount也不会“等待”state设置完成，它同步执行时用的就是当前渲染的state快照。

内容的提问来源于stack exchange，提问作者four-eyes