这一节我们完整的走通ReactDOM.render完成页面渲染的整个流程。

从双缓存机制一节我们知道，首次执行ReactDOM.render会创建fiberRootNode和rootFiber。其中fiberRootNode是整个应用的根节点，rootFiber是要渲染组件所在组件树的根节点。

这一步发生在调用ReactDOM.render后进入的legacyRenderSubtreeIntoContainer方法中。

legacyCreateRootFromDOMContainer方法内部会调用createFiberRoot方法完成fiberRootNode和rootFiber的创建以及关联。并初始化updateQueue。

根据以上代码，现在我们可以在基础上补充上rootFiber到的引用。

这一步发生在updateContainer方法中。

值得注意的是其中update.payload = {element};

这就是我们在介绍的，对于HostRoot，payload为ReactDOM.render的第一个传参。

至此，ReactDOM.render的流程就和我们已知的流程连接上了。

整个流程如下：

当前React共有三种模式：

  • legacy，这是当前React使用的方式。当前没有计划删除本模式，但是这个模式可能不支持一些新功能。

你可以从下表看出各种模式对特性的支持：

*：legacy模式在合成事件中有自动批处理的功能，但仅限于一个浏览器任务。非React事件想使用这个功能必须使用 unstable_batchedUpdates。在blocking模式和concurrent模式下，所有的setState在默认情况下都是批处理的。

**：会在开发中发出警告。

模式的变化影响整个应用的工作方式，所以无法只针对某个组件开启不同模式。

基于此原因，可以通过不同的入口函数开启不同模式：

  • legacy — ReactDOM.render(<App />, rootNode)
  • blocking — ReactDOM.createBlockingRoot(rootNode).render(<App />)

虽然不同模式的不同，但是他们仅对fiber.mode变量产生影响，对我们在流程概览中描述的流程并无影响。