【上手调试源码系列】react启动流程，其实就是创建三大全局对象

ObjectX不知名程序员

2024-04-30 574 阅读5分钟

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

上一篇上手调试源码系列】图解react几个核心包之间的关联我们将用图示例，从宏观上探究react包的三大件，react中JSX、reactElement、Fiber、DOM之间的关系，本篇我们将探究react的启动流程，如何关联根容器，三大全局对象的作用&关联，下一篇我们将介绍双缓冲树和fiber树的构建，react是如何将<App/>关联起来的。

🥑 你能学到什么？

希望在你阅读本篇文章之后，不会觉得浪费了时间。如果你跟着读下来，你将会学到：

react是如何启动的，启动流程
启动过程中的三大全局对象ReactDOMRoot对象，fiberRoot对象，HostRootFiber对象
react组件是如何与根容器关联上的

✍️系列文章react实现原理系列

一、启动过程的最终目的

创建三个全局对象，关联根容器，使React 应用能够进行高效的组件管理、更新和渲染，以及与 DOM 之间的协调工作，从而实现一个可靠、高性能的用户界面。

ReactDOMRoot用于处理与DOM容器的关联操作
FiberRootNode用于管理整个应用程序的协调和更新
根 Fiber 节点则是整个 React 应用的起点和管理中心
将react应用和div#root关联起来

二、三大全局变量的作用和关联

1.ReactDOMRoot 对象

表示React应用的根，它提供了一系列API来管理和控制React组件树的渲染，是ReactDOM与React应用交流的入口点，用于渲染React元素到对应的容器节点（DOM节点）中的对象。有了此对象，可以利用React 18+ 的并发特性，进行高效的更新和渲染。

2.FiberRoot 对象

FiberRoot是Fiber架构中的顶级结构，它负责协调整个应用的渲染工作。FiberRoot持有整个应用状态的树状结构，管理着这棵树的更新、渲染和调度等任务。

具体来说，FiberRoot对象包含了以下信息：

当前应用渲染的状态（current）
与当前应用相关的正在进行的工作（workInProgress）
处理更新的调度信息
被挂载（mounted）的DOM节点
其他相关上下文和配置

FiberRoot对象是在React应用启动渲染时创建的，并贯穿于应用的整个生命周期。

3.HostRootFiber 对象

HostRootFiber对象是Fiber架构中的一个特殊Fiber节点。它代表的是Fiber树的顶层，作为其他所有Fiber节点的根。在一个React应用中，通常只会有一个HostRootFiber，它对应于渲染应用的DOM容器。

这个对象的主要目的是作为应用状态和上下文的储备点，为整个应用的渲染提供起点。它包含了对应的stateNode，也就是之前提到的FiberRoot实例。

4.关联状态

5.总结

在React初始化时，ReactDOMRoot对象提供了与DOM的接口，FiberRoot对象承担了调和（reconciliation）和调度（scheduling）的职责，而HostRootFiber对象则是整个应用Fiber树的根节点，是其他Fiber节点的母节点。

三、调用流程

推荐阅读

工程化系列

本系列是一个从0到1的实现过程，如果您有耐心跟着实现，您可以实现一个完整的react18 + ts5 + webpack5 + 代码质量&代码风格检测&自动修复 + storybook8 + rollup + git action实现的一个完整的组件库模板项目。如果您不打算自己配置，也可以直接clone组件库仓库切换到rollup_comp分支即是完整的项目，当前实现已经足够个人使用，后续我们会新增webpack5优化、按需加载组件、实现一些常见的组件封装：包括但不限于拖拽排序、瀑布流、穿梭框、弹窗等

面试手写系列

react实现原理系列

其他

🍋 写在最后

如果您看到这里了，并且觉得这篇文章对您有所帮助，希望您能够点赞👍和收藏⭐支持一下作者🙇🙇🙇，感谢🍺🍺！如果文中有任何不准确之处，也欢迎您指正，共同进步。感谢您的阅读，期待您的点赞👍和收藏⭐！

感兴趣的同学可以关注下我的公众号ObjectX前端实验室

🌟 少走弯路 | ObjectX前端实验室 🛠️「精选资源｜实战经验｜技术洞见」