React类组件this.setState与函数组件useState Hook的状态更新差异是什么？

首先要纠正一个常见误区：useState并非绝对同步，setState也不是真异步，两者的差异是由React针对不同组件设计的更新策略和底层机制决定的。

类组件setState的“异步表现”本质 #

类组件的setState之所以看起来是异步的，核心是React的批量更新优化：

• 在React的合成事件（比如onClick）、生命周期钩子（比如componentDidMount）中调用setState时，React会把多个setState调用合并成一次组件更新，避免频繁渲染带来的性能损耗。
• 因为批量更新的存在，调用setState后立即读取this.state，拿到的还是更新前的旧值——不是setState本身是异步操作，而是React延迟了状态的更新时机，直到当前事件循环的批量更新阶段结束才会修改this.state并触发渲染。
• 但在原生事件（比如document.addEventListener）、setTimeout这类脱离React管控的环境中，setState会同步更新状态，因为React无法对这些场景进行批量处理。

举个类组件的例子：

class Counter extends React.Component {
  state = { count: 0 };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
    console.log(this.state.count); // 输出0，此时state还未更新
    this.setState({ count: this.state.count + 1 });
    console.log(this.state.count); // 仍输出0，最终count会变成1（两次更新都基于旧值）
  };

  render() {
    return <button onClick={this.handleClick}>点击计数</button>;
  }
}

函数组件useState的更新表现 #

函数组件基于闭包和渲染快照的设计，状态更新的逻辑和类组件完全不同：

• 每次调用setState（useState返回的更新函数），会标记组件需要重新渲染。在下一次渲染时，函数组件会重新执行，此时useState会返回更新后的状态值——这个新状态是当前渲染周期的“快照”，和之前的渲染周期完全隔离。
• 在当前渲染周期的函数执行过程中，即使调用了setCount，你读取到的count仍然是当前渲染的旧值，因为闭包捕获的是当前周期的状态快照。
• React 18之后，函数组件在所有场景下默认开启批量更新（包括原生事件、setTimeout），但这不会改变闭包的特性——你还是只能在下一次渲染中拿到新状态。

举个函数组件的例子：

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

  const handleClick = () => {
    setCount(prev => prev + 1);
    console.log(count); // 输出0，当前渲染周期的count是旧快照
    setCount(prev => prev + 1);
    console.log(count); // 仍输出0，最终count会变成2（用函数式更新基于前一次状态）
  };

  return <button onClick={handleClick}>点击计数</button>;
}

设计层面的原因 #

React针对类组件和函数组件的不同特性，选择了不同的更新策略：

• 类组件依赖可变的this对象，this.state是同一个引用的可变对象。如果同步更新this.state，可能会导致在同一事件循环中多次读取到中间状态，引发组件状态不一致的问题，批量更新能避免这种情况。
• 函数组件的状态是不可变的快照，每次渲染都是独立的函数执行上下文，闭包会捕获当前周期的所有状态和属性。这种设计天然隔离了不同渲染周期的状态，不需要依赖异步批量更新来维护一致性，所以表现上和类组件的setState有明显差异。

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