Published on

跟节点

Authors
  • avatar
    Name
    李丹秋
    Twitter
function FiberRootNode(
  containerInfo,
  tag,
  hydrate,
  identifierPrefix,
  onRecoverableError,
) {
  this.tag = tag;
  this.containerInfo = containerInfo; // root节点对应的dom节点
  this.pendingChildren = null; // root节点的子节点
  this.current = null; // root节点对应的fiber
  this.pingCache = null;  // 用于缓存fiber
  this.finishedWork = null; // 已经完成的work
  this.timeoutHandle = noTimeout; // 超时处理
  this.context = null; // 上下文
  this.pendingContext = null; // 待处理的上下文
  this.callbackNode = null; // 回调节点
  this.callbackPriority = NoLane; // 回调优先级
  this.eventTimes = createLaneMap(NoLanes); // 事件时间
  this.expirationTimes = createLaneMap(NoTimestamp);

  this.pendingLanes = NoLanes;
  this.suspendedLanes = NoLanes;
  this.pingedLanes = NoLanes;
  this.expiredLanes = NoLanes;
  this.mutableReadLanes = NoLanes;
  this.finishedLanes = NoLanes;

  this.entangledLanes = NoLanes;
  this.entanglements = createLaneMap(NoLanes);

  this.hiddenUpdates = createLaneMap(null);

  this.identifierPrefix = identifierPrefix;
  this.onRecoverableError = onRecoverableError;

  this.incompleteTransitions = new Map();
}
// tag 代表fiber的类型
// pendingProps 代表fiber的props
// key 代表fiber的key
// mode 代表fiber的模式
const createFiber = function(
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
): Fiber {
  // $FlowFixMe: the shapes are exact here but Flow doesn't like constructors
  return new FiberNode(tag, pendingProps, key, mode);
};
// 初始化memoizedState
 const initialState: RootState = {
      element: initialChildren,
      isDehydrated: hydrate,
      cache: (null: any), // not enabled yet
    };
    uninitializedFiber.memoizedState = initialState;

  initializeUpdateQueue(uninitializedFiber);
  // 初始化updateQueue
  export function initializeUpdateQueue<State>(fiber: Fiber): void {
  const queue: UpdateQueue<State> = {
    baseState: fiber.memoizedState,
    firstBaseUpdate: null,
    lastBaseUpdate: null,
    shared: {
      pending: null,
      lanes: NoLanes,
      hiddenCallbacks: null,
    },
    callbacks: null,
  };
  fiber.updateQueue = queue;
}
// 创建更新对象
export function createUpdate(eventTime: number, lane: Lane): Update<*> {
  const update: Update<*> = {
    eventTime,
    lane,

    tag: UpdateState,
    payload: null, // 存放需要更新的ReactElement
    callback: null,

    next: null,
  };
  return update;
}
// 创建更新队列, 将fiber的updateQueue和update关联起来
 const root = enqueueUpdate(current, update, lane);