- Published on
跟节点
- Authors

- Name
- 李丹秋
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);