摘要：查看創(chuàng)建核心函數(shù)源碼行調(diào)用函數(shù)創(chuàng)建是相關(guān)，不用管源碼行這個指的是調(diào)用創(chuàng)建，下面我們將會說到對象源碼行源碼行函數(shù)中，首先創(chuàng)建了一個，然后又創(chuàng)建了一個，它們兩者還是相互引用。
感謝 yck: 剖析 React 源碼解析，本篇文章是在讀完他的文章的基礎(chǔ)上，將他的文章進行拆解和加工，加入我自己的一下理解和例子，便于大家理解。覺得yck寫的真的很棒 。React 版本為 16.8.6，關(guān)于源碼的閱讀，可以移步到y(tǒng)ck react源碼解析本文永久有效鏈接: react解析 render的FiberRoot(三)
圖片描述
下面將會說到 ReactDOM.render 在ReactDOM中的調(diào)用流程，實際就是分析下面代碼：
ReactDOM.render(, document.getElementById("app"))
實際代碼：
ReactDOM.render(React.createElement(APP, null), document.getElementById("app"));
render 函數(shù)
yck: ReactDOM 源碼 702行 render
ReactDOM.render實際調(diào)用的就是下面的代碼
render(
element: React$Element,
container: DOMContainer,
callback: ?Function,
) {
// 注意下 forceHydrate 參數(shù)，為 true 時是服務(wù)端渲染
// 客戶端調(diào)用 render 函數(shù)的話這個值永遠(yuǎn)為 false
return legacyRenderSubtreeIntoContainer(
null,
element,
container,
false,
callback,
);
}
render函數(shù)中的參數(shù)element是 傳入的組件，containerDOM節(jié)點容器，callback是回調(diào)函數(shù)。ReactDOM.render文檔。
legacyRenderSubtreeIntoContainer 函數(shù)
yck: ReactDOM 源碼 554行 legacyRenderSubtreeIntoContainer
function legacyRenderSubtreeIntoContainer(
parentComponent: ?React$Component,
children: ReactNodeList,
container: DOMContainer,
forceHydrate: boolean,
callback: ?Function,
) {
// 初始化時，container 肯定沒有 _reactRootContainer屬性
let root: Root = (container._reactRootContainer: any);
if (!root) {
root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
container, // DOM容器節(jié)點
forceHydrate, // 為false
);
// 暫時只說root不存在時，reactRoot的創(chuàng)建
}
}
container表示DOM元素節(jié)點容器, 在上面的代碼中會創(chuàng)建一個ReactRoot，然后將它掛載在container容器上, container._reactRootContainer就是掛載的ReactRoot屬性。
// 查看_reactRootContainer
document.getElementById("app")._reactRootContainer
創(chuàng)建FiberRoot核心函數(shù)
yck: ReactDOM 源碼 504行 legacyCreateRootFromDOMContainer
function legacyCreateRootFromDOMContainer(
container: DOMContainer,
forceHydrate: boolean,
): Root {
const isConcurrent = false;
// 調(diào)用ReactRoot函數(shù) 創(chuàng)建ReactRoot, shouldHydrate是SSR相關(guān)，不用管
return new ReactRoot(container, isConcurrent, shouldHydrate);
}
yck: ReactDOM 源碼 368行 ReactRoot
function ReactRoot(
container: DOMContainer,
isConcurrent: boolean,
hydrate: boolean,
) {
// 這個 root 指的是 FiberRoot
const root = createContainer(container, isConcurrent, hydrate);
this._internalRoot = root;
}
調(diào)用createContainer 創(chuàng)建FiberRoot，下面我們將會說到FiberRoot 對象
FiberRoot
yck: ReactDOM 源碼 368行 createContainer
export function createContainer(
containerInfo: Container,
isConcurrent: boolean,
hydrate: boolean,
): OpaqueRoot {
return createFiberRoot(containerInfo, isConcurrent, hydrate);
}
yck: ReactDOM 源碼 368行 createFiberRoot
function createFiberRoot(
containerInfo: any,
isConcurrent: boolean,
hydrate: boolean,
): FiberRoot {
const root: FiberRoot = (new FiberRootNode(containerInfo, hydrate): any);
const uninitializedFiber = createHostRootFiber(isConcurrent);
root.current = uninitializedFiber;
uninitializedFiber.stateNode = root;
return root;
}
createFiberRoot函數(shù)中，首先創(chuàng)建了一個root: FiberRoot，然后又創(chuàng)建了一個uninitializedFiber: RootFiber，它們兩者還是相互引用。
// 查看 FiberRoot 對象
document.getElementById("app")._reactRootContainer._internalRoot
我們下面順便說一下FiberRoot 和 RootFiber的關(guān)系，同時拿出幾個必須要要了解的屬性解釋一下。
ReactDom.render(
()=> (
),
document.querySelector("#root")
)
以上圖片中只有FiberRoot的部分屬性，想了解更多，可以查看FiberRoot的數(shù)據(jù)結(jié)構(gòu)哦??！
更多內(nèi)容：
react解析: React.createElement(一)
react解析: React.Children(二)
參考：
yck: 剖剖析 React 源碼
Jokcy 的 《React 源碼解析》: react.jokcy.me/
ps: 順便推一下自己的個人公眾號：Yopai，有興趣的可以關(guān)注，每周不定期更新，分享可以增加世界的快樂
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106617.html
