成为VIP
前端跳槽突围课：React18底层源码深入剖析
从框架使用者蜕变成源码开发与贡献者，助力前端工程师顺利摆脱就业，跳槽困境
在当下就业环境下，只会框架的使用是不够的，这是很多初级工程师面临的困境。想要脱颖而出，成为具备手写框架、源码贡献等技能的高手，才能拥有更多的机会。想要这种摆脱框架黑盒状态。本课程是你的最佳选择，不仅可以深入学习React工作原理，还可以掌握源码调试技巧，手写框架的实践，以及成为源码Contributor的方法论，为你提供方位的指导和实践，助力成为一个真正有实力的高级技术人才 。
适合人群
工作一年以上的前端工程师
想要精通React
技术储备
想要精通React
有React基础
环境参数
Node.js 18+
试看链接：https://pan.baidu.com/s/13LBAKqdFXfCupJnr-G8_hA?pwd=tqr5
目录大纲：
第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
本课程已完结
