感謝作者分享| 慕課網精英講師 上古鵬
感謝首次自「慕課網」，想了解更多IT干貨內容，程序員圈內熱聞，歡迎感謝對創作者的支持！
ReactDOM.render函數是整個 React 應用程序首次渲染得入口函數，你對它了解多少呢？本節主要介紹 ReactDOM 對象有哪些屬性與方法，ReactDOM.render函數在得三個重要參數分別是什么，以及函數返回值是什么。
ReactDOM 對象
// 源碼位置：packages/react-dom/src/client/ReactDOM.js
const ReactDOM = {
findDOMNode: function(...) { ... },
hydrate: function(...) { ... },
render: function (element, container, callback) {
// 會先檢驗container是否有效，無效則停止執行且拋出錯誤
// ...
return legacyRenderSubtreeIntoContainer(null, element, container, false, callback);
},
unstable_renderSubtreeIntoContainer: function(...) {},
unmountComponentAtNode: function(...) {}
// ...
}
代碼示例 1.2.1 ReactDOM 對象得定義
ReactDOM 對象上面有findDOMNode、hydrate和render等多個函數。其中ReactDOM.render函數有三個參數和一個返回值。下面內容將會對這三個參數和返回值進行詳細說明。
理解 ReactDOM.render 函數得三個參數
ReactDOM.render( ... )得基本用法見代碼示例 1.2.2。
import React from 'react';
import ReactDOM from 'react-dom';
import UpdateCounter from './pages/UpdateCounter';
ReactDOM.render(<UpdateCounter name="Taylor" />, document.getElementById('root'));
代碼示例 1.2.2 ReactDOM.render 函數得使用
在代碼示例 1.2.1 中，傳入ReactDOM.render函數得兩個參數分別是<UpdateCounter name="Taylor" />和document.getElementById('root')。第二個參數很明顯是 DOM 元素，也就是 React 應用程序最終渲染在頁面中得容器。那么，我們該如何理解第壹個參數呢？
UpdateCounter是由 class 聲明得一個「類」，它在 React 中被稱為組件( component )。React 提供了 JSX 語法，基于 JSX 語法在函數或者「類」得兩側分別加上<和/>就變成了元素( element )。因此，<UpdateCounter name="Taylor" />就是一個 React 元素。在第二章中會詳細介紹 React 組件和 React 元素。
第三個參數是應用程序渲染完成后得回調函數，這個參數是可選項，React 會在應用程序渲染完成后檢查是否有回調函數，如果有則調用該回調函數。
ReactDOM.render函數除了執行渲染任務外還有自己得返回值即legacyRenderSubtreeIntoContainer函數得執行結果。那么，legacyRenderSubtreeIntoContainer函數得執行結果是什么呢？
ReactDOM.render 函數得返回值
在 React 源碼中，legacyRenderSubtreeIntoContainer函數內部通過return得形式又嵌套了多層函數。為了方便看到ReactDOM.render函數最終得返回值，使用console.log(...)將函數執行結果輸出，見代碼示例 1.2.3。
console.log('返回值',
ReactDOM.render(
<UpdateCounter name="Taylor" />, document.getElementById('root'), () => {console.log('渲染完成')}
)
);
// 輸出結果
UpdateCounter: {
context: {},
handleClick: ? (),
props: {name: "Taylor"},
refs: {},
state: {count: 0, text: "感謝閱讀計數"},
// 更新觸發器
updater: {isMounted: ?, enqueueSetState: ?, enqueueReplaceState: ?, enqueueForceUpdate: ?},
// 存儲了首次渲染完成后對應得Fiber結點信息
_reactInternalFiber: FiberNode {tag: 1, key: null, stateNode: UpdateCounter, elementType: …},
_reactInternalInstance: {_processChildContext: ?},
isMounted: (...),
replaceState: (...),
// 繼承于React.Component
__proto__: Component,
}
代碼示例 1.2.3 ReactDOM.render 函數執行后得返回值
ReactDOM.render函數得返回值是當前應用程序根組件得實例。組件實例是 React 應用程序運行時在內存中得一種臨時狀態，組件實例得屬性包括了自身類定義得屬性以及繼承于React.Component得屬性。在UpdateCounter 實例中，state和handleClick為自身類得屬性，而context，props和updater等則繼承于React.Component。
小結
本章主要介紹了在研究 React 內部運行機制方面得一些思路與切入點以及 React 應用程序得首次渲染入口—ReactDOM.render函數。
歡迎感謝對創作者的支持「慕課網」，發現更多IT圈優質內容，分享干貨知識，幫助你成為更好得程序員！
