09.React源码学习-update

update

什么是update

• 用于记录组件状态的改变
• 存放于updateQueue中
• 多个update可以同时存在

如何创建update

源码在 react-reconciler 下的 ReactUpdateQueue.js 内：

创建update:

export function createUpdate(expirationTime: ExpirationTime): Update<*> {
  return {
      // 更新的过期时间
    expirationTime: expirationTime,
      // export const UpdateState = 0;
      // export const ReplaceState = 1;
      // export const ForceUpdate = 2;
      // export const CaptureUpdate = 3;
      // 指定更新的类型，值为以上几种
    tag: UpdateState,
      // 更新内容，比如`setState`接收的第一个参数
    payload: null,
      // 对应的回调，`setState`，`render`都有
    callback: null,
      // 指向下一个更新
    next: null,
      // 指向下一个`side effect`
    nextEffect: null,
  };
}

创建updateQueue:

export function createUpdateQueue<State>(baseState: State): UpdateQueue<State> {
  const queue: UpdateQueue<State> = {
      // 每次操作完更新之后的`state`
    baseState,
      // 队列中的第一个和最后一个`Update`
    firstUpdate: null,
    lastUpdate: null,
      // 第一个和最后一个捕获类型的`Update`
    firstCapturedUpdate: null,
    lastCapturedUpdate: null,
      // 第一个和最后一个`side effect`
    firstEffect: null,
    lastEffect: null,
      // 第一个和最后一个捕获产生的`side effect`
    firstCapturedEffect: null,
    lastCapturedEffect: null,
  };
  return queue;
}