分情况

同步更新模式（legacy） #

没有优先级概念，同步按顺序更新

异步更新模式（并发更新） #

低优先级更新过程中，会被高优先级中断，优先更新高优先级，完成之后 重新开始 低优先级的更新

Update 对象分类 #

可以 触发更新 的方法

• ReactDOM.render —— HostRoot
• this.setState —— ClassComponent
• this.forceUpdate —— ClassComponent
• useState —— FunctionComponent
• useReducer —— FunctionComponent

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

Update结构 #

ClassComponent与HostRoot（即rootFiber.tag对应类型）共用同一种Update结构

const update = {
  eventTime, // 任务时间
	lane, // 优先级相关字段
  suspenseConfig,
  tag: UpdateState, // 更新类型
  payload: null, // 更新挂载的数据
  callback: null, // 更新回调函数
  next: null, // 与其他update形成链表
}

在 class 组件中，可能会在某个操作中 调用多次setState，生成多个 update对象

Fiber节点最多同时存在两个updateQueue：

• current fiber保存的updateQueue即current updateQueue
• workInProgress fiber保存的updateQueue即workInProgress updateQueue

updateQueue #

updateQueue有三种类型，其中 HostComponent 的在 CompleteWork 说过 剩下的和两个不同结构的 Update 对应

ClassComponent

const queue: UpdateQueue<State> = {
    baseState: fiber.memoizedState, // 本次更新之前的state
    firstBaseUpdate: null, // 本次更新之前，节点就保存有的update链表头
    lastBaseUpdate: null,
    shared: {
      pending: null, // 触发更新，产生的update环状链表
    },
    effects: null, // 有回调的update
  };

处理逻辑在 processUpdateQueue 函数，处理 firstBaseUpdate 和 lastBaseUpdate 和 shared.pending，对比 update 的优先级，选择高优先级更新