React的setState原理

2019-06-11 本文已影响0人中石化局长

在 合成事件 和 生命周期钩子(除 componentDidUpdate) 中，setState是"异步"的；

原因: 因为在setState的实现中，有一个判断: 当更新策略正在事务流的执行中时，该组件更新会被推入dirtyComponents队列中等待执行；否则，开始执行batchedUpdates队列更新；

在生命周期钩子调用中，更新策略都处于更新之前，组件仍处于事务流中，而componentDidUpdate是在更新之后，此时组件已经不在事务流中了，因此则会同步执行；

在合成事件中，React 是基于事务流完成的事件委托机制实现，也是处于事务流中；

问题: 无法在setState后马上从this.state上获取更新后的值。

解决: 如果需要马上同步去获取新值，setState其实是可以传入第二个参数的。setState(updater, callback)，在回调中即可获取最新值；

在 原生事件 和 setTimeout 中，setState是同步的，可以马上获取更新后的值；

原因: 原生事件是浏览器本身的实现，与事务流无关，自然是同步；而setTimeout是放置于定时器线程中延后执行，此时事务流已结束，因此也是同步；