React18源码: reconcliler启动过程

Reconcliler启动过程

  • Reconcliler启动过程实际就是React的启动过程
  • 位于react-dom包,衔接reconciler运作流程中的输入步骤.
  • 在调用入口函数之前,reactElement(<App/>) 和 DOM对象 div#root 之间没有关联,用图片表示如下:
  • 在启动时,在React内部,一般来说,会生成3个对象,都是全局对象

创建全局对象

  • 1 )ReactDOM(Blocking)Root对象

    • ReactDOM对象,也就是Root对象
    • 属于react-dom包,该对象暴露有render, unmount方法,通过调用该实例的render方法
    • 可以引导react应用的启动
  • 2 )FiberRoot 对象

    • 属于react-reconciler包,作为react-reconciler在运行过程中的全局上下文,
    • 保存fiber构建过程中所依赖的全局状态
    • 其大部分实例变量用来存储fiber构造循环过程的各种状态
    • react应用内部,可以根据这些实例变量的值,控制执行逻辑
  • 3 )HostRootFiber 对象

    • 属于react-reconciler包,这是react应用中的第一个Fiber对象
    • 是Fiber树的根节点,节点的类型是HostRoot.
  • 这3个对象是react体系得以运行的基本保障

  • 一经创建大多数场景不会再销毁(除非卸载整个应用root.unmount())

  • 这一过程是从react-dom包发起,内部调用了react-reconciler包

  • 核心流程图如下,其中红色标注了3个对象的创建时机

创建ReactDOM Root对象

  • 1.调用 ReactDOM. createRoot创建 ReactDOMRoot例
  • 2.调用ReactDOMRoot例的render方法
  • 3.调用createRootImpl创建fiberRoot对象,并将其挂载到this._internalRoot上.
  • 4.原型上有render和 unmount方法,且内部都会调用 updateContainer进行更新.

创建fiberRoot对象{#create-root-impl}

  • 无论哪种模式下,在ReactDOM(Blocking)Root的创建过程中

  • 都会调用一个相同的函数createRootImpl,查看后续的函数调用

  • 最后会创建fiberRoot对象(在这个过程中,特别注意RootTag的传递过程)

    js 复制代码
    // 注意:2种模式下的tag是各不相同(分别是ConcurrentRoot,LegacyRoot).
    this._internalRoot = createRootImpl(container, tag, options);
    js 复制代码
    function createRootImpl(
      container:Container,
      tag: RootTag,
      options: void RootOptions,
    ) {
      // ...省略部分源码(有关hydrate服务端渲染等,暂时用不上)
      // 1.创建fiberRoot
      const root = createContainer(container, tag, hydrate, hydrationCallbacks);
      // 2.标记dom对象,把dom和fiber对象关联起来
      markContainerAsRoot(root.current, container);
      // ...省略部分无关代码
      return root;
    }
    js 复制代码
    export function createContainer(
      containerInfo: Container,
      tag: RootTag,
      hydrate: boolean,
      hydrationCallbacks: null SuspenseHydrationCallbacks,
    ): OpaqueRoot {
      // 创建fiberRoot对
      return createFiberRoot(containerInfo, tag, hydrate, hydrationCallbacks);
    }

创建HostRootFiber对象

  • 在createFiberRoot中,创建了 react应用的首个fiber对象

  • 称为 HostRootFiber(fiber.tag = HostRoot)

    js 复制代码
    export function createFiberRoot(
      containerInfo: any,
      tag: RootTag,
      hydrate: boolean,
      hydrationCallbacks: null | SuspenseHydrationCallbacks,
    ): FiberRoot {
      // 创建fiberRoot对象,注意RootTag的传递
      const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);
      
      // 1.这里创建了`reac`应用的首个`fiber`对象,称为`HostRootfiber`
      const uninitializedFiber = createHostRootFiber(tag);
      root.current = uninitializedFiber;
      uninitializedFiber.stateNode = root;
    
      // 2.初始化HostRootFiber的updateQueue
      initializeUpdateQueue(uninitializedFiber);
    
      return root;
    }
  • 注意:fiber树中所有节点的mode都会和HostRootFiber.mode一致

  • 新建的fiber节点,其mode来源于父节点,所以HostRootFiber.mode非常重要

  • 它决定了以后整个fiber树构建过程.

  • 运行到这里,3个对象创建成功,react应用的初始化完毕

可中断渲染

  • react中最广为人知的可中断渲染
    • render可以中断,部分生命周期函数有可能执行多次
    • UNSAFE_componentwillMount, UNSAFE_componentWillReceiveProps
    • 只有在 HostRootFiber.mode === ConcurrentRoot 才会开启如果使用的是legacy
    • 即通过 ReactDOM.render(<App/>,dom) 这种方式启动时
    • HostRootFiber.mode = NoMode
  • 这种情况下无论是首次render还是后续update都只会进入同步工作循环
  • reconciliation没有机会中断,所以生命周期函数只会调用一次
相关推荐
IT_陈寒1 小时前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿1 小时前
react 实现插槽slot功能
前端
stoneship1 小时前
Web项目减少资源加载失败白屏问题
前端
DaMu2 小时前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员2 小时前
一文读懂Font文件
前端
Asort2 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer2 小时前
什么是 React 中的远程组件?
前端·react.js
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑2 小时前
「AI」网站模版,效果如何?
前端·后端·产品