初始化

68 阅读1分钟

初始化

  • 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){
        // 1-1-1
        update.next = update;
    }else {
        // 2-1-1
        // 3-1-2
        update.next = pending.next;
        // 2-1-2
        // 3-1-2-3
        pending.next = update;
    }
    fiber.updateQueue.shared.pending = update;
}
  • 然后放在根实例中,返回实例
FiberRoot = {
    containerinfo:div#root,
    current:HostRootFiber
}
HostRootFiber = {
    ......,
    stateNode:FiberRoot
}

最终结果
{
    _internalRoot:FiberRoot
}