第 5 卷

第 5 / 28 卷日期：2025-12-31

可以获取到更新后的 this.state（因为此时状态和 DOM 都已完成更新）。

十、setState 调用是同步还是异步的？

setState 的调用「既不是绝对同步，也不是绝对异步」，而是「默认异步，特定场景下同步」，核心取决于调用 setState 时的「执行环境」，即是否处于 React 自身的批量更新上下文控制中。

当 setState 调用处于 React 控制的执行环境中时，表现为异步更新，此时无法在 setState 调用后立即获取到新状态。

• 常见场景：

shouldComponentUpdate 等，注意 componentWillMount 已废弃）。

示例：

Code block

1	class Example extends React.Component {
2	state = { count: 0 };
3	handleClick = () => {
4	this.setState({ count: this.state.count + 1 });
5	console.log(this.state.count);//输出0（异步更新，此时状态未更新）
6	};
7	render() {
8	return <button onClick={this.handleClick}>点击</button>;
9	}
10	}

原因：React 在此类场景下会开启批量更新，将多个 setState 调用合并为一次更新，减少 DOM 操

调用后立即获取到新状态。

示例：

Code block

1	class Example extends React.Component {
2	state = { count: 0 };
3	componentDidMount() {
4	//原生DOM事件
5	document.getElementById('btn').addEventListener('click', () => {
6	this.setState({ count: this.state.count + 1 });
7	console.log(this.state.count);//输出1（同步更新，立即获取新状态）
8	});
9	// setTimeout回调
10	setTimeout(() => {
11	this.setState({ count: this.state.count + 1 });
12	console.log(this.state.count);//输出2（同步更新）
13	}, 0);
14	}
15	render() {
16	return <button id="btn">点击</button>;
17	}
18	}

原因：此类场景下，代码执行脱离了 React 的批量更新上下文，React 无法将更新加入批量队列，因此会立即触发状态更新流程， setState 调用后状态和 DOM 会同步更新。

React18 之前，只有 React 控制的场景（合成事件、生命周期）支持批量更新；React18 后通过「自动批处理」特性，将批量更新的范围扩展到了原生事件、setTimeout、Promise 等所有场景，即大部

分原本同步的场景现在也支持异步批量更新，进一步优化性能。

3	class Example extends React.Component {
4	state = { count: 0 };
5	handleClick = () => {
6	ReactDOM.flushSync(() => {
7	this.setState({ count: this.state.count + 1 });
8	});
9	console.log(this.state.count);//输出1（强制同步更新）
10	};
11	render() {
12	return <button onClick={this.handleClick}>点击</button>;
13	}
14	}

setState 的同步/异步取决于执行环境：

（自动批处理），可通过 flushSync 强制同步。

后的状态，优先使用 setState 的回调函数（第二个参数）或 componentDidUpdate 生命周期方法。

setState 的批量更新是 React 优化性能的核心机制之一，其核心思想是「延迟执行状态更新，合并多个更新请求，最终一次性触发渲染」，具体实现依赖于 React 内部的「批量更新上下文」和「更新队

列」管理，不同 React 版本（尤其是 React18）的实现范围有差异，具体过程如下：

React 内部通过一个全局标识（如 isBatchingUpdates）来标记当前是否处于「批量更新上下文」中。该标识由 React 控制，在特定场景下自动切换状态：

设为 true。

全站分卷索引 · 28 卷