跳到主要内容

响应数据的异步更新与批量更新

在 React 中，setState 的异步性和批量更新是核心设计机制，主要用于优化性能和保证状态更新的一致性。

一、问什么需要异步和批量更新​

React 的核心目标是高效渲染 UI。如果每次 setState 都立即触发状态更新和重新渲染，将会：

  • 性能问题：频繁的重新渲染会消耗大量的计算资源
  • 状态不一致：同一事件循环中的多次状态依赖可能基于旧值计算，导致逻辑错误

因此， React 会将短时间内连续的 setState 调用 批量合并，并延迟更新，最终统一计算并触发一次渲染

二、异步更新原理​

setState 的异步并非真正的异步（如 Promise 或 setTimeout），而是 React 对更新过程的调用控制：

  • 状态暂存： 调用 setState 时， React 不会直接修改 this.state ，而是将请求（包含新的状态片段或函数）存入组件的更新列队（updateQueue）
  • 延迟处理：当前事件循环结束后（如事件回调执行完毕）， React 会统一处理所有挂起的更新，合并计算出新的状态，并触发重新渲染（re-render）

三、批量更新的实现机制​

批量更新是异步更新的具体表现，指同一上下文中的多次 setState 会被合并为一次状态计算。其实现依赖 React 的 批处理（Batched Updates）机制。

1. 批量更新触发的条件​

  • React 事件处理函数：如 onClick、onSubmit 等合成事件
  • 生命周期函数：如 componentDidMount、componentDidUpdate
  • React Hook 的 useState/useReducer：在事件处理函数中同样遵循批量更新规则
提示

在 React 17 之前，批量更新发生在事件处理函数执行完毕后；在 React 18+ 中，通过 Fiber 的调度机制，更新可能在“空闲时间”或“当前帧结束前”批量执行

2. React 事件系统中的批量更新（ React 17 及之前）​

在 React 封装的合成事件（如 onClick、onChange）回调中， React 会通过 事务（Transaction） 机制包裹事件处理函数：

  • 事件触发时，启动一个批处理事务（batchedUpdates）
  • 事务执行期间，所有的 setState 调用会被收集到更新列队，不立即触发渲染
  • 事件回调执行完毕后，事务提交，统一处理所有更新并渲染
React 17 合并事件中批量更新
class Counter extends React.Component {
  state = { count: 0 };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 }); // 不立即生效
    this.setState({ count: this.state.count + 1 }); // 合并更新
    console.log(this.state.count); // 输出 0（旧值）
  };

  render() {
    return <button onClick={this.handleClick}>+ 1</button>;
  }
}

// 最终 count 值变成 2 ，但是控制台输出的值为 0

3. 非 React 上下文的更新（ React 17 及以前）​

在原生事件（如 addEventListener 绑定事件）或异步回调（如 setTimeout、Promise）中， React 不会自动批量更新：

非 React 上下文的更新
// React 17 中，setTimeout 内的 setState 不批量更新
handleClick = () => {
  setTimeout(() => {
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
    console.log(this.state.count); // 输出 1 （可能分两次更新）
  }, 4);
};

4. React 18 的自动批处理​

React 18 引入了自动批处理（Automatic Batching），无论何种上下文（ React 事件、原生事件、setTimeout、Promise 等），默认都会批量处理：

  • 基于新的调度器（Scheduler）， React 18 会将所有的更新包裹在一个批处理中，直到所有的同步代码执行完毕
  • 即使在 setTimeout 中，多次 setState 也会合并成一次渲染
React 18 中
handleClick = () => {
  setTImeout(() => {
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
    console.log(this.state.count); // 输出值为 0
  }, 4);
};

//  最终值为 2，且只渲染一次

四、如何获取最新状态​

由于 setState 是异步的，直接读取 this.state 可能得到旧值。若基于最新状态更新，永使用函数式 setState：

this.setState((prevState, prevProps) => {
  count: prevState.count + 1; // 使用 prevState 而非 this.state
});

五、强制同步更新​

极少数情况下需要强制同步获取更新后的状态（如 DOM 操作依赖新状态）

  • ReactDom.flushSync()： React 18+ 强制立即刷新更新列队
  • this.foreUpdate 不推荐： 强制触发重新渲染，但不保证状态已同步