react17+18 中 setState是同步还是异步更新

原创

已于 2024-04-09 19:28:32 修改 · 2.8k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#react #setState #异步

于 2024-04-09 16:59:47 首次发布

本文详细比较了React17和18中类组件与函数式组件中setState的同步/异步行为，特别关注了自动批处理的引入对性能优化的影响。通过实例展示了setState在不同情况下的工作原理和渲染次数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在类组件中使用setState，在函数式组件中使用hooks的useState。

1. 类组件

1.1 react 17版本

参考内容：第十一篇：setState 到底是同步的，还是异步的？
彻底搞懂setState到底是同步还是异步（一）

1、在react可调度范围内的setState是异步的，并且多次setState会合并只执行最后一次，进行批量更新。

react合成事件
生命周期
事件处理，如onClick、onChange等。

2、在react可调度范围外的setState是同步的。

宏任务 setTimeout、setInterval
微任务 .then
原生 js 绑定事件 document.addEventListener()

3、setState 并非真正的异步，而是通过设置全局变量 isBatchingUpdates 来判断 setState是先存进队列还是直接更新，如果值为true，则执行异步操作，如果为false，则直接更新。

isBatchingUpdates 会在 React 可以控制的地方，则为true，比如React生命周期和合成事件中，而在外部 react 无法控制的地方，比如原生事件，具体就是在 addEventListener、setTimeout、setInterval 、.then等事件中，就只能同步。

4、一般认为，做异步设计是为了性能优化，减少渲染次数。React团队的观点是：

保持内部一致性。如果将 state 改为同步更新，那尽管 state 的更新是同步的，但是 props不是。
启用并发更新，完成异步渲染。

5、案例

import React from "react";
export default class App extends React.Component{
   
   

  state = {
   
   
    count: 0
  }

  increment = () => {
   
   
    console.log('increment setState前的count', this.state.count)  //0
    this.setState({
   
   
      count: this.state.count + 1
    }); //异步
    console.log('increment setState后的count', this.state.count)   //0
  }  //最终count变为1

  triple = () => {
   
   
    console.log('triple setState前的count', this.state.count)   //1
    this.setState({
   
   
      count: this.state.count + 1
    });
    this.setState({
   
   
      count: this.state.count + 1
    }