React中连续调用两次setState为什么count值只加1而非加2？

问题代码逻辑 #

你写的无法按预期累加2的代码如下：

import { useState } from "react";

const Counter = () => {
  const [count,setCount]= useState(0);

  const buttonHandler = ()=>{
    setCount(count+1);
    setCount(count+1);
  }

  return (
    <div >
        {count}
        <button onClick={buttonHandler}>+</button>
    </div>
  );
}

第一种写法失效的核心原因 #

• React组件每次渲染都会生成独立的状态快照，当前渲染周期内所有变量、事件回调拿到的状态都是固定不变的。比如当前渲染时count值为0，那么buttonHandler中所有用到count的地方拿到的都是0这个固定值。
• React默认会对同一个事件循环内的所有状态更新做批量合并处理，不会每调用一次setCount就立刻触发重渲染。你连续两次调用setCount(count+1)，本质都是传入0+1=1这个新值，React合并更新时发现两次传入的最终状态一致，只会执行一次更新，最终count只会变成1，达不到加2的效果。

函数式更新写法生效的原因 #

你调整后的写法如下：

const buttonHandler = ()=>{
    setCount(prevCount => prevCount+1);
    setCount(prevCount => prevCount+1);
}

当你给setCount传入函数作为参数时，React不会直接取当前渲染快照的状态值，而是会把这些更新函数加入更新队列按顺序执行：前一个更新函数的返回值会作为后一个更新函数的入参prevCount。
第一次执行更新函数时，prevCount是当前最新状态值0，返回1；第二次执行更新函数时，prevCount是上一步更新后的值1，返回2。最终合并更新后count的值为2，符合两次累加的预期。

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