收藏

React18内核探秘:手写React高质量源码迈向高阶开发

通过手写5000+源码,深入理解 React 内部机制,提升 React 复杂代码设计能力

手写 React 高质量源码,迈向高阶开发

¥599.00
难度 高级 时长 45小时 学习人数 206 综合评分 8.89
  • 第1章 课程简介 试看 1 节 | 8分钟

    导学介绍课程内容,及你所获得~

    收起列表

    • 视频: 1-1 导学 (07:34) 试看
  • 第2章 登高望远,手写源码前的思想准备 8 节 | 54分钟

    建立全局观,为后续在源码中吸取精华做好思想准备,避免就源码而分析源码。

    收起列表

    • 视频: 2-1 思想准备01-本章介绍 (03:12)
    • 视频: 2-2 思想准备02-源码观 (06:31)
    • 视频: 2-3 思想准备03-React是什么 (20:46)
    • 视频: 2-4 思想准备04-React架构演进过程 (08:39) 试看
    • 视频: 2-5 思想准备05-树立数据结构与算法的意识 (02:58)
    • 视频: 2-6 思想准备06-树立用原子视角看问题的意识 (02:19)
    • 视频: 2-7 思想准备07-理解React源码学习的基本方法 (07:28)
    • 视频: 2-8 思想准备08-小结 (01:19)
  • 第3章 原始版-初始化渲染:实现最原始的渲染过程 11 节 | 122分钟

    实现初次渲染的基础逻辑,初步体验源码的魅力。

    收起列表

    • 视频: 3-1 -本章介绍 (04:30)
    • 视频: 3-2 -环境搭建 (11:29)
    • 视频: 3-3 -虚拟DOM与真实DOM的实况对比 (15:09)
    • 视频: 3-4 -JSX的相关概念和原理 (10:53)
    • 视频: 3-5 -React和ReactDOM职责划分 (04:41)
    • 视频: 3-6 -createElement (22:14)
    • 视频: 3-7 -render函数 (21:18) 试看
    • 视频: 3-8 -setPropsForDom (08:30)
    • 视频: 3-9 -初始化渲染调试 (15:07)
    • 视频: 3-10 -思考题 (06:31)
    • 视频: 3-11 -小结 (00:45)
  • 第4章 原始版-引入函数组件与类组件提升渲染能力 17 节 | 205分钟

    理解类组件与函数组件的本质,理解组件在React中的地位。

    收起列表

    • 视频: 4-1 本章介绍 (02:10)
    • 视频: 4-2 组件概念介绍 (09:31)
    • 视频: 4-3 实现函数组件的基础功能 (14:38)
    • 视频: 4-4 类组件的基本实现 (15:32)
    • 视频: 4-5 类组件的更新机制分析 (10:12)
    • 视频: 4-6 类组件setState函数的实现 (17:39)
    • 视频: 4-7 类组件setState函数的实现 (18:05)
    • 视频: 4-8 事件合成机制原理介绍 (07:58)
    • 视频: 4-9 实现事件合成机制 (25:00)
    • 视频: 4-10 实现事件合成机制 (21:02)
    • 视频: 4-11 ref原理分析 (15:08)
    • 视频: 4-12 原生标签和类组件ref的实现 (06:11)
    • 视频: 4-13 引入forwardRef的底层逻辑 (12:48)
    • 视频: 4-14 forwardRef的实现 (11:22)
    • 视频: 4-15 组件相关代码调试 (11:05)
    • 视频: 4-16 思考题与解答 (04:32)
    • 视频: 4-17 小结 (01:09)
  • 第5章 原始版-对渲染过程进行优化-DOM DIFF 11 节 | 147分钟

    DOM DIFF是React进行性能优化的一个重要举措,也是面试的常考点。

    收起列表

    • 视频: 5-1 -本章介绍 (03:19)
    • 视频: 5-2 原理分析 (20:25)
    • 视频: 5-3 原理分析 (13:04)
    • 视频: 5-4 源码实现-简单场景-1 (19:11)
    • 视频: 5-5 源码实现-简单场景-2 (16:13)
    • 视频: 5-6 源码实现-复杂场景-1 (21:48)
    • 视频: 5-7 源码实现-复杂场景-2 (15:04)
    • 视频: 5-8 源码实现-代码调试 (17:03)
    • 视频: 5-9 源码实现-代码调试 (11:33)
    • 视频: 5-10 -思考题和解答 (07:18)
    • 视频: 5-11 -小结 (01:32)
  • 第6章 原始版-类组件的增强:生命周期 14 节 | 134分钟

    为类组件添加生命周期的能力,增强类组件的功能。

    收起列表

    • 视频: 6-1 -本章介绍 (02:47)
    • 视频: 6-2 -生命周期的本质 (04:45)
    • 视频: 6-3 -生命周期图的观察 (07:06)
    • 视频: 6-4 -常用生命周期函数案例 (22:21)
    • 视频: 6-5 -常用生命周期函数代码实现 (11:31)
    • 视频: 6-6 -shouldComponentUpdate案例 (07:42)
    • 视频: 6-7 -shouldComponentUpdate源码实现 (07:57)
    • 视频: 6-8 -getDefirvedStateFromProps案例 (13:49)
    • 视频: 6-9 -getDefirvedStateFromProp源码实现 (05:15)
    • 视频: 6-10 -getSnapshotBeforeUpdate案例 (17:02)
    • 视频: 6-11 -getSnapshotBeforeUpdate源码实现 (15:07)
    • 视频: 6-12 -生命周期函数代码调试 (14:22)
    • 视频: 6-13 -思考题与解答 (03:13)
    • 视频: 6-14 -本章小结 (00:44)
  • 第7章 原始版-进一步探索对渲染过程的性能优化 9 节 | 84分钟

    性能优化的思想贯穿React源码学习的始终。

    收起列表

    • 视频: 7-1 -本章介绍 (01:32)
    • 视频: 7-2 -PureComponent案例 (08:42)
    • 视频: 7-3 -PureComponent源码实现 (11:08)
    • 视频: 7-4 -memo案例 (04:40)
    • 视频: 7-5 -1-memo源码实现 (19:07)
    • 视频: 7-6 -2-memo源码实现 (12:31)
    • 视频: 7-7 -代码调试 (13:49)
    • 视频: 7-8 -思考题 (10:58)
    • 视频: 7-9 -小结 (01:27)
  • 第8章 原始版-引入日常开发的利器:Hooks 15 节 | 135分钟

    Hooks在日常开发中已经取代了类组件,可以说是函数式编程的胜利。

    收起列表

    • 视频: 8-1 -本章介绍 (01:47)
    • 视频: 8-2 -Hooks概况 (05:36)
    • 视频: 8-3 -useSstate案例观察 (05:14)
    • 视频: 8-4 -useState源码实现 (20:04)
    • 视频: 8-5 -useReducer案例观察 (06:06)
    • 视频: 8-6 -useReducer源码实现 (04:56)
    • 视频: 8-7 -useEffect及useLayoutEffect源码实现 (08:46)
    • 视频: 8-8 -useEffect及useLayoutEffect源码实现 (25:24)
    • 视频: 8-9 -useRef案例和源码 (08:31)
    • 视频: 8-10 -useImperativeHandle案例和源码 (09:55)
    • 视频: 8-11 -useMemo及useCallback案例 (12:42)
    • 视频: 8-12 -useMemo及useCallback源码实现 (08:51)
    • 视频: 8-13 -代码调试 (10:54)
    • 视频: 8-14 -思考题及解答 (03:49)
    • 视频: 8-15 -小结 (02:18)
  • 第9章 React18-React 性能革命:Fiber 架构的设计理念 9 节 | 62分钟

    Fiber 架构,是 React 性能提升的里程碑,掌握其思想,为后续手写源码打下基础。

    收起列表

    • 视频: 9-1 -本章介绍 (01:18)
    • 视频: 9-2 -为什么需要Fiber架构 (18:33)
    • 视频: 9-3 -Fiber架构是什么 (05:25)
    • 视频: 9-4 -Fiber是什么 (08:57)
    • 视频: 9-5 -双缓冲策略 (07:44)
    • 视频: 9-6 -工作循环 (09:23)
    • 视频: 9-7 -并发模式 (04:06)
    • 视频: 9-8 -思考题及解答 (03:58)
    • 视频: 9-9 -本章小结 (01:58)
  • 第10章 React18-初始化渲染 27 节 | 416分钟

    Fiber架构下的初始化渲染与原始版的初始化渲染有什么不同?

    收起列表

    • 视频: 10-1 -本章介绍 (01:22)
    • 视频: 10-2 -环境准备 (11:10)
    • 视频: 10-3 -jsxDev代码实现 (18:45)
    • 视频: 10-4 createRoot-1 (17:15)
    • 视频: 10-5 createRoot-2 (21:28)
    • 视频: 10-6 -createRoot的类型表达实现及调试 (19:08)
    • 视频: 10-7 -render函数阶段划分 (03:05)
    • 视频: 10-8 updateContainer代码实现-1 (14:18)
    • 视频: 10-9 -2updateContainer代码实现 (07:21)
    • 视频: 10-10 -1-scheduleUpdateOnFiber (16:15)
    • 视频: 10-11 scheduleUpdateOnFiber-2 (15:56)
    • 视频: 10-12 beginWork1-1 (17:01)
    • 视频: 10-13 beginWork1-2 (15:33)
    • 视频: 10-14 beginWork2-1 (13:06)
    • 视频: 10-15 beginWork2-2 (13:31)
    • 视频: 10-16 -beginWork调试 (18:52)
    • 视频: 10-17 -completeWork1 (22:22)
    • 视频: 10-18 completeWork2-1 (24:32)
    • 视频: 10-19 completeWork2-2 (10:49)
    • 视频: 10-20 -completeWork3 (20:30)
    • 视频: 10-21 -completeWork调试 (24:57)
    • 视频: 10-22 commitWork代码实现-1 (24:48)
    • 视频: 10-23 commitWork代码实现-2 (22:20)
    • 视频: 10-24 -代码调试 (17:25)
    • 视频: 10-25 -函数组件 (14:47)
    • 视频: 10-26 -思考题 (04:24)
    • 视频: 10-27 -小结 (04:56)
  • 第11章 React18-合成事件系统 12 节 | 156分钟

    事件合成系统为什么存在?其理论基础是什么?

    收起列表

    • 视频: 11-1 -本章介绍 (02:13)
    • 视频: 11-2 -思路分析 (05:45)
    • 视频: 11-3 -事件名注册 (22:07)
    • 视频: 11-4 -注册监听事件 (22:55)
    • 视频: 11-5 事件派发主要逻辑-1 (21:04)
    • 视频: 11-6 事件派发主要逻辑-2 (23:34)
    • 视频: 11-7 -收集监听器函数 (14:58)
    • 视频: 11-8 -合成事件对象 (13:24)
    • 视频: 11-9 -事件函数回调 (10:10)
    • 视频: 11-10 -代码调试 (12:02)
    • 视频: 11-11 -思考题 (04:10)
    • 视频: 11-12 -小结 (03:00)
  • 第12章 React18-组件更新 11 节 | 134分钟

    Fiber架构下的更新流程,相较于原始版多了哪些环节。

    收起列表

    • 视频: 12-1 -本章介绍 (01:43)
    • 视频: 12-2 dom diff思路分析 1 (16:54)
    • 视频: 12-3 dom diff思路分析 2 (12:09)
    • 视频: 12-4 -单节点dom diff (21:41)
    • 视频: 12-5 多节点dom diff 1 (11:44)
    • 视频: 12-6 多节点dom diff 2 (14:55)
    • 视频: 12-7 -多节点dom diff 3 (19:29)
    • 视频: 12-8 多节点dom diff 4 (13:32)
    • 视频: 12-9 多节点dom diff 5 (15:43)
    • 视频: 12-10 -思考题和解答 (03:14)
    • 视频: 12-11 -小结 (02:18)
  • 第13章 React18-Hooks 20 节 | 295分钟

    Fiber架构下的Hooks,其代码组织结构有什么特征?

    收起列表

    • 视频: 13-1 -本章介绍 (02:10)
    • 视频: 13-2 useReducer挂载-1 (19:53)
    • 视频: 13-3 useReducer挂载-2 (14:23)
    • 视频: 13-4 -useReducer触发更新 (25:52)
    • 视频: 13-5 useReducer更新渲染1-1 (22:11)
    • 视频: 13-6 useReducer更新渲染1-2 (12:23)
    • 视频: 13-7 -useReducer更新渲染2-1 (13:53)
    • 视频: 13-8 -useReducer更新渲染2-2 (13:25)
    • 视频: 13-9 -useReducer更新渲染3 (16:42)
    • 视频: 13-10 -useReducer调试 (21:25)
    • 视频: 13-11 -useState (22:00)
    • 视频: 13-12 -useEffect挂载-1 (14:42)
    • 视频: 13-13 -useEffect挂载-2 (14:10)
    • 视频: 13-14 useEffect更新1-1 (14:00)
    • 视频: 13-15 useEffect更新1-2 (13:44)
    • 视频: 13-16 -useEffect更新2 (22:52)
    • 视频: 13-17 -useEffect调试 (07:30)
    • 视频: 13-18 -useLayoutEffect (18:29)
    • 视频: 13-19 -思考题及解答 (03:16)
    • 视频: 13-20 -小结 (01:55)
  • 第14章 React18-Lane模型与优先级 8 节 | 87分钟

    二进制在Lane模型中的妙用。

    收起列表

    • 视频: 14-1 -本章介绍 (03:41)
    • 视频: 14-2 -本章介绍 (03:41)
    • 视频: 14-3 -二进制的计算 (23:17)
    • 视频: 14-4 -最小堆算法原理 (14:02)
    • 视频: 14-5 -最小堆算法实现-1 (14:10)
    • 视频: 14-6 -最小堆算法实现-2 (15:07)
    • 视频: 14-7 -React18优先级体系 (10:10)
    • 视频: 14-8 -小结 (02:46)
  • 第15章 React18-调度系统 11 节 | 166分钟

    调度系统。

    收起列表

    • 视频: 15-1 -本章介绍 (05:34)
    • 视频: 15-2 -调度核心逻辑1 (19:16)
    • 视频: 15-3 调度核心逻辑2-1 (14:53)
    • 视频: 15-4 调度核心逻辑2-2 (12:26)
    • 视频: 15-5 -ReactFiberLane和ReactEventPriority-1 (15:49)
    • 视频: 15-6 -ReactFiberLane和ReactEventPriority-2 (17:21)
    • 视频: 15-7 Lane模型下的更新队列-1 (26:05)
    • 视频: 15-8 Lane模型下的更新队列-2 (21:39)
    • 视频: 15-9 Lane模型下的更新队列-3 (08:13)
    • 视频: 15-10 -加入优先级的初始化渲染 (21:19)
    • 视频: 15-11 -本章小结 (02:28)
  • 第16章 React18-并发渲染 5 节 | 45分钟

    最小堆算法的利用,与工作循环的良好配合。

    收起列表

    • 视频: 16-1 -本章介绍 (01:23)
    • 视频: 16-2 -同步渲染 (16:20)
    • 视频: 16-3 -并发渲染 (20:15)
    • 视频: 16-4 -思考题 (02:02)
    • 视频: 16-5 -小结 (04:13)
本课程已完结

试看

全部试看小节



讲师

杨艺韬 资深架构师

某独角兽资深架构师,12年工作经验,曾担任研发经理、创业团队技术负责人。负责过支撑数十亿交易额的业务系统开发,有丰富的全栈开发经验,同时精通前端、后端两大方向。长期专注于原理源码的研究,兼备技术广度与深度。

课程预览

检测到您还没有关注慕课网服务号,无法接收课程更新通知。请扫描二维码即可绑定
重新观看
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题?

扫码添加指导老师 1V1 帮助你!

添加后老师会第一时间解决你的问题