建设网站站点过程中,齐装网装修平台官网,百度搜到网站,网站视频制作Reconcliler启动过程
Reconcliler启动过程实际就是React的启动过程位于react-dom包#xff0c;衔接reconciler运作流程中的输入步骤.在调用入口函数之前#xff0c;reactElement(App/) 和 DOM对象 div#root 之间没有关联#xff0c;用图片表示如下#xff1a; 在启…Reconcliler启动过程
Reconcliler启动过程实际就是React的启动过程位于react-dom包衔接reconciler运作流程中的输入步骤.在调用入口函数之前reactElement(App/) 和 DOM对象 div#root 之间没有关联用图片表示如下 在启动时在React内部一般来说会生成3个对象都是全局对象
创建全局对象 1 ReactDOM(Blocking)Root对象 ReactDOM对象也就是Root对象属于react-dom包该对象暴露有render, unmount方法通过调用该实例的render方法可以引导react应用的启动 2 FiberRoot 对象 属于react-reconciler包作为react-reconciler在运行过程中的全局上下文保存fiber构建过程中所依赖的全局状态其大部分实例变量用来存储fiber构造循环过程的各种状态react应用内部可以根据这些实例变量的值控制执行逻辑 3 HostRootFiber 对象 属于react-reconciler包这是react应用中的第一个Fiber对象是Fiber树的根节点节点的类型是HostRoot. 这3个对象是react体系得以运行的基本保障 一经创建大多数场景不会再销毁除非卸载整个应用root.unmount() 这一过程是从react-dom包发起内部调用了react-reconciler包 核心流程图如下其中红色标注了3个对象的创建时机 创建ReactDOM Root对象
1.调用 ReactDOM. createRoot创建 ReactDOMRoot例2.调用ReactDOMRoot例的render方法3.调用createRootImpl创建fiberRoot对象并将其挂载到this._internalRoot上.4.原型上有render和 unmount方法且内部都会调用 updateContainer进行更新.
创建fiberRoot对象{#create-root-impl} 无论哪种模式下在ReactDOM(Blocking)Root的创建过程中 都会调用一个相同的函数createRootImpl,查看后续的函数调用 最后会创建fiberRoot对象在这个过程中特别注意RootTag的传递过程 // 注意2种模式下的tag是各不相同分别是ConcurrentRoot,LegacyRoot).
this._internalRoot createRootImpl(container, tag, options);function createRootImpl(container:Container,tag: RootTag,options: void RootOptions,
) {// ...省略部分源码有关hydrate服务端渲染等暂时用不上// 1.创建fiberRootconst root createContainer(container, tag, hydrate, hydrationCallbacks);// 2.标记dom对象把dom和fiber对象关联起来markContainerAsRoot(root.current, container);// ...省略部分无关代码return root;
}export function createContainer(containerInfo: Container,tag: RootTag,hydrate: boolean,hydrationCallbacks: null SuspenseHydrationCallbacks,
): OpaqueRoot {// 创建fiberRoot对return createFiberRoot(containerInfo, tag, hydrate, hydrationCallbacks);
}创建HostRootFiber对象 在createFiberRoot中创建了 react应用的首个fiber对象 称为 HostRootFiber(fiber.tag HostRoot) export function createFiberRoot(containerInfo: any,tag: RootTag,hydrate: boolean,hydrationCallbacks: null | SuspenseHydrationCallbacks,
): FiberRoot {// 创建fiberRoot对象注意RootTag的传递const root: FiberRoot (new FiberRootNode(containerInfo, tag, hydrate): any);// 1.这里创建了reac应用的首个fiber对象称为HostRootfiberconst uninitializedFiber createHostRootFiber(tag);root.current uninitializedFiber;uninitializedFiber.stateNode root;// 2.初始化HostRootFiber的updateQueueinitializeUpdateQueue(uninitializedFiber);return root;
}注意fiber树中所有节点的mode都会和HostRootFiber.mode一致 新建的fiber节点其mode来源于父节点所以HostRootFiber.mode非常重要 它决定了以后整个fiber树构建过程. 运行到这里3个对象创建成功react应用的初始化完毕 可中断渲染
react中最广为人知的可中断渲染 render可以中断部分生命周期函数有可能执行多次UNSAFE_componentwillMount, UNSAFE_componentWillReceiveProps只有在 HostRootFiber.mode ConcurrentRoot 才会开启如果使用的是legacy即通过 ReactDOM.render(App/,dom) 这种方式启动时HostRootFiber.mode NoMode 这种情况下无论是首次render还是后续update都只会进入同步工作循环reconciliation没有机会中断所以生命周期函数只会调用一次
