摘要：先检验是否存在不存在则执行传入，后的函数创建一个。方法更新执行方法，这个方法最终调用和并返回，这些进行调度算法和进行优先级判断
1.步骤
1.创建ReactRoot
2.创建FiberRoot和FiberRoot
3.创建更新
2. render方法：
render(
element: React$Element,
container: DOMContainer,
callback: ?Function,
) {
invariant(
isValidContainer(container),
"Target container is not a DOM element.",
);
return legacyRenderSubtreeIntoContainer(
null,
element,
container,
false,
callback,
);
},
render方法可以传入三个参数包括ReactElement、DOM的包裹节点，和渲染结束后执行的回调方法。
然后验证invariant验证container是否是有效的Dom节点。
最后返回legacyRenderSubtreeIntoContainer方法执行后的结果，再来看看这个方法的参数
function legacyRenderSubtreeIntoContainer(
parentComponent: ?React$Component,
children: ReactNodeList,
container: DOMContainer,
forceHydrate: boolean,
callback: ?Function,
)
这里传入五个参数，第一个是parentComponent不存在传入null，第二个是传入container的子元素，第三个是创建ReactRoot的包裹元素，第四个是协调更新的选项，第五个是渲染后的回调方法。
let root: Root = (container._reactRootContainer: any);
if (!root) {
// Initial mount
root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
container,
forceHydrate,
);
先检验ReactRoot是否存在不存在则执行传入container，
forceHydrate后的legacyCreateRootFromDOMContainer函数创建一个ReactRoot。forceHydrate在render方法中传入的false，在Hydrate方法中传入的true，主要是为了区分服务端渲染和客户端渲染，true时未复用原来的节点适合服务端渲染，
如果是false则执行container.removeChild(rootSibling)删除所有的子节点。
然后返回通过 new ReactRoot(container, isConcurrent, shouldHydrate)：
function ReactRoot(
container: DOMContainer,
isConcurrent: boolean,
hydrate: boolean,
) {
const root = createContainer(container, isConcurrent, hydrate);
this._internalRoot = root;
}
在这个方法中调用createContainer创建root，这个方法从react-reconciler/inline.dom文件中引入：
export function createContainer(
containerInfo: Container,
isConcurrent: boolean,
hydrate: boolean,
): OpaqueRoot {
return createFiberRoot(containerInfo, isConcurrent, hydrate);
}
在这个方法中又调用了createFiberRoot方法创建FiberRoot
在创建玩root后执行unbatchedUpdates更新，传入root。render方法更新：
unbatchedUpdates(() => {
if (parentComponent != null) {
root.legacy_renderSubtreeIntoContainer(
parentComponent,
children,
callback,
);
} else {
root.render(children, callback);
}
});
执行updateContainer(children, root, null, work._onCommit);方法，这个方法最终调用enqueueUpdate和scheduleWork,并返回expireTime，这些进行调度算法和进行优先级判断
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103185.html
