React 中更新队列 updateQueue的实现示例

fiber.updateQueue = {
  baseState, // 初始 state，update 基于该 state 计算新的 state
  firstBaseUpdate, // 更新前该 FiberNode 中已保存的 update 链表，表头为 firstBaseUpdate
  lastBaseUpdate, // 链表尾部为 lastBaseUpdate
  // 触发更新后，产生的 update 会保存在 shared.pending 中形成单向环状链表
  // 计算 state 时，该环状链表会被拆分并拼接在 lastBaseUpdate 后面。
  shared: {
    pending
  }
}

hook.queue = {
  pending: Update | null, // 环形链表
  dispatch: Function
}

type Update = {
  lane: Lane;        // 优先级
  action: any;       // setState 传入的值/函数
  next: Update | null;
}

pending
   ↓
update1 → update2 → update3
   ↑                 ↓
   ← ← ← ← ← ← ← ← ←

setCount(c => c + 1)

function dispatchSetState(fiber, queue, action) {
  const update = {
    lane: requestUpdateLane(), // 分配优先级
    action,
    next: null
  };

  enqueueUpdate(queue, update);

  scheduleUpdateOnFiber(fiber);
}

function enqueueUpdate(queue, update) {
  const pending = queue.pending;

  if (pending === null) {
    update.next = update;
  } else {
    update.next = pending.next;
    pending.next = update;
  }

  queue.pending = update;
}

processUpdateQueue()

let newState = baseState;

let update = firstUpdate;

do {
  if (lane 满足当前优先级) {
    newState = reducer(newState, update.action);
  } else {
    // 跳过（并发关键）
    // 执行在下一次 render 开始的时候，和下一 render 的 updates 组成新的链表
  }

  update = update.next;
} while (update !== null);

function reducer(state, action) {
  return typeof action === 'function'
    ? action(state)
    : action;
}

hook.memoizedState // 当前 state

hook.baseState     // 上一次稳定 state

hook.baseQueue     // 未处理的 update

setCount(1)        // 高优先级
startTransition(() => {
  setCount(2)      // 低优先级
})

if ((update.lane & renderLanes) !== 0) {
  // 执行
} else {
  // 跳过
}

setCount(1)
setCount(2)

setCount(count + 1)
setCount(count + 1)

setCount(c => c + 1)
setCount(c => c + 1)

updateQueue → render 阶段
effectQueue → commit 阶段