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去更新。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容