# 自顶向下学 React源码课程 *Published:* 2024-05-21 *Author:* 客服001 #### 温馨提醒 如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢 本文最后更新于2024年12月29日，已超过 180天没有更新 [![](https://www.xarjtc.com/wp-content/uploads/2024/05/c43ff10eb3260b6.webp)](https://www.xarjtc.com/wp-content/uploads/2024/05/c43ff10eb3260b6.webp) **课程收获** 学习React源码，不仅能掌握业界最顶尖前端框架的运行原理，探索前端边界。也能让自己成为业务线React大拿。 从v15～v16重构的Fiber架构，再到v16～v17新增的并发模式，React已经逐渐从UI库变为小型的操作系统。 对于想学习React源码的同学来说，这同时是机遇与挑战。 挑战是：React内部运行流程真的很复杂。 机遇是：学完之后，除了拥有框架开发能力外，你的收获将不限于： 编程范式：函数式编程的代数效应思想 操作系统：如何从零实现协程（fiber架构） 数据结构：链表、树、小顶堆 算法：O(n)的Diff算法、掩码 深入浏览器渲染原理 **适用人群** 1：React 技术栈开发者，希望成为业务线 React 大拿的同学 2：中/高级前端工程师，希望进阶“资深前端工程师”的同学 3：希望成为比面试官更懂 React 的同学 4：寻求突破自身舒适区，探寻前端边界的同学 **课程简介** 曾有大牛说过：“前端领域十八个月难度翻一倍。”作为前端工程师，如果将自己的定位局限在“熟练使用技术栈完成业务”，那么随着技术革新，慢慢会陷入“学不动了”的境地。这个问题如何解决呢？答案是：探索前端的边界。 在业务之外，前端还有很多富有挑战与机遇的领域，包括但不限于：全栈、移动端、工程化、可视化、框架开发。熟练完成业务并且深入前端某一领域，也是“资深前端工程师”必须掌握的能力。在这些领域中，与我们日常开发关系最密切的，便是“框架开发”了。 **授课思路** 为了帮你从本质上学懂React源码，本课程的讲解将从理念到架构，从架构到实现，从实现到具体代码。 这是一个自顶向下、抽象程度递减，符合大脑认知的过程。 基于此，本课程划分为三大篇章： 理念篇：带你了解React的设计理念及演进史 架构篇：讲解“设计理念“如何具体落实到代码架构上 实现篇：讲解主要 API如何在“架构体系”中实现 **课程特色** 基于最新源码，本课程基于最新 React17.0.0-alpha 设计，全网稀缺。React17 发布的 Concurrent Mode 是React 前几年的努力方向，也是未来几年的发展方向。市面上目前还没有 React17 源码级别的课程。 辅助资料完备，课程配备了配套电子书《React技术揭秘》、丰富的在线Demo、实战练习。 “自顶向下”的授课方式，符合人类认知的过程。如果说别的源码分析课程是“高级”难度，那么本课程只有“中级”难度。原因在于课程使用“自顶向下”的授课方式，更符合人类认知的过程。 **课程大纲** 理念篇：React的设计理念及架构体系 React的设计理念 为了满足设计理念，这些年React架构的演进历程 新的React架构是如何设计的 架构篇：React架构的工作流程 React架构render阶段的完整流程 React架构commit阶段的完整流程 实现篇：具体功能的源码实现 Diff算法的实现 状态更新相关API的实现 Hooks的实现 Concurrent Mode的实现 **章节目录：** 第一章：理念篇 1.1 如何学习React源码 8 分钟 公开课 1.2 设计理念 8 分钟 1.3 架构的演进史 9 分钟 1.4 React新架构—Fiber 9 分钟 1.5 Fiber架构工作原理 10 分钟 1.6 如何调试源码 6 分钟 1.7 源码的目录结构 第二章：架构篇之render阶段 2.1 架构工作流程概览 7 分钟 2.2 深入理解JSX 14 分钟 2.3 “递”阶段mount时流程 19 分钟 2.4 “归”阶段mount时流程 9 分钟 2.5 “递”阶段update时流程 17 分钟 2.6 “归”阶段update时流程 15 分钟 第三章：架构篇之commit阶段 3.1 流程概览 12 分钟 3.2 before mutation阶段 4 分钟 3.3 mutation阶段 13 分钟 3.4 layout阶段 14 分钟 第四章：实现篇之Diff算法 4.1 Diff算法流程概览 8 分钟 4.2 单一节点的Diff 12 分钟 4.3 多节点Diff 26 分钟 第五章：实现篇之状态更新 5.1 状态更新流程概览 11 分钟 5.2 优先级与Update 10 分钟 5.3 Update的计算 25 分钟 5.4 ReactDOM.render完整流程 10 分钟 5.5 this.setState完整流程 2 分钟 第六章：实现篇之Hooks 6.1 极简useState实现 18 分钟 6.2 useState与useReducer的实现 15 分钟 6.3 useEffect与useLayoutEffect的实现 17 分钟 6.4 useRef的实现 12 分钟 6.5 useMemo及useCallback的实现 4 分钟 第七章：实现篇之 Concurrent Mode 7.1 scheduler的工作原理及实现 20 分钟 7.2 lane模型的工作原理 6 分钟 7.3 异步可中断更新与饥饿问题 22 分钟 7.4 batchedUpdates的实现 14 分钟 7.5 高优先级更新如何插队 11 分钟 7.6 Suspense的实现 18 分钟