React的setState原理

//www.greatytc.com/p/1e7e956ec1ee


https://segmentfault.com/a/1190000017831695


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

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

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

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

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

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容