摘要：先檢驗(yàn)是否存在不存在則執(zhí)行傳入，后的函數(shù)創(chuàng)建一個。方法更新執(zhí)行方法，這個方法最終調(diào)用和并返回，這些進(jìn)行調(diào)度算法和進(jìn)行優(yōu)先級判斷
1.步驟
1.創(chuàng)建ReactRoot
2.創(chuàng)建FiberRoot和FiberRoot
3.創(chuàng)建更新
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方法可以傳入三個參數(shù)包括ReactElement、DOM的包裹節(jié)點(diǎn)，和渲染結(jié)束后執(zhí)行的回調(diào)方法。
然后驗(yàn)證invariant驗(yàn)證container是否是有效的Dom節(jié)點(diǎn)。
最后返回legacyRenderSubtreeIntoContainer方法執(zhí)行后的結(jié)果，再來看看這個方法的參數(shù)
function legacyRenderSubtreeIntoContainer(
parentComponent: ?React$Component,
children: ReactNodeList,
container: DOMContainer,
forceHydrate: boolean,
callback: ?Function,
)
這里傳入五個參數(shù)，第一個是parentComponent不存在傳入null，第二個是傳入container的子元素，第三個是創(chuàng)建ReactRoot的包裹元素，第四個是協(xié)調(diào)更新的選項，第五個是渲染后的回調(diào)方法。
let root: Root = (container._reactRootContainer: any);
if (!root) {
// Initial mount
root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
container,
forceHydrate,
);
先檢驗(yàn)ReactRoot是否存在不存在則執(zhí)行傳入container，
forceHydrate后的legacyCreateRootFromDOMContainer函數(shù)創(chuàng)建一個ReactRoot。forceHydrate在render方法中傳入的false，在Hydrate方法中傳入的true，主要是為了區(qū)分服務(wù)端渲染和客戶端渲染，true時未復(fù)用原來的節(jié)點(diǎn)適合服務(wù)端渲染，
如果是false則執(zhí)行container.removeChild(rootSibling)刪除所有的子節(jié)點(diǎn)。
然后返回通過 new ReactRoot(container, isConcurrent, shouldHydrate)：
function ReactRoot(
container: DOMContainer,
isConcurrent: boolean,
hydrate: boolean,
) {
const root = createContainer(container, isConcurrent, hydrate);
this._internalRoot = root;
}
在這個方法中調(diào)用createContainer創(chuàng)建root，這個方法從react-reconciler/inline.dom文件中引入：
export function createContainer(
containerInfo: Container,
isConcurrent: boolean,
hydrate: boolean,
): OpaqueRoot {
return createFiberRoot(containerInfo, isConcurrent, hydrate);
}
在這個方法中又調(diào)用了createFiberRoot方法創(chuàng)建FiberRoot
在創(chuàng)建玩root后執(zhí)行unbatchedUpdates更新，傳入root。render方法更新：
unbatchedUpdates(() => {
if (parentComponent != null) {
root.legacy_renderSubtreeIntoContainer(
parentComponent,
children,
callback,
);
} else {
root.render(children, callback);
}
});
執(zhí)行updateContainer(children, root, null, work._onCommit);方法，這個方法最終調(diào)用enqueueUpdate和scheduleWork,并返回expireTime，這些進(jìn)行調(diào)度算法和進(jìn)行優(yōu)先級判斷
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103185.html
