为何在React中优先使用前序状态而非当前状态更新状态？

核心原因 #

React的状态更新是异步且批量处理的，组件渲染时会形成闭包捕获当前状态值。如果直接使用当前状态（比如setCount(count + 1)），你用到的count是闭包中保存的旧值，并不是最新的状态——尤其是在异步操作（比如定时器、API请求）或者连续多次更新状态的场景下，很容易出现状态计算错误、竞态条件。

而使用前序状态的函数式更新（setCount(prevCount => prevCount + 1)）时，React会把这个更新函数加入队列，执行时会自动传入最新的前序状态值，确保每次更新都基于当前真实的状态，避免闭包带来的旧值问题。

代码示例对比 #

场景1：异步操作下的状态更新

错误用法（直接用当前状态）

import { useState } from 'react';

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

  const handleClick = () => {
    // 模拟API请求或其他异步操作
    setTimeout(() => {
      setCount(count + 1);
    }, 1000);
  };

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={handleClick}>延迟1秒加1</button>
    </div>
  );
}

问题：快速点击两次按钮，两次更新使用的都是闭包中初始的count=0，最终计数只会变成1，而不是预期的2。

正确用法（使用前序状态）

import { useState } from 'react';

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

  const handleClick = () => {
    setTimeout(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
  };

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={handleClick}>延迟1秒加1</button>
    </div>
  );
}

结果：快速点击两次，每次更新都会拿到最新的前序计数，最终计数会变成2，符合预期。

场景2：连续同步更新状态

错误用法

import { useState } from 'react';

function SyncCounter() {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={handleDoubleClick}>连续加两次</button>
    </div>
  );
}

问题：两次setCount用的都是同一个count值，最终计数只会加1，不是2。

正确用法

import { useState } from 'react';

function SyncCounter() {
  const [count, setCount] = useState(0);

  const handleDoubleClick = () => {
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
  };

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={handleDoubleClick}>连续加两次</button>
    </div>
  );
}

结果：两次更新基于最新的前序状态，最终计数加2，符合预期。

深入理解的参考方向 #

• React官方文档中「状态更新的函数式写法」章节：详细说明了异步更新机制、闭包对状态值的影响
• React核心概念中「状态更新可能是异步的」小节：解释了React批量处理状态更新的逻辑

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