问小白 wenxiaobai
资讯
历史
科技
环境与自然
成长
游戏
财经
文学与艺术
美食
健康
家居
文化
情感
汽车
三农
军事
旅行
运动
教育
生活
星座命理

React源码包结构关系详解

创作时间:
作者:
@小白创作中心

React源码包结构关系详解

引用
1
来源
1.
https://juejin.cn/post/7468249665085456411

React源码包结构复杂,包含近40个包,但其核心流程主要涉及5个关键包:react、react-reconciler、scheduler、react-dom和shared。本文将深入解析这些包的功能及其相互关系,帮助读者从宏观层面理解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类型、对象池化工具

包之间的关系

  1. 触发更新:用户层通过react包触发更新,最终通过react-reconciler进行更新处理。
  2. 工作调度:协调过程中借助scheduler进行任务优先级安排。
  3. 协调器:协调器最终通过react-dom将变更更新作用于宿主平台。

宏观结构

我们可以将这5个包划分为三层:

  • 核心层:react + react-reconciler + scheduler,负责跨平台协调与调度。
  • 渲染层:react-dom,负责平台渲染。
  • 公共层:shared,存放跨包的公共工具函数和类型定义。

整体流程

React的更新流程可以抽象为四个阶段:

  1. 触发更新(Trigger):通过setState或render函数触发更新,最终注册到调度器中。
  2. 调度更新任务(Schedule):根据任务优先级进行同步或异步调度。
  3. 渲染阶段(Render):进行协调工作,产生新的Fiber,收集副作用并进行节点diff。
  4. 提交阶段(Commit):执行副作用,将最小更新应用到实际DOM。

结合具体流程,各包的作用如下:

阶段
描述
触发更新(Trigger)
react、react-dom、react-reconciler
react通过setState触发更新,react-dom通过render函数触发更新,最终都通过react-reconciler的scheduleUpdateOnFiber函数处理。
调度更新任务(Schedule)
react-reconciler、scheduler
react-reconciler的scheduleUpdateOnFiber函数依赖scheduler进行调度。
渲染阶段(Render)
react-reconciler
调度器执行react-reconciler的performSyncWorkOnRoot或performConcurrentWorkOnRoot,开始render阶段的reconcile操作。
提交阶段(Commit)
react-reconciler, react-dom
reconcile结束后触发commitRoot,依赖react-dom提供的API更新DOM。

总结

本文详细介绍了React核心包的功能定位及其在整体流程中的作用和关系。希望这些内容能帮助读者在宏观层面理解React的运行机制,为进一步深入学习打下基础。

© 2023 北京元石科技有限公司 ◎ 京公网安备 11010802042949号