| 慕課網(wǎng)精英講師 上古鵬

感謝首次自「慕課網(wǎng)」，想了解更多IT干貨內(nèi)容，程序員圈內(nèi)熱聞，歡迎！

ReactDOM.render函數(shù)是整個(gè) React 應(yīng)用程序首次渲染得入口函數(shù)，你對它了解多少呢？本節(jié)主要介紹 ReactDOM 對象有哪些屬性與方法，ReactDOM.render函數(shù)在得三個(gè)重要參數(shù)分別是什么，以及函數(shù)返回值是什么。

ReactDOM 對象

// 源碼位置：packages/react-dom/src/client/ReactDOM.js

const ReactDOM = {

findDOMNode: function(...) { ... },

hydrate: function(...) { ... },

render: function (element, container, callback) {

// 會先檢驗(yàn)container是否有效，無效則停止執(zhí)行且拋出錯(cuò)誤

// ...

return legacyRenderSubtreeIntoContainer(null, element, container, false, callback);

},

unstable_renderSubtreeIntoContainer: function(...) {},

unmountComponentAtNode: function(...) {}

// ...

}

代碼示例 1.2.1 ReactDOM 對象得定義

ReactDOM 對象上面有findDOMNode、hydrate和render等多個(gè)函數(shù)。其中ReactDOM.render函數(shù)有三個(gè)參數(shù)和一個(gè)返回值。下面內(nèi)容將會對這三個(gè)參數(shù)和返回值進(jìn)行詳細(xì)說明。

理解 ReactDOM.render 函數(shù)得三個(gè)參數(shù)

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 函數(shù)得使用

在代碼示例 1.2.1 中，傳入ReactDOM.render函數(shù)得兩個(gè)參數(shù)分別是<UpdateCounter name="Taylor" />和document.getElementById('root')。第二個(gè)參數(shù)很明顯是 DOM 元素，也就是 React 應(yīng)用程序最終渲染在頁面中得容器。那么，我們該如何理解第壹個(gè)參數(shù)呢？

UpdateCounter是由 class 聲明得一個(gè)「類」，它在 React 中被稱為組件( component )。React 提供了 JSX 語法，基于 JSX 語法在函數(shù)或者「類」得兩側(cè)分別加上<和/>就變成了元素( element )。因此，<UpdateCounter name="Taylor" />就是一個(gè) React 元素。在第二章中會詳細(xì)介紹 React 組件和 React 元素。

第三個(gè)參數(shù)是應(yīng)用程序渲染完成后得回調(diào)函數(shù)，這個(gè)參數(shù)是可選項(xiàng)，React 會在應(yīng)用程序渲染完成后檢查是否有回調(diào)函數(shù)，如果有則調(diào)用該回調(diào)函數(shù)。

ReactDOM.render函數(shù)除了執(zhí)行渲染任務(wù)外還有自己得返回值即legacyRenderSubtreeIntoContainer函數(shù)得執(zhí)行結(jié)果。那么，legacyRenderSubtreeIntoContainer函數(shù)得執(zhí)行結(jié)果是什么呢？

ReactDOM.render 函數(shù)得返回值

在 React 源碼中，legacyRenderSubtreeIntoContainer函數(shù)內(nèi)部通過return得形式又嵌套了多層函數(shù)。為了方便看到ReactDOM.render函數(shù)最終得返回值，使用console.log(...)將函數(shù)執(zhí)行結(jié)果輸出，見代碼示例 1.2.3。

console.log('返回值',

ReactDOM.render(

<UpdateCounter name="Taylor" />, document.getElementById('root'), () => {console.log('渲染完成')}

)

);

// 輸出結(jié)果

UpdateCounter: {

context: {},

handleClick: ? (),

props: {name: "Taylor"},

refs: {},

state: {count: 0, text: "計(jì)數(shù)"},

// 更新觸發(fā)器

updater: {isMounted: ?, enqueueSetState: ?, enqueueReplaceState: ?, enqueueForceUpdate: ?},

// 存儲了首次渲染完成后對應(yīng)得Fiber結(jié)點(diǎn)信息

_reactInternalFiber: FiberNode {tag: 1, key: null, stateNode: UpdateCounter, elementType: …},

_reactInternalInstance: {_processChildContext: ?},

isMounted: (...),

replaceState: (...),

// 繼承于React.Component

__proto__: Component,

}

代碼示例 1.2.3 ReactDOM.render 函數(shù)執(zhí)行后得返回值

ReactDOM.render函數(shù)得返回值是當(dāng)前應(yīng)用程序根組件得實(shí)例。組件實(shí)例是 React 應(yīng)用程序運(yùn)行時(shí)在內(nèi)存中得一種臨時(shí)狀態(tài)，組件實(shí)例得屬性包括了自身類定義得屬性以及繼承于React.Component得屬性。在UpdateCounter 實(shí)例中，state和handleClick為自身類得屬性，而context，props和updater等則繼承于React.Component。

小結(jié)

本章主要介紹了在研究 React 內(nèi)部運(yùn)行機(jī)制方面得一些思路與切入點(diǎn)以及 React 應(yīng)用程序得首次渲染入口—ReactDOM.render函數(shù)。

歡迎「慕課網(wǎng)」，發(fā)現(xiàn)更多IT圈優(yōu)質(zhì)內(nèi)容，分享干貨知識，幫助你成為更好得程序員！