React 状态更新

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 updateQueue
• workInProgress fiber保存的updateQueue即workInProgress updateQueue

在commit阶段完成页面渲染后，workInProgress Fiber树变为current Fiber树，workInProgress Fiber树内Fiber节点的updateQueue就变成current updateQueue。

updateQueue