首页 实战

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

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

已完结
|
难度：高级
|
时长：共 32 小时
￥399.00
距离活动结束
立即购买
加购物车
  • 系统掌握底层设计原理
  • 深刻理解React核心概念
  • 具备React 源码调试能力
  • 快熟成长为源码Contributor
  • 具备手写mini框架实战经验
  • 熟练掌握成为高手的方法论
试看本节课 09:29
1-1 React18源码实战课程导学

课程预览

检测到您还没有关注慕课网服务号，无法接收课程更新通知。请扫描二维码即可绑定
重新观看
在当下就业环境下，会使用框架只是基本素质。想晋升高级别岗位，获得更多高薪机会，你需要熟悉框架底层原理，甚至具备手写框架等高阶技能。如果你想快速进阶，又没有方向和路径，那本课程就是你的不二之选。课程首先会带你深入React框架底层原理，掌握React源码调试技巧，之后带你手写一个框架，最后教你如何成为源码贡献者。通过体系化教学，助力你先人一步具备进阶技能，从容应对更高级别的工作挑战。
展开所有

本章介绍：

课程介绍、学习方法、学习路线

第1章 课程介绍
1 节｜10分钟
展开
  • 视频：
    1-1 React18源码实战课程导学
    试看
    09:29

本章介绍：

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

第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

本章介绍：

学习前：底层源码的高效学习方法分享，包括如何高效学习React源码，如何debug React源码，如何运行React测试用例及如何成为React Contributor 。

第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

本章介绍：

代码实践：打造轮子，自己的mini react框架，包括：造轮子的优势以及步骤，搭建自己的mini react项目。

第4章 代码实践：打造轮子，自己的mini react框架
2 节｜13分钟
展开
  • 视频：
    4-1 造轮子的优势以及步骤
    04:33
  • 视频：
    4-2 搭建自己的mini react项目
    08:07

本章介绍：

1. 掌握最小堆数据结构与算法实现 2. 掌握单线程调度器运行机制 3. 掌握任务调度的原理与源码实现

第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

本章介绍：

1. 剖析React底层调度机制 2. 分析React与合作式调度器 & 抢占式调度器 3. 分析如何避免任务饿死 4. 掌握时间切片与Aging策略 5. 掌握单线程调度器运行机制

第6章 React18全新底层核心运行机制：任务调度机制源码阅读，思维拔高
2 节｜26分钟
展开
  • 视频：
    6-1 剖析React中的任务调度器场景：合作式调度器 & 抢占式调度器
    06:44
  • 视频：
    6-2 剖析React任务调度源码
    18:47

本章介绍：

1. 掌握VDOM，什么是VDOM、VDOM实用场景以及VDOM解决了什么的问题 2. 掌握Fiber与组件之间的关系 3. 掌握不同类型组件的Fiber

第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

本章介绍：

1. 掌握React的初次渲染渲染流程 2. 掌握这个过程中的数据结构与算法 3. 掌握深度优先遍历

第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

本章介绍：

1. 从源码以及手写实现的层级解读Fiber 2. 从Fiber的执行过程，理解React选择Fiber架构的原因

第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

本章介绍：

1. 通过手写实现，掌握React中不同组件的渲染原理 2. 理解React中不同组件的区别，学会在实际项目中根据实际场景来区分选用

第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

本章介绍：

1. 分析React中的函数式编程实现 2. 分析Hooks规则的背后原因

第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

本章介绍：

1. 掌握diff原则，理解React VDOM DIFF算法的实现与原因

第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

本章介绍：

1. 通过手写实现Hooks，从而掌握Hooks底层数据结构，理解单链表与React规则的关联 2. 掌握diff原则，理解React VDOM DIFF算法的实现与原因 3. 通过useReducer/useState的实现，掌握React状态值的存储与更新

第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

本章介绍：

1. 通过实现不同Hooks API，进一步掌握各种不同Hooks的使用与底层原理，从而解决实际项目的bug与性能问题

第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

本章介绍：

1. 分析React中常见的Context数据模式 2. 通过实现与分析React Context，掌握Context实现原理

第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

本章介绍：

1. 分析React中常见的Context数据模式 2. 通过分析React Context，掌握Context实现原理

第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

本章介绍：

1. 理解React合成事件的必要性 2. 解释项目中的合成事件以及原生事件场景和bug 3. 通过自己实现React合成事件，深入理解框架级别的事件

第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

本章介绍：

1. 理解React合成事件的必要性 2. 解释项目中的合成事件以及原生事件场景和bug 3. 通过自己实现React合成事件，深入理解框架级别的事件

第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

本章介绍：

性能提高：React Lanes模型源码剖析，包括：React Lanes模型背景、模型的应用、模型常用工具函数，最后讲解React1 8新增的transition和 useDeferredValue原理 。

第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

本章介绍：

1. 分析React中的Lanes模型 2. 掌握Lanes模型对React性能的提升 3. 对比React expirationTime到Lanes模型的演变 3. 通过实现Lanes，掌握React渲染与更新的底层模式

第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

本章介绍：

总结React学习成果，温故而知新。

第21章 课程总结
2 节｜21分钟
展开
  • 视频：
    21-1 课程总结.mp4
    09:38
  • 视频：
    21-2 拓展：哪些React未正式发布的功能.mp4
    10:23
本课程已完结
适合人群
工作一年以上的前端工程师
想要精通React
技术储备
想要精通React
有React基础
环境参数
Node.js 18+
高少云
高级前端工程师
不为别的，只为提升面试通过率
尽管课程时间很长，
但没关系，我们有老师的陪伴，
还有同学之间互相鼓励，彼此帮助，
完成学习后，还能获得慕课网官方认证的证书。
立即购买
React18进阶 复杂应用+源码剖析
套餐价格：¥676.00
2门课 总价：¥747.00
立即购买
 课程介绍

前端跳槽突围课，React18底层源码深入剖析

高级  · 92人报名 ¥399.00
课程介绍 

React18+TS 通用后台管理系统解决方案落地实战

中级  · 556人报名 ¥348.00
React18从系统入门到原理剖析
套餐价格：¥629.00
2门课 总价：¥698.00
立即购买
 课程介绍

前端跳槽突围课，React18底层源码深入剖析

高级  · 92人报名 ¥399.00
课程介绍 

React18 系统入门 进阶实战《欢乐购》

初级  · 339人报名 ¥299.00
深入学习React18
套餐价格：¥629.00
2门课 总价：¥698.00
立即购买
 课程介绍

前端跳槽突围课，React18底层源码深入剖析

高级  · 92人报名 ¥399.00
课程介绍 

前端全栈进阶 Nextjs打造跨框架SaaS应用

高级  · 206人报名 ¥299.00
查看更多
数据加载中...
《前端跳槽突围课：React18底层源码深入剖析》的真实评价
综合评分：分，共 人参与
篇幅原因，只展示最近100条评价
￥399.00
立即购买
加购物车

学习咨询

选课、学习遇到问题？

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

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

意见反馈 帮助中心 APP下载
官方微信