你对 ReactDOM.render( ... ) 操作了解多少?

作者| 慕课网精英讲师 上古鹏

本文首发自「慕课网」，想了解更多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圈优质内容，分享干货知识，帮助你成为更好的程序员！