「React源码分析」三. React-DOM 中首次调用 render() 方法的DOM元素渲染流程

2021SC@SDUSC

本系列分析的React源码版本为撰写本文时的最新版（17.0.3）

首次调用render() 方法后的DOM元素渲染流程

首先让我们从这段最简单的React代码开始：

var React = require('react');
var ReactDOM = require('react-dom');

function MyComponent() {
   
  return <div>Hello World</div>;
}

ReactDOM.render(<MyComponent />, document.getElementById('root'));

当我们执行到最后一行代码，调用ReactDOM.render方法时，会发生什么？

首先，根据render方法的函数签名：

ReactDOM.render(
  element: React$Element<any>,
  container: Container,
  callback: ?Function,
)

我们在第一个参数传入了一个React组件，在第二个参数传入了HTML中的DOM元素，在React中被称为容器Container。这样，我们意欲把这个React组件挂载至我们指定的容器中去，让HTML中名为root的节点实际渲染为我们的React的组件。那么，接下来ReactDOM将会进行下面的工作：

1. 检查传入的HTML DOM元素（即Container）是否有效，若有效将继续调用legacyRenderSubtreeIntoContainer()方法，无效则会抛出错误并终止render过程。

// packages\react-dom\src\client\ReactDOMLegacy.js
export function render(
  element<