React 状态更新
流程概览
类比分支管理的心智模型
在React中，通过ReactDOM.createBlockingRoot和ReactDOM.createRoot创建的应用会采用并发的方式更新状态。
高优更新（红色节点）中断正在进行中的低优更新（蓝色节点），先完成render - commit流程。
待高优更新完成后，低优更新基于高优更新的结果重新更新。
Update 对象
Update与Fiber的联系
Fiber节点组成Fiber树，页面中最多同时存在两棵Fiber树：
- 代表当前页面状态的
current Fiber树 - 代表正在
render阶段的workInProgress Fiber树
类似Fiber节点组成Fiber树，Fiber节点上的多个Update会组成链表并被包含在fiber.updateQueue中。
什么情况下一个Fiber节点会存在多个Update？
方法内部多次调用this.setState
Fiber节点最多同时存在两个updateQueue：
current fiber保存的updateQueue即current updateQueueworkInProgress fiber保存的updateQueue即workInProgress updateQueue
在commit阶段完成页面渲染后，workInProgress Fiber树变为current Fiber树，workInProgress Fiber树内Fiber节点的updateQueue就变成current updateQueue。
updateQueue
维护与整理 · Yihui在 GitHub 上编辑
微信公众号
在微信里，继续阅读。
关注「泯泷ML」，一起交流技术与思考。
用微信扫一扫；手机上可长按识别，或保存二维码后从微信相册扫码。
一起聊聊
前往 GitHub 交流使用 GitHub 登录后即可留言，中英文界面共享同一篇文章的讨论。