react 中的update

我们先来了解Update的结构。

首先，我们将可以触发更新的方法所隶属的组件分类：

• ReactDOM.render —— HostRoot

• this.setState —— ClassComponent

• this.forceUpdate —— ClassComponent

• useState —— FunctionComponent

• useReducer —— FunctionComponent

可以看到，一共三种组件（HostRoot | ClassComponent | FunctionComponent）可以触发更新。

由于不同类型组件工作方式不同，所以存在两种不同结构的Update，其中ClassComponent与HostRoot共用一套Update结构，FunctionComponent单独使用一种Update结构。

 

 

字段意义如下：

• eventTime：任务时间，通过performance.now()获取的毫秒数。由于该字段在未来会重构，当前我们不需要理解他。

• lane：优先级相关字段。当前还不需要掌握他，只需要知道不同Update优先级可能是不同的。

你可以将lane类比心智模型中需求的紧急程度。

• suspenseConfig：Suspense相关，暂不关注。

• tag：更新的类型，包括UpdateState | ReplaceState | ForceUpdate | CaptureUpdate。

• payload：更新挂载的数据，不同类型组件挂载的数据不同。对于ClassComponent，payload为this.setState的第一个传参。对于HostRoot，payload为ReactDOM.render的第一个传参。

• callback：更新的回调函数。即在commit 阶段的 layout 子阶段一节中提到的回调函数。

• next：与其他Update连接形成链表。