初始化
- createRoot
- 以代码逻辑进行分析,后续以.render的形式调用进行渲染,那么必然是一个实例
- 可想而知它的运行内容就是初始化一个渲染实例,并且存储真实根元素
- 创建FiberRoot。div存入到continialInfo中,然后创建根fiber(也可以叫做HostRootFiber),然后初始化fiber的更新队列,并且将fiber的stateNode指向FiberRoot,将FiberRoot的current指向根fiber
const initialUpdateQueue = (fiber)=>{
const queue = {
shared: {pending: null}
};
fiber.updateQueue = queue;
}
const createUpdate = (payload) => {
return {payload}
}
const enqunUpdateQueue = (fiber,update)=>{
const pending = fiber.updateQueue.shared.pending;
const memizedState = fiber.memoizedState;
if(pending === null){
update.next = update;
}else {
update.next = pending.next;
pending.next = update;
}
fiber.updateQueue.shared.pending = update;
}
FiberRoot = {
containerinfo:div#root,
current:HostRootFiber
}
HostRootFiber = {
......,
stateNode:FiberRoot
}
最终结果
{
_internalRoot:FiberRoot
}