译者| 慕课网菁英客座教授 远古鹏
责任编辑首秀自「慕课网」，想如是说更多IT蔬果文本，开发人员圈高热闻，热烈欢迎高度关注！
ReactDOM.render表达式是整座 React 插件首度图形的出口处表达式，你对它如是说啥呢？此栏主要就如是说 ReactDOM 第一类有甚么样特性与方式，ReactDOM.render表达式在的四个关键模块依次是甚么，和表达式codice是甚么。
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表达式有四个模块和一个codice。下面文本将会对这四个模块和codice进行详细说明。
理解 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表达式除了继续执行图形任务外还有自己的codice即legacyRenderSubtreeIntoContainer表达式的继续执行结果。那么，legacyRenderSubtreeIntoContainer表达式的继续执行结果是甚么呢？
ReactDOM.render 表达式的codice
在 React 源代码中，legacyRenderSubtreeIntoContainer表达式内部通过return的形式又嵌套了多层表达式。为了方便看到ReactDOM.render表达式最终的codice，使用console.log(…)将表达式继续执行结果输出，见代码示例 1.2.3。
console.log(codice,
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 表达式继续执行后的codice
ReactDOM.render表达式的codice是当前插件根组件的实例。组件实例是 React 插件运行时在内存中的一种临时状态，组件实例的特性包括了自身类定义的特性和继承于React.Component的特性。在UpdateCounter 实例中，state和handleClick为自身类的特性，而context，props和updater等则继承于React.Component。
小结
本章主要就如是说了在研究 React 内部运行机制方面的一些思路与切入点和 React 插件的首度图形出口处—ReactDOM.render表达式。
热烈欢迎高度关注「慕课网」，发现更多IT圈优质文本，分享蔬果知识，帮助你成为更好的开发人员！
