React setState是同步还是异步的
- 输出结果为: 0,0,2,3
react内部为了优化setState()的批处理,会对setState()进行合并,并且对相同属性的设置只保留最后一次
的设置,类似于函数Object.assign()。
在 React 的 setState 函数实现中,会根据一个变量 isBatchingUpdates
判断是直接更新 this.state 还是放到一个updateQueue
中延时更新,而 isBatchingUpdates
默认是 false
,表示 setState 会同步更新 this.state;但是,有一个函数 batchedUpdates
,该函数会把 isBatchingUpdates 修改为 true
,而当 React 在调用事件处理函数
之前就会先调用这个 batchedUpdates
将isBatchingUpdates
修改为true
,这样由 React 控制的事件处理过程 setState 不会同步更新 this.state,而是异步的。
结合上面分析的,钩子函数中的 setState 无法立马拿到更新后的值,所以前两次都是输出0,当执行到 setTimeout 里的时候,前面两个state的值已经被更新,由于 setState 批量更新的策略, this.sta