setState 只在合成事件和钩子函数中是异步的,在原生事件和 setTimeout 中都是同步的。
-
合成事件:例如onClick等
-
原生事件:比如通过addeventListener添加的,dom中的原生事件
先举个栗子
以上代码会输出啥嘞?
原因:React会将多个setState的调用合并成一个来执行,这意味着当调用setState时,state并不会立即更新。
组件渲染的结果是1,并且在控制台中输出了10次0,说明每个循环中,拿到的state仍然是更新之前的。这是React的优化手段,但是显然它也会在导致一些不符合直觉的问题(就如上面这个例子)
解决:所以针对这种情况,React给出了一种解决方案:setState接收的参数还可以是一个函数,在这个函数中可以拿先前的状态,并通过这个函数的返回值得到下一个状态。
ok解决!