解决React中setState异步问题

setState 只在合成事件和钩子函数中是异步的,在原生事件和 setTimeout 中都是同步的。

  • 合成事件:例如onClick等

  • 原生事件:比如通过addeventListener添加的,dom中的原生事件

先举个栗子

解决React中setState异步问题

以上代码会输出啥嘞?

解决React中setState异步问题

原因:React会将多个setState的调用合并成一个来执行,这意味着当调用setState时,state并不会立即更新。

组件渲染的结果是1,并且在控制台中输出了10次0,说明每个循环中,拿到的state仍然是更新之前的。这是React的优化手段,但是显然它也会在导致一些不符合直觉的问题(就如上面这个例子)

解决:所以针对这种情况,React给出了一种解决方案:setState接收的参数还可以是一个函数,在这个函数中可以拿先前的状态,并通过这个函数的返回值得到下一个状态。

解决React中setState异步问题

解决React中setState异步问题

ok解决!

 

上一篇:React State & 生命周期


下一篇:关于react setState() 要注意的几个点