教程前端【免费下载链接】react-illustration-series图解react源码, 用大量配图的方式, 致力于将react原理表述清楚.项目地址https://gitcode.com/gh_mirrors/re/react-illustration-series点击查看免费下载本文以 react-illustration-series 的系列总览文档docs/index.md为骨架结合 readme.md 与docs/main、docs/algorithm、docs/interview下各篇原理文章为读者梳理一条从宏观包结构到微观运行机制的 React 17 源码阅读路径。读完本文你将掌握该仓库的内容版图、核心包职责划分、两大工作循环的主干逻辑、三种启动模式以及如何在本机以 dumi 站点形式浏览全文。系列定位用配图讲清 React 原理react-illustration-series 是一个以图解为核心形式的 React 源码原理系列仓库描述明确写道图解 react 源码用大量配图的方式致力于将 react 原理表述清楚。整个系列基于react17.0.2展开分析并尽可能跟随 React 版本升级持续更新随着官方升级主要版本的文章会保存在以版本号命名的分支中当前仓库主分支对应 v17.x 系列历史版本另有 v16.13.1、v17.0.1 分支。系列的展开主线索是react 核心包结构和运行机制覆盖的核心内容板块包括react 宏观结构核心包之间的依赖与调用关系react 工作循环任务调度循环与 fiber 构造循环react 启动模式legacy / Blocking / Concurrentreact fiber 原理树构造、对比更新、渲染提交react hook 原理状态 Hook、副作用 Hookreact 合成事件原理仓库本身是一份以 dumi 驱动的静态文档站点见 package.json依赖dumi^2.2.0支持npm run dev在本地启动文档站逐篇阅读。适用读者官方在 docs/index.md 中给出了两条读者门槛定位相当明确对react、react-dom开发 web 应用有实践经验期望深入理解react内在作用原理。也就是说这个系列不是入门教程适合已经能熟练使用 React 写应用、想进一步弄清框架内部到底怎么运行的开发者。系列同时强调不是面经但会列举一些面试题来加深对 react 理解——面试题板块独立存在于 docs/interview/index.md后续会详细介绍。内容版图五大板块构成完整学习路径综合 readme.md 与 docs/index.md 的目录组织整个系列的内容可划分为五个板块。以下逐一给出对应文章与主题要点所有路径均以仓库根目录为基准。1. 基本概念先建立宏观认知宏观包结构介绍 web 开发相关的 4 个核心包及架构分层两大工作循环任务调度循环与fiber构造循环的分工与联系高频对象梳理 fiber、updateQueue、task 等贯穿始终的数据对象。2. 运行核心主线一次更新如何变成一次渲染reconciler 运作流程把 reconciler 归结为输入 → 注册调度任务 → 执行调度任务 → 输出等步骤启动过程三种启动模式及三个全局对象的创建优先级管理React 体系中的优先级分类与转换scheduler 调度原理任务队列、时间切片与回调时机控制fiber 树构造基础准备、fiber 树构造初次创建、fiber 树构造对比更新fiber 树三阶段构造细节fiber 树渲染commit 阶段的副作用处理与 DOM 输出异常处理系列规划中的主题。3. 数据管理状态、副作用与跨组件数据状态与副作用class / function 组件中改变 fiber 节点状态与副作用的 apihook 原理概览Hook 与 Fiber 的关系及数据结构hook 原理状态 Hook、hook 原理副作用 Hookcontext 原理。4. 交互事件体系合成事件原理事件代理与两阶段派发机制。5. 高频算法阅读源码前的前置功课位运算fiber 的 flags、lane 等大量基于位运算的标记设计堆排序任务调度循环所使用的二叉堆深度优先遍历fiber 树构造的基本遍历方式链表操作fiber 链式结构、更新队列的合并栈操作上下文栈的入栈出栈diff 算法reconcile 子节点的核心算法。这五个板块在阅读顺序上存在依赖关系建议先读基本概念建立全局观再进入运行核心跟完整条渲染链路随后用数据管理与交互补全组件层细节过程中按需查阅高频算法作为理解工具。核心包结构四个包如何分工协作宏观包结构一文指出React 工程目录 packages 下共有 35 个包对应17.0.2版本其中与web 开发相关的核心包只有 4 个整个系列近 20 篇文章正是以这 4 个包为线索展开包职责定位开发者在日常编码中的接触面react基础包只提供定义 React 组件ReactElement的必要函数编写应用时调用的绝大多数 api 均来自此包react-domReact 与 web 平台连接的桥梁浏览器与 Node.js 环境把 reconciler 的运行结果输出到界面上多数场景只用到入口函数ReactDOM.render(App/, document.getElementById(root))react-reconcilerReact 得以运行的核心包综合协调react-dom、react、scheduler各包之间的调用与配合通常不会直接使用scheduler调度机制的核心实现控制回调函数的执行时机concurrent 模式下可实现任务分片通常不会直接使用其中react-reconciler与scheduler的协作链路可以这样概括react-reconciler接受输入scheduleUpdateOnFiber把 fiber 树生成逻辑封装进回调函数涉及 fiber 树形结构、fiber.updateQueue队列、调和算法等再将回调performSyncWorkOnRoot或performConcurrentWorkOnRoot送入scheduler调度scheduler控制回调执行时机回调执行完毕后得到全新的 fiber 树最后调用渲染器react-dom、react-native等把 fiber 树结构反映到界面上。为了便于理解该文还提出了一套**接口层api/ 内核层core**的二分视角并注明这并非官方术语仅为理解 react 而做的分解接口层react包。React 启动后能改变渲染的基本操作只有 3 种——class 组件中调用setState()、function 组件中通过 hook 发起dispatchAction改变 hook 对象、改变 context也需要setState或dispatchAction辅助。这些 api 均由react包直接暴露。内核层由 3 部分构成——调度器scheduler包唯一职责是执行回调。把react-reconciler提供的回调包装成任务对象内部维护一个按优先级排列的任务队列二叉堆循环消费直到队列清空构造器react-reconciler包装载渲染器渲染器必须实现HostConfig协议如react-dom接收react-dom初次 render 与react包后续 setState 发起的更新请求将 fiber 树构造过程包装成回调交给scheduler等待调度渲染器react-dom包引导应用启动ReactDOM.render并实现HostConfig协议把 fiber 树表现为真实 dom 节点浏览器中或字符串SSR 场景。上图即 宏观包结构 一文中的内核关系概览红色方块代表入口函数绿色方块代表出口函数包之间的调用脉络正是通过板块间的入口、出口函数连接起来的。理解了这张图就基本掌握了 react 内核层的宏观结构后续各章节均按此图的思路逐模块深入。两大工作循环React 运行的主干逻辑两大工作循环 从概览图中提炼出 React 运行的两个大循环任务调度循环源码位于scheduler包的Scheduler.js是 react 应用得以运行的保证负责循环调用、控制所有任务task的调度。它以二叉堆为数据结构详见堆排序循环执行堆顶任务直到堆被清空逻辑偏向宏观只调度 task不关心任务具体内容甚至可以把Scheduler包脱离 react 单独使用具体任务就是执行回调performSyncWorkOnRoot或performConcurrentWorkOnRoot。fiber 构造循环源码位于react-reconciler包的ReactFiberWorkLoop.js控制 fiber 树的构造整个过程是一个深度优先遍历详见深度优先遍历它以树为数据结构逻辑偏向具体实现只是 task 的一部分如performSyncWorkOnRoot包含 fiber 树构造、DOM 渲染、调度检测只负责 fiber 树构造。两者的关系是从属关系fiber 构造循环是任务调度循环中 task 的一部分每个 task 都会重新构造一棵 fiber 树。两大循环的分工可总结为大循环任务调度循环负责调度 task小循环fiber 构造循环负责实现 task。由此React 运行的主干逻辑——即输入转换为输出的核心步骤——可概括为三步输入把每一次更新新增、删除、修改节点视为一次更新需求目的是更新 DOM 节点注册调度任务react-reconciler收到更新需求后并不立即构造 fiber 树而是去scheduler注册一个新 task即把更新需求转换成一个 task执行调度任务输出scheduler通过任务调度循环执行 task执行过程又回到react-reconciler包中。其中fiber构造循环是 task 的实现环节之一循环完成后构造出最新 fiber 树commitRoot是 task 的实现环节之二把最新 fiber 树渲染到页面上task 完成。为了获得更好的性能如批量更新、可中断渲染React 在这条输入 → 输出链路上做了大量优化而任务调度循环 fiber 构造循环的相互配合正是实现可中断渲染的基础。三种启动模式与三个全局对象启动过程 一文衔接 reconciler 运作流程的输入步骤讲解应用的启动过程。在当前稳定版react17.0.2源码中存在 3 种启动方式模式入口 api代码形式特性legacy模式ReactDOM.render(App /, rootNode)ReactDOM.render(App /, document.getElementById(root), (dom) {});支持回调参数是 dom 对象当前 React app 实际使用的方式可能不支持 concurrent 的新功能Blocking模式ReactDOM.createBlockingRoot(rootNode).render(App /)先createBlockingRoot(document.getElementById(root))创建 ReactDOMRoot 对象再调用.render(App /)不支持回调实验中仅提供 concurrent 模式的小部分功能作为迁移第一步Concurrent模式ReactDOM.createRoot(rootNode).render(App /)先createRoot(document.getElementById(root))再.render(App /)不支持回调实验中开启所有新功能未来计划作为 React 默认开发模式需要特别说明的是虽然17.0.2源码中存在createRoot与createBlockingRoot方法自行构建时默认构建 experimental 版本但稳定版的构建入口packages/react-dom/index.stable.js排除了这两个 api所以npm i react-dom安装的17.0.2稳定版中不能使用这两个 api。要体验非 legacy 模式需要显式安装 alpha 版本或自行构建。无论哪种模式React 初始化时都会创建 3 个全局对象一经创建大多数场景不会再销毁除非root.unmount()卸载整个应用ReactDOM(Blocking)Root对象属于react-dom包暴露render、unmount方法通过调用其render方法引导应用启动fiberRoot对象属于react-reconciler包作为 reconciler 运行过程中的全局上下文保存 fiber 构建过程中依赖的全局状态其大部分实例变量用于存储 fiber 构造循环过程中的各种状态react 应用内部据此控制执行逻辑HostRootFiber对象属于react-reconciler包是 React 应用中第一个 Fiber 对象、Fiber 树的根节点节点类型为HostRoot。三个对象创建过程中的RootTag参数在三种模式下各不相同该类型决定了整个 react 应用是否支持可中断渲染。scheduler 调度时间切片与任务队列调度原理 将调度中心scheduler包称为React 运行时的中枢。其最核心的代码在SchedulerHostConfig.default.js共导出 8 个函数核心逻辑集中在其中export let requestHostCallback; // 请求及时回调: port.postMessage export let cancelHostCallback; // 取消及时回调: scheduledHostCallback null export let requestHostTimeout; // 请求延时回调: setTimeout export let cancelHostTimeout; // 取消延时回调: cancelTimeout export let shouldYieldToHost; // 是否让出主线程(currentTime deadline needsPaint) export let requestPaint; // 请求绘制: 设置 needsPaint true export let getCurrentTime; // 获取当前时间 export let forceFrameRate; // 强制设置 yieldInterval, 从源码引用看几乎没有用到由于 react 可在 Node.js 环境使用这些函数在不同 JS 执行环境中实现会有差异。基于普通浏览器环境其关键机制如下异步回调requestHostCallback保存回调后通过MessageChannel的port.postMessage(null)触发performWorkUntilDeadline最终执行scheduledHostCallback。注意MessageChannel在浏览器事件循环中属于宏任务所以调度中心永远是异步执行回调函数时间切片默认yieldInterval为 5ms如果一个 task 运行超过该周期下一个 task 执行之前会把控制权归还浏览器让浏览器处理用户输入、UI 绘制等紧急任务shouldYieldToHost判断currentTime deadline needsPaint。Hook 原理与数据管理概览在数据管理板块hook 原理概览 指出使用任意 Hook api最终都是为了控制 fiber 节点上状态相关与副作用Effect相关的属性——状态相关包括pendingProps、memoizedProps、updateQueue、memoizedState副作用相关包括flags、nextEffect、firstEffect、lastEffect。Hook 的数据结构定义于ReactFiberHooks.old.js核心为export type Hook {| memoizedState: any, // 当前状态 baseState: any, // 基状态 baseQueue: Updateany, any | null, // 基队列 queue: UpdateQueueany, any | null, // 更新队列 next: Hook | null, // next指针 |};连同 状态与副作用、hook 原理状态 Hook、hook 原理副作用 Hook、context 原理 四篇共同构成理解 React 数据流在 fiber 层面的完整拼图。官方也解释了引入 Hook 的动机——组件间复用状态逻辑很难、复杂组件难以理解、class 难以理解同时 Hook 在设计上还避免了 class 需要的额外开支类实例创建、构造函数中绑定事件处理器等组件树层次也更浅。面试题板块以题带点巩固理解系列单独设有面试题板块docs/interview/index.md题目会不断扩充每题对应一个 issue 可参与讨论当前已列出 11 题例如setState 是同步还是异步class 组件生命周期有哪些重复调用 setState 会发生什么什么是 fiber 架构调和算法具体干什么的key 有什么作用可以省略吗useState() 如何实现数据持久化useEffect() 会有内存泄漏吗useEffect(function, deps)中第二个参数表示依赖项如何实现依赖项的对比什么是可中断渲染context 有什么作用这些题目与上述各篇原理文章一一呼应可用于读完对应章节后的自测与复盘。版本策略与变更要点系列最初写作于 2020 年 6 月当时稳定版为 v16.13.1随着 React 官方升级主要版本文章保存在以版本号命名的分支中。主分支当前基于react17.0.2历史版本分支包括 v16.13.1 与 v17.0.1。readme.md 记录了 v17 系列的版本跟踪要点v17.0.0主版本升级使用层面基本维持不变源码层面有两大重大变动——重构Fiber.expirationTime并引入Fiber.lanesreact-reconciler板块事件代理节点从 document 变成 rootNode、取消合成事件的缓存池legacy-events被移除改为react-dom/events。v17.0.1相比 v17.0.0 只改动了 1 个文件修复 ie11 兼容问题同时提升 v8 内部执行性能。v17.0.2改动集中于Scheduler包主干逻辑没有变动仅涉及调度性能统计相关。系列暂时只跟踪稳定版本变动由于 react 仓库代码改动频繁写作过程中伴随小版本发布时文章中的源码链接以写作当天的最新小版本为基准。本地阅读与运行方式仓库是一份基于 dumi 的静态站点工程package.json克隆到本地后即可把整个系列作为文档站浏览git clone https://gitcode.com/gh_mirrors/re/react-illustration-series.git cd react-illustration-series npm install npm run dev # 启动 dumi 开发服务器 npm run build # 构建静态站点也可直接按 Markdown 文件路径在仓库中阅读例如从 docs/main/macro-structure.md 开始按基本概念 → 运行核心 → 数据管理 → 交互 → 高频算法的顺序逐步深入。总结react-illustration-series 的核心价值在于以react 核心包结构和运行机制为主线索用大量配图把输入更新 → 注册调度任务 → 执行回调 → 构造 fiber 树 → commit 渲染这条主干链路讲透。建议读者先通读宏观包结构与两大工作循环建立整体认知再结合本文梳理的内容版图逐篇深入过程中用高频算法系列补齐数据结构基础用面试题板块检验理解深度。正如系列使用指南所言真正对于技术本身不能急于求成需要静下心来修炼——这份仓库正是为此准备的一份结构化、可循序渐进的学习材料。赞分享教程前端【免费下载链接】react-illustration-series图解react源码, 用大量配图的方式, 致力于将react原理表述清楚.项目地址https://gitcode.com/gh_mirrors/re/react-illustration-series点击查看免费下载相关推荐Nango 仓库 agent-builder-skill 深度解析五款生产级 Claude Code Subagent 完整示例与落地指南Nango 仓库 agent builder skill 深度解析五款生产级 Claude Code Subagent 完整示例与落地指南 导读 本文以 Na教程前端React源码中的队列操作react-illustration-series之UpdateQueue入队与出队React源码中的队列操作react illustration series之UpdateQueue入队与出队 在React应用开发中状态更新是核心流程之一教程前端Faster Mask RCNN训练全攻略从COCO数据集准备到1P/8P性能调优实战Faster Mask RCNN训练全攻略从COCO数据集准备到1P/8P性能调优实战 Faster Mask RCNN是基于PyTorch的高效目标检测与实上一篇【亲测免费】 机器视觉-使用Halcon描述与实现下一篇Holo1.5-3B终极指南如何构建下一代UI智能代理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考