mksz818-前端跳槽突围课：React18底层源码深入剖析[完结]

前端开发

课程简介

这门课聚焦React18底层源码，解决开发者在复杂机制下难以写出高效稳定代码、工程调优与源码级排障的痛点。React的渲染机制与Hooks是前端进阶的核心壁垒，许多开发者在面对组件更新、状态复用及并发模式时，往往只能依靠经验盲调，难以从根源理解其运行逻辑。本课通过源码级拆解，将黑盒操作转化为对底层执行流程的精准认知，帮助你从“知其然”跨越到“知其所以然”，…

已有 3 人浏览发布 2026-09-23 更新 2026-10-03

适合基础与建议先看

适合具备前端基础、掌握JS语法与基础React概念（如JSX、生命周期）的开发者。建议先看渲染机制，涵盖原生标签、文本节点、Fragment及类与函数组件的渲染过程，建立对React Fiber架构与diff算法的工程直觉；随后深入Hooks底层源码，解析规则背后的原因、函数组件Hook的调用机制，以及useReducer与useState的实现逻辑，这是理解状态管理与副作用处理的基石。

学完能独立做什么

学完能独立实现不同组件的渲染过程，读懂并手写核心Hooks，掌握Hooks底层数据结构。在工程实践中，能精准定位渲染性能瓶颈，编写自定义Hooks复用复杂逻辑，从容应对复杂状态管理与源码级排障，不再依赖经验盲调，而是基于底层原理进行架构设计与优化，真正将源码能力转化为工程优势，在面试与复杂业务中占据主动。

资料怎么配合练习

资料包包含核心源码与手写实现指引，学习时需脱离视频纯观看，结合资料包中的源码片段，动手复制代码并修改参数运行，理解状态管理与渲染流程的工程结构。通过反复拆解与重构源码，将底层逻辑转化为可复用的工程模块，在真实项目中验证对React机制的调优能力，做到学完即用，避免空谈理论。

课程目录

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

| ├──10-1 如何实现多个原生标签子节点渲染的源码.mp4 53.27M
| ├──10-2 如何实现文本节点渲染的源码.mp4 69.90M
| ├──10-3 如何实现Fragment渲染的源码.mp4 98.04M
| ├──10-4 如何实现类组件渲染的源码.mp4 26.45M
| └──10-5 实现函数组件渲染的源码.mp4 26.91M

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

| ├──11-2 Hook规则背后的原因.mp4 23.07M
| ├──11-3 函数组件的Hook源码解读.mp4 46.19M
| 鈹溾攢鈹€11-4 -1 useReducer婧愮爜瑙ｈ.mp4 36.24M
| 鈹溾攢鈹€11-5 -2 useReducer婧愮爜瑙ｈ.mp4 162.48M
| 鈹斺攢鈹€11-6 useState婧愮爜瑙ｈ.mp4 45.66M

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

| ├──12-1 模拟事件，初步实现useReducer.mp4 60.31M
| ├──12-10 子节点为null、undefined、布尔值.mp4 25.26M
| ├──12-2 实现useReducer，掌握Hooks的底层结构实现与函数组件的状态-1.mp4 106.34M
| ├──12-3 实现useReducer，掌握Hooks的底层结构实现与函数组件的状态-2.mp4 114.08M
| ├──12-4 节点删除.mp4 77.70M
| ├──12-5 初步实现多个节点的React VDOM DIFF-1.mp4 67.78M
| ├──12-6 初步实现多个节点的React VDOM DIFF-2.mp4 101.66M
| ├──12-7 完善实现React VDOM DIFF算法.mp4 87.24M
| ├──12-8 如何移动DOM节点.mp4 61.82M
| └──12-9 实现useState.mp4 48.36M

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

| ├──13-1 分析不同子节点类型，React VDOM DIFF的处理.mp4 62.71M
| ├──13-2 协调单个节点.mp4 55.97M
| ├──13-3 协调多个子节点.mp4 112.33M
| ├──13-4 协调文本节点.mp4 10.77M
| 鈹斺攢鈹€13-5 鎷撳睍-涓嶸ue3 VDOM DIFF瀵规瘮.mp4 30.68M

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

| ├──14-1 如何实现useMemo.mp4 52.05M
| ├──14-2 如何实现useCallback.mp4 35.92M
| 鈹溾攢鈹€14-3 useMemo涓巙seCallback.mp4 20.23M
| ├──14-4 如何实现useRef.mp4 44.23M
| ├──14-5 如何实现useLayoutEffect.mp4 107.00M
| ├──14-6 如何实现useLayoutEffect的effect执行.mp4 57.74M
| └──14-7 如何实现useEffect的effect执行.mp4 32.97M

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

| ├──15-1 知识分析：Context简介.mp4 57.52M
| ├──15-2 实现Context，掌握Context的底层结构与源码实现.mp4 23.65M
| ├──15-3 实现Provider，掌握其底层实现.mp4 37.63M
| ├──15-4 实现useContext与Context与Value管理，掌握其数据结构.mp4 73.89M
| ├──15-5 实现Consumer.mp4 28.35M
| └──15-6 实现contextType，掌握类组件对于Context消费方式的原理.mp4 23.00M

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

