面试官：react中的setState()是同步还是异步？如何证明？

最新推荐文章于 2025-07-05 22:36:49 发布

原创最新推荐文章于 2025-07-05 22:36:49 发布 · 1.1k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

2024年程序员学习专栏收录该内容

237 篇文章

订阅专栏

本文解释了React中的setState方法为何在函数内部是有序的，并讨论了异步与同步执行的情况。作者介绍了如何在异步情况下利用函数或回调依赖上一次state更新。同时，还提到了前端开发的学习资源和面试准备策略。

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

页面显示与打印结果对比上面只执行一次的代码，结果相同，why?

为什么会是异步？机制决定，react会识别setState，把自己能够“控制”的setState集中操作（批量操作），在一个事件函数中，不管setState()被调用多少次，他们会在函数执行结束以后，统一被归结为一次染重新渲，这样做可以优化性能，不至于每次setState()一次就渲染一次。所以在函数内的setState()是有序的，如果要更改同一个state，像上面的3次更改同一个state，最后被调用的总会覆盖之前的，相当于只改变1次，导致最后页面渲染的值是1而不是3。由于这个批量操作机制，也使得setState表现为异步的。（优化性能，减少资源损耗）

什么情况下表现了异步？

react中的合成事件或者钩子函数里面，如像上面的addNumber()、constructor()，也可以浅显理解成在react里面的事件函数，是因为这种常规情景下react “知道”什么时候退出该事件，什么时候进行更新，也就是上面所说的“控制”。

那么既然是异步，且批量操作，那么怎样修改同个state还能让其都生效呢（即下一次的修改依据上一次的结果，而不是被覆盖）？

有一种方式可以实现，即在setState()传入一个函数，将state（可以理解成上一次的state）作为参数，根据上一次state改变当前state：

addNumber(){ //数量+1

this.setState((state)=>({number:state.number + 1})) //传入一个函数，state作为参数

this.setState((state)=>({number:state.number + 1}))

console.log(this.state.number,‘add 3----’)

}

此时页面显示为3。观察发现打印结果仍为0，我们想让打印结果同步，该如何做？

有一种实现方式，就是在setState()传入一个回调函数，当setState()执行结束之后执行该回调函数（此时你可以执行自己想要依赖最后更新的state去做的其他一些操作），这里执行打印：

addNumber(){ //数量+1

this.setState((state)=>({number:state.number + 1}))

this.setState((state)=>({number:state.number + 1}),()=>{

console.log(this.state.number,‘add 3----’)

})

}

此时state打印出来就是最后更新的state。

那么setState()总是异步的吗？答案是no！

看下面的例子：

将原来的证明过的异步批量操作

addNumber(){ //数量连续+1

this.setState({number:this.state.number + 1})

console.log(this.state.number,‘add 3----’)

}

改成如下

addNumber(){ //数量+1

setTimeout(()=>{

this.setState({number:this.state.number + 1})

console.log(this.state.number,‘add 3 setTimeout----’)

},100)

}

二者的区别是，第二个用一个setTimeout()包裹，打印结果：

此时页面显示跟控制台输出的结果都是3。

说明两件事：

第一，setState()里面改变同一个state时候后一次并没有把前一次覆盖掉，相反是根据前一个进行更新，即批量操作不存在；
第二，输出结果直接是最后一次更新的state，不需要像上面一样放入一个回调函数里面。
通俗地说就是执行表现再不是异步，而变成了同步。这时候也可以说setState()的执行不受react“控制”了。除了setTimeout，还有ajax、原生dom事件addEventListener等都表现为同步。
总结：主要分析react setState()的异步、同步情况，以及在异步时如何根据上一个state更新当前的state（传入一个函数）、依赖最新的state去执行其他操作（执行回调函数）。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。