# 前端跳槽突围课：React18底层源码深入剖析视频课程

*Published:* 2024-05-22
*Author:* 客服001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2024年12月29日，已超过 180天没有更新



**从框架使用者蜕变成源码开发与贡献者，助力前端工程师顺利摆脱就业，跳槽困境。**

[![](https://www.xarjtc.com/wp-content/uploads/2024/05/b6a7d50abf862aa.webp)](https://www.xarjtc.com/wp-content/uploads/2024/05/b6a7d50abf862aa.webp)

**将学到：**

- 系统掌握底层设计原理
- 深刻理解React核心概念
- 具备React 源码调试能力
- 快熟成长为源码Contributor
- 具备手写mini框架实战经验
- 熟练掌握成为高手的方法论

**简介：**

> 在当下就业环境下，只会框架的使用是不够的，这是很多初级工程师面临的困境。想要脱颖而出，成为具备手写框架、源码贡献等技能的高手，才能拥有更多的机会。想要这种摆脱框架黑盒状态。本课程是你的最佳选择，不仅可以深入学习React工作原理，还可以掌握源码调试技巧，手写框架的实践，以及成为源码Contributor的方法论，为你提供方位的指导和实践，助力成为一个真正有实力的高级技术人才。

**适合人群**

工作一年以上的前端工程师

想要精通React

**技术储备**

想要精通React

有React基础

**环境参数**

Node.js 18+

***试看链接：https://pan.baidu.com/s/10nBNnKBXSp5\_hrk8A4VKiQ?pwd=dzd7***

章节目录：

第1章 课程介绍

1 节|10分钟

展开

视频：

1-1 React18源码实战课程导学

试看

09:29

第2章 学前技术储备：React核心知识点讲解

14 节|172分钟

收起

视频：

2-1 为什么要学习React源码

10:04

视频：

2-2 React的迭代历史：那些标志性的变革，如类组件、Fiber、Hooks、Concurrent等

23:36

视频：

2-3 Thinking in React，即用React的方式写React-1

12:51

视频：

2-4 Thinking in React，即用React的方式写React-2

06:27

视频：

2-5 React中的状态管理与状态管理库-1

16:14

视频：

2-6 React中的状态管理与状态管理库-2

09:27

视频：

2-7 state (状态)与props (属性)

07:19

视频：

2-8 React中的组件，如函数组件、类组件等

15:56

视频：

2-9 Hooks

08:14

视频：

2-10 Context

15:12

视频：

2-11 React脚手架以及企业级框架

12:52

视频：

2-12 React 组件的常见性能优化-1

14:16

视频：

2-13 React 组件的常见性能优化-2

11:21

视频：

2-14 React 组件的常见性能优化-3

07:59

第3章 学习前：底层源码的高效学习方法分享

5 节|61分钟

收起

视频：

3-1 -1 如何高效学习React源码

14:10

视频：

3-2 -2 如何高效学习React源码

16:31

视频：

3-3 如何debug React源码

12:42

视频：

3-4 如何运行React测试用例

05:07

视频：

3-5 如何成为React Contributor

12:13

第4章 代码实践：打造轮子，自己的mini react框架

2 节|13分钟

展开

视频：

4-1 造轮子的优势以及步骤

04:33

视频：

4-2 搭建自己的mini react项目

08:07

第5章 React18全新底层核心运行机制：任务调度机制的代码实践

10 节|147分钟

展开

视频：

5-1 实现任务调度算法-1

03:19

视频：

5-2 实现任务调度算法-什么是最小堆-2

19:16

视频：

5-3 实现任务调度算法-实现最小堆的peek与push函数-3

14:53

视频：

5-4 实现任务调度算法-实现最小堆的pop函数-4

14:45

视频：

5-5 任务调度器scheduler

16:15

视频：

5-6 如何实现时间切片

21:52

视频：

5-7 如何实现任务调度函数入口.mp4

11:34

视频：

5-8 如何实现一个requestIdleCallback.mp4

16:25

视频：

5-9 如何调度延迟任务

26:05

视频：

5-10 总结：源码实践React底层任务调度机制

01:44

第6章 React18全新底层核心运行机制：任务调度机制源码阅读，思维拔高

2 节|26分钟

展开

视频：

6-1 剖析React中的任务调度器场景：合作式调度器 & 抢占式调度器

06:44

视频：

6-2 剖析React任务调度源码

18:47

第7章 React渲染机制：原始渲染VDOM与性能改革Fiber的源码剖析

4 节|74分钟

展开

视频：

7-1 VDOM的四大问题：what、why、where、how

26:02

视频：

7-2 -1 Fiber详解

15:12

视频：

7-3 -2 Fiber详解

16:02

视频：

7-4 掌握不同类型组件的Fiber：查看并调试

16:32

第8章 React渲染机制：React中初次渲染流程深度剖析

15 节|238分钟

展开

视频：

8-1 在浏览器DOM 节点中创建根节点：createRoot -1

11:57

视频：

8-2 -2 在浏览器DOM 节点中创建根节点：createRoot

19:59

视频：

8-3 -3 在浏览器DOM 节点中创建根节点：createRoot

04:06

视频：

8-4 -4 在浏览器DOM 节点中创建根节点：createRoot

04:56

视频：

8-5 -1 root.render与unmount函数的流程

22:20

视频：

8-6 -1 root.render与unmount函数的流程

22:20

视频：

8-7 -1 update的数据结构与算法.mp4

19:58

视频：

8-8 -2update的数据结构与算法.mp4

21:54

视频：

8-9 -1 scheduleUpdateOnFiber调度更新.mp4

06:56

视频：

8-10 -2 scheduleUpdateOnFiber调度更新

15:03

视频：

8-11 -3 scheduleUpdateOnFiber调度更新

14:03

视频：

8-12 render阶段

17:46

视频：

8-13 render阶段-beginWork

21:29

视频：

8-14 render阶段-renderRootConcurrent

09:03

视频：

8-15 commit阶段

25:37

第9章 React渲染机制：页面初次渲染原生标签代码实践

8 节|109分钟

展开

视频：

9-1 创建Fiber与FiberRoot

12:33

视频：

9-2 如何实现页面渲染的入口函数createRoot

09:25

视频：

9-3 scheduleUpdateOnFiber调度更新

09:24

视频：

9-4 render阶段

18:06

视频：

9-5 render阶段-beginWork-1

14:11

视频：

9-6 render阶段-beginWork-2

13:16

视频：

9-7 render阶段-completeWork

11:14

视频：

9-8 commit阶段

20:39

第10章 React渲染机制：手写不同组件的渲染过程，掌握其机制原理

5 节|58分钟

展开

视频：

10-1 如何实现多个原生标签子节点渲染的源码.mp4

14:47

视频：

10-2 如何实现文本节点渲染的源码.mp4

12:15

视频：

10-3 如何实现Fragment渲染的源码.mp4

19:45

视频：

10-4 如何实现类组件渲染的源码.mp4

05:28

视频：

10-5 实现函数组件渲染的源码.mp4

05:08

第11章 React开发的利器：Hooks底层分析

6 节|61分钟

展开

视频：

11-1 Hook简介

05:24

视频：

11-2 Hook规则背后的原因.mp4

06:45

视频：

11-3 函数组件的Hook源码解读.mp4

10:00

视频：

11-4 -1 useReducer源码解读.mp4

08:49

视频：

11-5 -2 useReducer源码解读

21:54

视频：

11-6 useState源码解读

07:18

第12章 React开发的利器：手写实现Hooks，掌握Hooks底层数据结构

10 节|155分钟

展开

视频：

12-1 模拟事件，初步实现useReducer

15:20

视频：

12-2 实现useReducer，掌握Hooks的底层结构实现与函数组件的状态-1

22:17

视频：

12-3 实现useReducer，掌握Hooks的底层结构实现与函数组件的状态-2

22:55

视频：

12-4 节点删除.mp4

18:12

视频：

12-5 初步实现多个节点的React VDOM DIFF-1

14:16

视频：

12-6 初步实现多个节点的React VDOM DIFF-2

18:06

视频：

12-7 完善实现React VDOM DIFF算法

17:04

视频：

12-8 如何移动DOM节点

13:14

视频：

12-9 实现useState.mp4

08:40

视频：

12-10 子节点为null、undefined、布尔值

04:28

第13章 React开发的利器：React VDOM DIFF算法源码剖析

5 节|54分钟

展开

视频：

13-1 分析不同子节点类型，React VDOM DIFF的处理

16:07

视频：

13-2 协调单个节点

09:05

视频：

13-3 协调多个子节点

19:01

视频：

13-4 协调文本节点

01:39

视频：

13-5 拓展-与Vue3 VDOM DIFF对比

07:28

第14章 React开发的利器：Hooks进阶，代码实践手动实现API

7 节|73分钟

展开

视频：

14-1 如何实现useMemo

12:00

视频：

14-2 如何实现useCallback

07:19

视频：

14-3 useMemo与useCallback

04:26

视频：

14-4 如何实现useRef

08:28

视频：

14-5 如何实现useLayoutEffect

22:15

视频：

14-6 如何实现useLayoutEffect的effect执行

11:31

视频：

14-7 如何实现useEffect的effect执行.mp4

06:14

第15章 React中的数据模式：代码实现，掌握Context实现原理

6 节|56分钟

展开

视频：

15-1 知识分析：Context简介

16:01

视频：

15-2 实现Context，掌握Context的底层结构与源码实现.mp4\_音频.mp3

05:45

视频：

15-3 实现Provider，掌握其底层实现.mp4

08:31

视频：

15-4 实现useContext与Context与Value管理，掌握其数据结构.mp4\_音频.mp3

15:39

视频：

15-5 实现Consumer.mp4

05:31

视频：

15-6 实现contextType，掌握类组件对于Context消费方式的原理

04:17

第16章 React中的数据模式：Context源码剖析，思维提高

4 节|61分钟

展开

视频：

16-1 分析Context的底层结构与源码实现

14:23

视频：

16-2 分析Provider与Context value栈管理，掌握其底层实现

20:08

视频：

16-3 分析Provider与后代组件消费context value

20:47

视频：

16-4 后代组件消费的三种方式

05:29

第17章 跨浏览器兼容的事件系统：合成事件源码剖析

7 节|81分钟

展开

视频：

17-1 React中的合成事件背景与其必要性

08:37

视频：

17-2 React中的事件注册

09:22

视频：

17-3 React中的事件绑定与事件委托

14:23

视频：

17-4 React中的事件派发(上)

13:08

视频：

17-5 React中的事件派发(下)

20:29

视频：

17-6 React合成事件的定义

13:07

视频：

17-7 不适合事件委托的事件处理

01:39

第18章 跨浏览器兼容的事件系统：合成事件实践，掌握框架级别的事件

6 节|84分钟

展开

视频：

18-1 实现事件注册

12:29

视频：

18-2 实现事件绑定与事件委托

16:07

视频：

18-3 -1实现事件派发

11:58

视频：

18-4 -2实现事件派发

13:48

视频：

18-5 实现合成事件

11:30

视频：

18-6 实现受控组件事件.mp4

18:07

第19章 性能提高：React Lanes模型源码剖析

5 节|96分钟

展开

视频：

19-1 React Lanes模型背景

17:11

视频：

19-2 React Lanes模型的应用

19:36

视频：

19-3 React Lanes 模型常用工具函数

28:27

视频：

19-4 React18新增的transition

17:10

视频：

19-5 useDeferredValue原理

13:20

第20章 性能提高：React Lanes模型手动实践

4 节|60分钟

展开

视频：

20-1 -1 实现memo

15:58

视频：

20-2 -2 实现memo

15:59

视频：

20-3 补充受控组件事件

07:11

视频：

20-4 实现lanes模型

20:17

第21章 课程总结

2 节|21分钟

展开

视频：

21-1 课程总结.mp4

09:38

视频：

21-2 拓展：哪些React未正式发布的功能.mp4

10:23

本课程已完结