ReactDom.render函数
2020-09-22 本文已影响0人
may505
-
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去更新。
