当前位置：首页 > article >正文

【React】setState 批量更新

article 2024/10/8 5:49:00

setState 批量更新的过程

React 的 setState 调用是异步的。为了性能原因，React 会将多个 setState 调用合并成一次批量更新。具体过程如下： 1）React 先将调用的每个 setState 所产生的更新对象存储在一个队列中。 2）在所有的同步代码执行完之后，React 调度机制会统一处理这些队列中的更新，进行批量处理。 3）React 根据更新对象对组件进行合并更新，只在最后一次调用时实际渲染更新后的 DOM。

需要注意：

setState 之所以设计成异步更新是为了保证性能，避免每次 setState 都引起组件的重新渲染。异步 setState ，合并多个状态更新统一处理，减少渲染次数，提高性能。
react 使用事务机制实现批量更新，React 的批处理既包括状态更新（state），也包括生成并应用这些更新的 DOM 操作。

setState 的第二个参数是一个回调函数，会在 setState 更新并重新渲染组件后被调用

this.setState({ counter: this.state.counter + 1 }, () => {
    console.log("State updated:", this.state.counter);
});

强制同步更新，类组件可以通过 forceUpdate 强制同步更新，函数式组件使用 useSyncExternalStore 强制同步更新。
1. 强制同步更新场景：如果组件的 render 方法是直接读取外部数据源时（而不是 render 中读取了 this.props, this.state 等，因为这样当你在组件或其任一父组件内调用 setState 时，它就将自动重新渲染），则必须告诉 React 在该数据源更改时更新用户界面。
react18 之前，合成事件和生命周期方法中 setState 是批量更新的；原生事件或者 setTimeout 中，setState 是同步的。react18之后，默认情况下都是批量更新。