React中的setState是异步的吗？
在React中更新状态，一般的写法都是this.setState({a:1})，而非Vue那样this.a = 1。并且，如果在如下场景：
state = {
count: 0,
};
componentDidMount() {
this.setState({
count: this.state.count + 1,
});
console.log("console: " + this.state.count);
}
render(){
console.log("render: " + this.state.count);
}
打印结果为
console:0
render:1
所以，从表现上看，setState是异步的。
其实，这只是React的障眼法。
setState是同步执行的！但是state并不一定会同步更新（异步更新和同步更新都存在）
1. 对比Vue
Vue的数据更新是基于event-loop 机制（是更新，不是数据双向绑定）。
image.png
Vue在侦听到数据变化后，会开启一个队列，并缓冲在同一事件循环中发生的所有数据变更（如果同一个 watcher 被多次触发，只会被推入到队列中一次）。然后，在下一个事件循环Tick/微任务中，Vue 刷新队列执行实际工作。（事件循环参考《宏任务和微任务到底是什么？》）
2. React.setState()中的异步更新
setState()中有个特别重要的布尔属性isBatchingUpdates（默认为false,），它决定了state是同步更新还是异步更新。
调用栈如下（涉及到React事务机制，可以参考文章《React进阶篇（四）事务》）：
setState调用.png
setState 只在合成事件和钩子函数中是“异步更新”的。
异步更新的背后，是同步代码处理（"合成事件和钩子函数"的调用在"更新"之前）。
异步是为了实现批量更新的手段，也是React性能优化的一种方式。
2. React.setState()中的同步更新
当然，也是有办法同步获取state更新后的值：
setTimeout等异步操作中调用setState函数
DOM原生事件
利用setState回调函数
函数式setState用法
前两个都比较好理解，因为没有前置的batchedUpdate调用，所以isBatchingUpdates为false。不会开启批量更新模式，那么，在上面的调用栈图示里面，会直接走到事务更新。
后面两个方法，是React本身提供的。要注意的是，setState回调函数要在render函数被重新执行后才执行。
下面有一道题目，试试做吧！
import React from "react";
class TestView extends React.Component {
state = {
count: 0,
};
componentDidMount() {
this.setState({
count: this.state.count + 1,
});
console.log("console: " + this.state.count);
this.setState({ count: this.state.count + 1 }, () => {
console.log("console from callback: " + this.state.count);
});
this.setState(
(prevState) => {
console.log("console from func: " + prevState.count);
return {
count: prevState.count + 1,
};
},
() => {
console.log("last console: " + this.state.count);
}
);
}
render() {
console.log("render" + this.state.count);
return
发表评论 (审核通过后显示评论)：