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