ReactDom.render函数

• ReactDom.render函数有两个功能，1、判断传入的容器是否是dom元素，2、调用legacyRenderSubtreeIntoContainer函数
• 调用legacyRenderSubtreeIntoContainer传入了5个参数
  image.png
  legacyRenderSubtreeIntoContainer函数接受5个参数
  
  image.png
  
  render调用时传入了 element container callback三个变量值，其余两个参数为null false。具体其余两个参数主要是判断是否为服务端渲染和调和其它渲染，这儿只看render渲染时传入的参数。
  image.png
  
  由于我们传入的container是一个dom元素，所以没有_reactRootContainer属性，会调用legacyCreateRootFromDOMContainer方法，给该方法传入了container forceHydrate参数。forceHydrate主要来区别是服务端渲染（hydrate）还是客户端渲染（render）。
• legacyCreateRootFromDOMContainer
  image.png

render函数调用时forceHydrate是传入的false，因此会调用shouldHydrateDueToLegacyHeuristic函数，该函数传入container，在render函数时会返回false，居然单独看此函数，最终shouldHydrate会为false,然后会清除container下面所有元素，最终调用createLegacyRoot函数

image.png

• createLegacyRoot返回一个ReactDOMBlockingRoot对象实例，该实例的原型链上挂载比如render unmount方法
  
  image.png
  image.png
  
  经过一段大规模的处理，最终root和container._reactRootContainer得到一个ReactDOMBlockingRoot，所以只需要看ReactDOMBlockingRoot函数中createRootIml就行,createRootIml函数调用了createContainer
  image.png
  ,而最终createContainer调用并返回了createFiberRoot函数，
  image.png
  ，createFiberRoot主要调用了FiberRootNode
  image.png
  
  前面所有处理的一大堆函数调用，最终其实就是调用了FiberRootNode函数，返回的是一个FiberRootNode实例，只需要关注该函数的实现就好。还需要重点关注
  image.png
  
  createHostRootFiber函数，后期会处理到
  已上基本所有代码都是在处理container相关代码
• 最后unbatchedUpdates updateContainer函数
  image.png
  
  
  image.png
• 总结：
  ReactDom.render函数主要是处理传入的root节点，创建一个ReactRoot,同时创建一个FiberRoot，创建FiberRoot的过程中也会创建一个FiberRoot对象，根据创建的FiberRoot去更新。