ReactDOM.render（一）

ReactDOM.render源码(一)

React源码版本16.8
ReactDOM.render是React入口渲染的方法。

ReactDOM.render的调用示意图

ReactDOM_render.png

• ReactDOM.render 是客户端渲染调用的方法，实际跟服务端渲染调用的方法时一样的，只不过传参不同——legacyRenderSubtreeIntoContainer 方法中的forceHydrate参数
• ReactDOM.render->legacyRenderSubtreeIntoContainer ，在这里主要做的是判断是否已经初始化过了。如果已经初始化了，则直接进入更新，updateContainer进行调度。否的话，进行ReactRoot初始化，也就是本章主要讲的内容，调用legacyCreateRootFromDOMContainer 返回ReactRoot，然后updateContainer进行调度
• legacyRenderSubtreeIntoContainer->legacyCreateRootFromDOMContainer，这个方法先根据传入的forceHydrate来判断传入的DOM下有无其他子元素，以及是否需要删除DOM下的子元素，然后调用new ReactSyncRoot生成ReactRoot并返回
• legacyCreateRootFromDOMContainer-> new ReactSyncRoot，在ReactSyncRoot函数中，创建ReactRoot对象，并调用createContainer创建FiberRoot，赋值给ReactRoot对象的_internalRoot属性
• ReactSyncRoot->createContainer->createFiberRoot，在createFiberRoot中，先new FiberRootNode创建FiberRoot,然后创建createHostRootFiber创建RootFiber，并使FiberRoot和RootFiber相互引用。然后返回FiberRoot。

---

上面就创建ReactRoot的一个简单流程。
然后在legacyRenderSubtreeIntoContainer 函数中得到的ReactRoot后，就进行了更新调度了。

---

• updateContainer函数中，先计算ExpirationTime，即更新的优先级（ps:这个并不是看上去的时间量，是一个优先级量）然后进入更新container

• updateContainer->updateContainerAtExpirationTime，

• updateContainerAtExpirationTime->scheduleRootUpdate，创建update更新信息对象，插入到updateQueue，执行调度

关于ReactRoot、FiberRoot、RootFiber

• ReactRoot，包含FiberRoot、RootFiber的一个对象
• FiberRoot，可以理解为整个应用的起点，且包含挂载的真实DOM，记录了应用的各种信息
• RootFiber，就是Fiber树的根Fiber ,创建的RootFiber的createHostRootFiber方法其实后续调用的函数就是new FiberNode，只不过参数是根节点的类型不同。

参考
1.React源码 | 4. 创建更新：ReactDOM.render
2.React源码解析之ReactDOM.render()
3.React源码阅读系列——从ReactDOM.render开始
4.FiberRoot和RootFiber