美文网首页
ReactDom.render函数

ReactDom.render函数

作者: may505 | 来源:发表于2020-09-22 16:03 被阅读0次
    • 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去更新。

    相关文章

      网友评论

          本文标题:ReactDom.render函数

          本文链接:https://www.haomeiwen.com/subject/yqyvyktx.html