setState 是同步还是异步

  • setState默认是异步
  • setState什么时候是同步
  • React中setState后发生了什么


setState本身并不是异步，只是因为react的性能优化机制体现为异步。在react的生命周期函数或者作用域下为异步，在原生的环境下为同步

setState默认是异步

React18版本之后 setState默认是异步，假如所有setState是同步的，意味着每执行一次setState时(有可能一个同步代码中，多次setState)，都重新vnodediff + dom修改，这对性能来说是极为不好的。如果是异步，则可以把一个同步代码中的多个setState合并成一次组件更新。

如果希望代码可以同步拿到，则需要执行特殊的flushSync操作

mport { flushSync } from "react-dom";
changeText() {
	flushSync(() => {
  		this.setState({
		message: "Hello React",
  		});
	});
	console.log(this.state.message); // Hello React
  }

setState什么时候是同步

在setTimeout、promise，axios或者setState在原生事件中是同步的，即通过dom绑定事件的方式实现。

  • 究竟是同步更新还是异步更新，取决于代码的执行环境。React定义了一个内部变量executionContext(默认为NoContext)，在进行合成事件和生命周期处理的时候，会首先给该变量赋值为DiscreteEventContext(合成事件)或executionContext &= ~BatchedContext; executionContext |= LegacyUnbatchedContext;(componentDidMount)。来标记其现在所处的执行环境。
  • 而在setTimeout以及原生事件中，是脱离了这些执行环境的，executionContext就是默认值NoContext;
  • 在scheduleWork处理逻辑的时候，如果执行环境不为NoContext，则仅仅是将更新放在一个队列里面，不进行实际的应用(即调用flushSyncCallbackQueue)。

React中setState后发生了什么

  • 在代码中调用setState函数之后，React会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程(Reconciliation) 。
  • 经过调和过程，React 会以相对高效的方式根据新的状态构建React元素树并且着手重新渲染整个UI界面。
  • 在React得到元素树之后，React会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染。在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。