React状态更新与渲染机制疑问：表单提交为何能获取最新状态？

核心原因是React的状态快照和事件处理函数的绑定时机有关——不是看set函数的调用顺序，而是看函数本身属于哪个渲染周期。

第一个例子的逻辑 #

当你在同一个事件处理函数里调用setName后立刻alert(name)时，这个函数是在当前渲染周期创建的，它捕获的是当前渲染的状态快照。setName只是把状态更新请求加入队列，不会立刻改变当前函数里的name变量——因为当前函数的变量环境已经固定，属于本次渲染的快照，所以alert出来的还是旧值。

第二个表单例子的逻辑 #

你输入内容时，每一次输入都会触发onChange事件调用setTo/setMessage，这会触发React重新渲染，生成新的状态快照。而表单的onSubmit处理函数，是在每一次重渲染时重新创建的，它会捕获最新的状态快照。当你点击提交时，执行的是最新渲染周期里的onSubmit函数，自然能拿到最新的to和message值。

简单总结：

• 同一个事件处理函数内，调用set后立刻使用状态，拿到的是当前渲染的旧值
• 跨渲染周期的事件处理函数（比如多次输入后触发的提交），拿到的是最新渲染的状态值

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