React函数组件更新状态时是否需要传递前序状态？

React官方文档明确类组件因异步批量更新机制，不能直接用this.state或this.props计算下一个状态，必须通过函数式setState获取前序状态，但文档未提及函数组件的类似要求——那是不是函数组件更新状态时就能直接依赖当前状态值？

先回顾类组件的核心问题 #

React可能会将多个setState()调用批量处理为单次更新以提升性能。
由于this.props和this.state可能会异步更新，因此不应依赖它们的值来计算下一个状态。
例如，以下代码可能无法正确更新计数器：

// 错误写法
this.setState({
  counter: this.state.counter + this.props.increment,
});

要修复此问题，请使用setState()的第二种形式：接受函数而非对象。该函数会接收前序状态作为第一个参数，更新应用时的props作为第二个参数：

// 正确写法
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

函数组件的实际场景分析 #

文档里的函数组件示例如下：

import React, { useState } from 'react';

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

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
       点击我
      </button>
    </div>
  );
}

第9行：当用户点击时，我们调用setCount并传入新值。React随后会重新渲染Example组件，并将新的count值传入。

这个示例里直接用count + 1没问题，是因为每次点击都会触发组件重新渲染，count会被更新为最新值，单次更新场景下不会有问题。但这不代表函数组件所有场景都能直接依赖当前状态：

• 当你在同一个事件处理逻辑里多次调用状态更新时，比如：

// 点击一次想让count加2，但实际只会加1
const handleClick = () => {
  setCount(count + 1);
  setCount(count + 1);
};

这是因为闭包捕获了当前渲染周期的count值，两次调用用的都是同一个旧值，最终只会生效一次加1的操作。

• 当你在异步操作（比如setTimeout、API请求回调）里更新状态时，也会遇到同样的闭包问题：此时count还是异步操作触发时的旧值，无法正确获取最新状态。

这种情况下，函数组件同样需要使用函数式更新来获取前序状态：

// 正确写法，每次都基于最新的前序状态更新
setCount(prevCount => prevCount + 1);

总结 #

函数组件不是任何场景都能直接依赖当前状态值，当你的状态更新逻辑依赖前一次的状态结果，且存在批量更新、异步操作这类可能导致闭包捕获旧值的场景时，必须使用函数式更新来获取最新的前序状态，和类组件的函数式setState原理一致。

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