React中函数式状态更新的避坑场景及应用必要性问询

我完全懂你的困惑——刚接触React状态更新的时候，我也觉得两种写法没多大区别，直到踩过几次坑才明白函数式更新到底能帮我们避开哪些隐蔽的bug！

先从你提供的代码说起：

export default function Counter({ initCount }) { 
  const [count, setCount] = useState(initCount);
  useEffect(() => { 
    console.log(count); 
  }, [count]);
  const incrementCount = () => {
    // example #1：连续调用只加1，因为两次用的都是同一个旧count值
    // setCount(count + 1);
    // setCount(count + 1);
    // example #2：连续调用正确加2，因为每次都基于上一次的最新状态
    setCount((currCount) => currCount + 1);
    setCount((currCount) => currCount + 1);
  };
  const decrementCount = () => {
    setCount((currCount) => currCount - 1);
    setCount((currCount) => currCount - 1);
  };
  return (
    <div>
      <button onClick={decrementCount}>-</button>
      {count}
      <button onClick={incrementCount}>+</button>
    </div>
  );
}

这里的核心问题是：React的状态更新是异步批量的，普通写法的setCount(count +1)里的count是从当前函数闭包中获取的旧值——连续调用两次时，两次更新用的都是同一个旧值，所以最终只加了1；而函数式更新setCount(curr => curr+1)是让React把更新逻辑加入队列，每次都基于上一次更新后的最新状态计算，所以能正确累加。

下面是几个常见的场景，函数式更新能帮你避免实实在在的bug：

场景1：异步操作后更新状态 #

比如你在接口请求、定时器这类异步操作完成后更新状态，普通写法很容易拿到旧状态：

export default function AsyncCounter() {
  const [count, setCount] = useState(0);

  const fetchDataAndIncrement = () => {
    // 模拟接口请求的异步延迟
    setTimeout(() => {
      // 这里的count是发起请求时的旧值，不是当前最新状态
      // 如果在等待期间点击同步+1，这里的count还是旧值，更新后会覆盖最新状态
      setCount(count + 1);
      // 换成函数式更新就没问题：
      // setCount(curr => curr + 1);
    }, 1000);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={fetchDataAndIncrement}>异步+1</button>
      <button onClick={() => setCount(count + 1)}>同步+1</button>
    </div>
  );
}

操作步骤：先点「同步+1」让count变成1，立刻点「异步+1」，1秒后你会发现count又变回了1（因为异步回调里的count是0），这完全不符合预期。但换成函数式更新后，不管什么时候执行回调，都会基于最新的状态计算，结果会是正确的2。

场景2：循环/批量更新状态 #

当你需要批量执行多次状态更新时，普通写法会直接失效：

export default function BatchCounter() {
  const [count, setCount] = useState(0);

  const incrementMultipleTimes = (times) => {
    // 普通写法：循环5次，最终count只加1
    for (let i = 0; i < times; i++) {
      setCount(count + 1);
    }
    // 函数式写法：正确累加5次
    // for (let i = 0; i < times; i++) {
    //   setCount(curr => curr + 1);
    // }
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => incrementMultipleTimes(5)}>加5次</button>
    </div>
  );
}

普通写法里，循环的每一次setCount都用的是同一个旧count值，所以所有更新都会被合并，最终只加了1；而函数式更新每次都基于前一次的结果，所以能正确累加5次。

场景3：带条件判断的状态更新 #

当你的状态更新需要基于当前状态做判断（比如限制最大值、最小值），普通写法在快速连续操作时会失效：

export default function LimitedCounter() {
  const [count, setCount] = useState(0);

  const safeIncrement = () => {
    // 普通写法：快速连续点击，可能会让count超过10
    if (count < 10) {
      setCount(count + 1);
    }
    // 函数式写法：严格保证不超过10
    // setCount(curr => {
    //   return curr < 10 ? curr + 1 : curr;
    // });
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={safeIncrement}>安全+1（不超过10）</button>
    </div>
  );
}

快速连续点击按钮时，普通写法会因为React的异步批量更新，导致多次判断用的都是旧的count值（比如count已经是9时，两次点击的判断都认为9<10，最终count变成11）；而函数式更新里，每次判断都是基于上一次更新后的最新状态，能严格遵守“不超过10”的限制。

总结 #

函数式更新的核心价值是：让状态更新依赖于最新的状态快照，而不是函数闭包里的旧值。只要你的状态更新逻辑需要基于当前状态计算新状态，且更新可能被异步延迟、批量执行，或者需要连续多次更新，函数式更新都能帮你避免状态不一致的bug。

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