setState 到底是同步的,还是异步的

37 阅读1分钟

看了很多文章,再结合了自己的了解,我简化的说一下。
这里先说答案:setState本身是异步的,但在特殊环境(setTimeout、setInterval 等 DOM 原生事件)他是同步的。

先看一下代码:

image.png

这是一个很明显的校验出setState是异步的情况。
假设你想同步获取值,setState还提提供一回调函数。

image.png

加一个setTimout也可以同步。

image.png 看了上面的代码例子,我们大概明白了setState的异步和同步的场景,那么接下来会有几个问题。

1.react为什么要把setState做成异步方式? 把setState异步化主要是为了减少频繁setState带来的性能损耗,一次真正的setState会render一次页面,如果频繁render这个性能损耗是巨大的。所以react把setState设为了异步。 2.为什么加上setTimeout就会变成同步?
其实并不是setState变成了同步,而是setState逃脱了react对setState的异步管控机制。