深入理解React中的setState同步与异步机制-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00197/article/details/148443152

深入理解React中的setState同步与异步机制

react-illustration-series 图解react源码, 用大量配图的方式, 致力于将react原理表述清楚. 项目地址: https://gitcode.com/gh_mirrors/re/react-illustration-series

引言

在React开发中，setState是最常用的API之一，但它的执行机制却常常让开发者感到困惑。本文将从React内部实现的角度，深入剖析setState的同步与异步行为，帮助开发者更好地理解和使用这个核心API。

setState的基本行为

setState是React组件中用于更新状态的主要方法。它的行为可以总结为：

异步表现：在大多数情况下，setState表现为异步更新
同步表现：在某些特定场景下，setState会表现为同步更新

这种看似矛盾的行为实际上是由React内部的调度机制决定的。

核心原理分析

React内部通过executionContext（执行上下文）和expirationTime（过期时间）两个关键因素来控制更新的同步与异步行为。

同步更新的触发条件

同步更新需要同时满足以下两个条件：

Legacy模式：必须是React的Legacy模式（传统模式）
空执行上下文：executionContext === NoContext

当这两个条件都满足时，React会调用flushSyncCallbackQueue()方法，立即执行状态更新和重新渲染。

异步更新的场景

以下情况会导致setState表现为异步更新：

合成事件处理：React的合成事件回调中，执行上下文会被标记为DiscreteEventContext
Concurrent模式：在Concurrent模式下，所有更新都是异步的

实际场景验证

让我们通过几个典型场景来验证这些行为：

场景1：合成事件中的setState

handleClick = () => {
  this.setState({count: this.state.count + 1});
  console.log(this.state.count); // 输出旧值
}

在这个场景中，setState表现为异步，因为React在合成事件回调中设置了执行上下文。

场景2：setTimeout中的setState

handleClick = () => {
  setTimeout(() => {
    this.setState({count: this.state.count + 1});
    console.log(this.state.count); // 输出新值
  }, 0);
}

这里setState表现为同步，因为setTimeout回调执行时，React的执行上下文已经为空。

场景3：原生DOM事件中的setState

componentDidMount() {
  document.getElementById('btn').addEventListener('click', () => {
    this.setState({count: this.state.count + 1});
    console.log(this.state.count); // 输出新值
  });
}

与合成事件不同，原生DOM事件中的setState也是同步的。

Concurrent模式的影响

在Concurrent模式下，React引入了更细粒度的调度机制，所有状态更新默认都是异步的，这是为了实现时间切片(time slicing)和更平滑的用户体验。

最佳实践建议

不要依赖状态更新的同步性：始终假设setState是异步的
使用回调函数处理依赖状态：当新状态依赖旧状态时，使用函数形式
```
this.setState(prevState => ({count: prevState.count + 1}));
```
在需要同步获取更新后状态时：使用componentDidUpdate或useEffect