React 源码包结构关系分析了 React 的核心模块及其相互关系，通过这些模块的协作，React 实现了高效的渲染和

前言

React 源码比较复杂，光源码中划分的包都有近 40 来个包，并且不同的包有不同的关系，这也会加大看源码的难度。

但好在，关于 React 的 Web 端的核心流程主要在 react, react-reconciler , scheduler , react-dom , shared 5 个包中，即我们理解这 5 个包的用途以及之间的关系之后，我们可以大概了解 React 的执行流程了。

具体包能力

下方，我们先来看看每个包提供的能力。

react

作用：提供 React 的核心 API（如组件、Hooks、虚拟 DOM 等）。
关键内容：
- 组件模型（类组件、函数组件）。
- Hooks（useState, useEffect 等）。
- 虚拟 DOM 的抽象表示（如 ReactElement）。
依赖：react-reconciler（内部）和 scheduler。

react-reconciler

作用：实现 react 中的协调算法和 fiber 架构，管理组件更新流程。
关键内容：
- Fiber 节点的构造与遍历。
- 协调算法（Diffing 算法）。
- 与渲染器交互的接口（如 HostConfig）。
依赖： scheduler 做调度任务。

scheduler

作用：任务调度与优先级管理（如时间切片、高优先级更新插队）。
关键内容：
- 任务队列管理（宏任务/微任务）。
- 优先级标记（如 ImmediatePriority、UserBlockingPriority）。

react-dom

作用：将 React 组件渲染到浏览器 DOM。
关键内容：
- DOM 操作（如 createElement, updateProperties）。
- 事件系统合成（SyntheticEvent）。
- 服务端渲染（react-dom/server）。

shared

作用：存放跨包的公共工具函数、类型定义。
关键内容：如 ReactComponent 类型、对象池化工具。

包之间的关系

触发更新：用户层调用 react 的包触发更新，通过 react-reconciler 做更新的触发。
工作调度：协调过程中会借助 scheduler 的调度，去做任务优先级安排
协调器：协调器最终借助 react-dom ，将变更更新作用于宿主平台上。

宏观结构

层次划分

经过上述信息，我们可以将这 5 个包进行聚类, 可以划分成三层包：

核心层：react + react-reconciler + scheduler 构成跨平台协调与调度。
渲染层：react-dom 提供平台的渲染。
公共层：shared 存放跨包的公共工具函数、类型定义。

整体流程

我们先来了解 React 的一次更新流程，可以抽象为下方四个阶段

具体每个阶段又如下所示

触发更新（Trigger） ：触发阶段主要是去进行更新任务的发起，最终会走到 ensureRootIsScheduled 的函数中，会向调度器中进行任务的注册。
调度更新任务（Schedule） ：调度阶段主要是做调度任务的执行，这里的调度可能是同步，也可能是异步的，具体得看任务优先级。具体到更新任务中的话，会走到 performConCurrentWork / performSyncWork 中，从而执行 renderRootSync 或者 renderRootConCurrent。
渲染阶段（Render） ：渲染阶段会进行协调（reconcile）的工作，从而产生新的 Fiber，收集副作用，进行节点的 diff 工作以及标记 DOM 节点需要修改的信息，从而做改动最小的更新。
提交阶段（Commit） ：新的 Fiber 创建完，收集了一些副作用，并且计算出了最小的更新，我们最后一步就是执行这些副作用，并且将这些最小的更新应用在实际的 DOM 上。

上方我们介绍了 React 的更新流程之后，我们具体看看包之间的关系吧。具体包的关系如下

在上方我们看到几个包的关系，我们和具体的流程结合

阶段	包	描述
触发更新（Trigger）	react、react-dom、react-reconciler	`react` 通过 `setState` 进行更新触发， `react-dom` 通过 `render` 函数进行更新触发；本质都会走 `react-reconciler` 的 `scheduleUpdateOnFiber` 的函数中。
调度更新任务（Schedule）	react-reconciler、 scheduler	`react-reconciler` 的 `scheduleUpdateOnFiber` 会调用 `schedule` 的功能，本质是依赖了 `scheduler` 的调度能力。
渲染阶段（Render）	react-reconciler	调度器会执行 `react-reconciler` 的 `performSyncWorkOnRoot/ performConcurrentWorkOnRoot` 这里会开始`render` 阶段, 从而开始做 `reconcile` 的操作
提交阶段（Commit）	react-reconciler, react-dom	等 `reconcile` 结束后，会开始 `commitRoot` 的触发，这个过程依赖宿主包去更新宿主环境，如 `react-dom` 暴露一些 API，去修改 DOM

总结

本片文章主要讲解了 react 中的主要核心包的定位，能力，在整体流程中的作用以及关系，希望这样能让读者在宏观层面对于 react 的运行流程有个大致理解，至于细节，可能需要读者自行把握。

React 源码包结构关系

前言