[Note] fiber的updateQueue的基本结构

[ddzy]

前言

react每产生一次更新, 都会:

• 计算expirationTime
• 创建update
• 初始化update参数
• 将update追加到updateQueue

那么, 问题来了, 这个updateQueue是一种什么结构?

带着问题, 来到源码看一下

分析

enqueueUpdate

react在执行将update追加到updateQueue操作的时候, 会判断当前fiber节点上是否已经具有updateQueue, 如果没有, 会调用createUpdateQueue创建一个新的队列.

export function enqueueUpdate<State>(fiber: Fiber, update: Update<State>) {
  const alternate = fiber.alternate;
  let queue1;
  let queue2;

  if (alternate === null) {
    // There's only one fiber.
    queue1 = fiber.updateQueue;
    queue2 = null;
    if (queue1 === null) {
      // updateQueue不存在, 创建新的
      queue1 = fiber.updateQueue = createUpdateQueue(fiber.memoizedState);
    }
  }
}

createUpdateQueue

上面已经说过了, createUpdateQueue会创建一个新的单向链表状的更新队列

export function createUpdateQueue<State>(
  // 初始的state
  baseState: State
): UpdateQueue<State> {
  const queue: UpdateQueue<State> = {
    baseState,
    firstUpdate: null,
    lastUpdate: null,
    firstCapturedUpdate: null,
    lastCapturedUpdate: null,
    firstEffect: null,
    lastEffect: null,
    firstCapturedEffect: null,
    lastCapturedEffect: null,
  };

  return queue;
}

updateQueue

最后来看一下updateQueue的结构定义:

export type UpdateQueue<State> = {
  // 初始的state
  baseState: State,

  // 链表中的第一/最后一个update
  firstUpdate: Update<State> | null,
  lastUpdate: Update<State> | null,

  // 链表中的第一/最后一个更新出现错误的update
  firstCapturedUpdate: Update<State> | null,
  lastCapturedUpdate: Update<State> | null,

  // 链表中的第一/最后一个副作用(DOM diff的结果)
  firstEffect: Update<State> | null,
  lastEffect: Update<State> | null,

  firstCapturedEffect: Update<State> | null,
  lastCapturedEffect: Update<State> | null,
};