| ├──16-1 分析Context的底层结构与源码实现.mp4 91.20M
| ├──16-2 分析Provider与Context value栈管理，掌握其底层实现.mp4 87.79M
| ├──16-3 分析Provider与后代组件消费context value.mp4 138.70M
| └──16-4 后代组件消费的三种方式.mp4 38.11M

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

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

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

| ├──19-3 React Lanes 模型常用工具函数.mp4 208.21M
| 鈹溾攢鈹€19-4 React18鏂板鐨則ransition.mp4 79.02M
| └──19-5 useDeferredValue原理.mp4 109.79M

第1章课程介绍1 集

| └──1-1 React18源码实战课程导学.mp4 25.36M

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

| ├──20-1 -1 实现memo.mp4 95.77M
| ├──20-2 -2 实现memo.mp4 101.35M
| ├──20-3 补充受控组件事件.mp4 49.57M
| └──20-4 实现lanes模型.mp4 139.55M

第21章课程总结2 集

| ├──21-1 课程总结.mp4 25.16M
| └──21-2 拓展：哪些React未正式发布的功能.mp4 61.39M

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

| ├──2-1 为什么要学习React源码.mp4 21.34M
| ├──2-11 React脚手架以及企业级框架.mp4 49.46M
| ├──2-12 React 组件的常见性能优化-1.mp4 41.60M
| ├──2-13 React 组件的常见性能优化-2.mp4 62.54M
| ├──2-14 React 组件的常见性能优化-3.mp4 39.16M
| ├──2-2 React的迭代历史：那些标志性的变革，如类组件、Fiber、Hooks、Concurrent等.mp4 98.90M
| ├──2-3 Thinking in React，即用React的方式写React-1.mp4 38.41M
| ├──2-4 Thinking in React，即用React的方式写React-2.mp4 20.24M
| ├──2-5 React中的状态管理与状态管理库-1.mp4 40.14M
| ├──2-6 React中的状态管理与状态管理库-2.mp4 33.29M
| ├──2-8 React中的组件，如函数组件、类组件等.mp4 66.63M

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

| ├──3-1 -1 如何高效学习React源码.mp4 89.85M
| ├──3-2 -2 如何高效学习React源码.mp4 113.00M
| 鈹溾攢鈹€3-3 濡備綍debug React婧愮爜.mp4 79.50M
| ├──3-4 如何运行React测试用例.mp4 23.70M
| 鈹斺攢鈹€3-5 濡備綍鎴愪负React Contributor.mp4 90.08M

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

| ├──4-1 造轮子的优势以及步骤.mp4 11.64M
| └──4-2 搭建自己的mini react项目.mp4 30.82M

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

| ├──5-1 实现任务调度算法-1.mp4 7.80M
| ├──5-10 总结：源码实践React底层任务调度机制.mp4 5.85M
| ├──5-2 实现任务调度算法-什么是最小堆-2.mp4 68.54M
| ├──5-3 实现任务调度算法-实现最小堆的peek与push函数-3.mp4 67.15M
| ├──5-4 实现任务调度算法-实现最小堆的pop函数-4.mp4 78.58M
| 鈹溾攢鈹€5-5 浠诲姟璋冨害鍣╯cheduler.mp4 61.47M
| ├──5-6 如何实现时间切片.mp4 89.51M
| ├──5-7 如何实现任务调度函数入口.mp4 39.29M
| ├──5-8 如何实现一个requestIdleCallback.mp4 75.68M
| └──5-9 如何调度延迟任务.mp4 117.96M

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

| ├──6-1 剖析React中的任务调度器场景：合作式调度器 & 抢占式调度器__ev-金狮.mp4 38.21M
| └──6-2 剖析React任务调度源码.mp4 132.95M

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

| 鈹溾攢鈹€7-1 VDOM鐨勫洓澶ч棶棰橈細what銆亀hy銆亀here銆乭ow.mp4 162.63M
| └──7-4 掌握不同类型组件的Fiber：查看并调试.mp4 98.93M

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

| ├──8-1 在浏览器DOM 节点中创建根节点：createRoot -1.mp4 65.33M
| 鈹溾攢鈹€8-10 -2 scheduleUpdateOnFiber璋冨害鏇存柊.mp4 111.21M
| 鈹溾攢鈹€8-11 -3 scheduleUpdateOnFiber璋冨害鏇存柊.mp4 106.94M
| ├──8-12 render阶段.mp4 79.48M
| ├──8-13 render阶段-beginWork.mp4 129.06M
| ├──8-14 render阶段-renderRootConcurrent.mp4 75.08M
| ├──8-15 commit阶段.mp4 205.75M
| ├──8-2 -2 在浏览器DOM 节点中创建根节点：createRoot.mp4 161.77M
| ├──8-3 -3 在浏览器DOM 节点中创建根节点：createRoot.mp4 16.25M
| ├──8-4 -4 在浏览器DOM 节点中创建根节点：createRoot.mp4 28.05M
| ├──8-5 -1 root.render与unmount函数的流程.mp4 141.35M
| ├──8-6 -1 root.render与unmount函数的流程.mp4 141.22M
| ├──8-7 -1 update的数据结构与算法.mp4 124.96M
| ├──8-8 -2update的数据结构与算法【网盘分享WPFX.LINK】.mp4.mp4 160.52M
| 鈹斺攢鈹€8-9 -1 scheduleUpdateOnFiber璋冨害鏇存柊.mp4 37.19M

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