为什么现在必须啃 React 18 源码

前端招聘市场正在经历残酷的结构性调整。初级切图员和只会调包的工程师需求断崖式下跌，而薪资天花板却要求中级工程师具备底层视野。这门课解决的核心痛点是：**当面试官问及 React 渲染机制、并发特性或 Fiber 架构时，你不仅知道“怎么用”，还能讲清楚“为什么这样设计”**。React 18 的并发渲染（Concurrent Features）彻底改变了应用的性能边界，不理解源码，就无法在复杂场景中做出正确的性能优化决策。这门课不是教你再次封装 API，而是带你进入框架的设计哲学，这是从“开发者”跨越到“架构者”的关键分水岭。

适合谁？前置要求是什么？

**适合人群：**
- 有 1-3 年前端经验，熟练掌握 React 使用，但对其内部机制一知半解，面试常因底层问题卡壳的职场人。
- 目标进入大厂核心前端团队，需要证明技术深度和解决问题能力的工程师。
- 希望具备手写简化版 React 能力，从而真正掌控前端技术栈的高级开发者。

**不适合人群：**
- 完全不懂 React 基础语法和 Hooks 用法的初学者（请先补足基础）。
- 只关心业务快速上线、不愿深入底层原理的纯业务型开发者。

**前置知识：**
- 熟练使用 React 17+ 进行项目开发
- 理解 JavaScript 原型链、闭包、Event Loop 等核心概念
- 熟悉 TypeScript 基本语法（源码阅读必备）

怎么学？资料如何配合实践？

**学习路径建议：**
1. **先看 Fiber 架构与调度原理**：这是 React 18 的核心，理解任务拆分和时间切片机制，这是后续所有优化的基础。
2. **再攻渲染流程**：深入 Diff 算法、Commit 阶段、DOM 更新细节，掌握源码调试技巧（推荐 Chrome DevTools + 本地源码断点）。
3. **最后动手实践**：跟随课程逐步手写一个简化版 React，包括 VDOM、Scheduler、Reconciler，通过实现巩固理解。

**资料使用策略：**
- 课程视频：按章节顺序观看，重点记录源码关键节点和函数调用链。
- 配套源码：务必在本地拉取 React 18 源码，对照视频中的调试演示，亲手打断点观察状态变化。
- 手写框架作业：不要跳过，这是将知识内化的唯一途径。遇到卡顿回头重看对应视频片段。

**学完能独立做什么：**
- 能清晰阐述 React 18 并发渲染的实现原理及性能优势
- 能独立调试和优化大型 React 应用的性能瓶颈
- 能手写核心调度器和协调器，理解虚拟 DOM 的本质
- 具备阅读和贡献开源框架源码的能力，为技术面试建立绝对优势

**特别提醒：** 源码学习枯燥且耗时，建议每天固定 2 小时专注学习，配合即时编码实践。不要追求一次性读懂所有代码，先建立宏观架构图，再逐层深入细节。

课程目录

├── 第1章 课程介绍/ │ └── [ 24M] 1-1React18源码实战课程导学 ├── 第2章 学前技术储备：React核心知识点讲解/ │ ├── [ 22M] 2-1为什么要学习React源码 │ ├── [ 95M] 2-2React的迭代历史：那些标志性的变革，如类组件、Fiber、Hooks、Concurrent等 │ ├── [ 38M] 2-3ThinkinginReact，即用React的方式写React-1 │ ├── [ 19M] 2-4ThinkinginReact，即用React的方式写React-2 │ ├── [ 39M] 2-5React中的状态管理与状态管理库-1 │ ├── [ 31M] 2-6React中的状态管理与状态管理库-2 │ ├── [ 20M] 2-7state(状态)与props(属性) │ ├── [ 62M] 2-8React中的组件，如函数组件、类组件等 │ ├── [ 38M] 2-9Hooks │ ├── [ 60M] 2-10Context │ ├── [ 45M] 2-11React脚手架以及企业级框架 │ ├── [ 43M] 2-12React组件的常见性能优化-1 │ ├── [ 56M] 2-13React组件的常见性能优化-2 │ └── [ 36M] 2-14React组件的常见性能优化-3 ├── 第3章 学习前：底层源码的高效学习方法分享/ │ ├── [ 74M] 3-1-1如何高效学习React源码 │ ├── [ 82M] 3-2-2如何高效学习React源码 │ ├── [ 64M] 3-3如何debugReact源码 │ ├── [ 22M] 3-4如何运行React测试用例 │ └── [ 57M] 3-5如何成为ReactContributor ├── 第4章 代码实践：打造轮子，自己的mini react框架/ │ ├── [ 11M] 4-1造轮子的优势以及步骤 │ └── [ 30M] 4-2搭建自己的minireact项目 ├── 第5章 React18全新底层核心运行机制：任务调度机制的代码实践/ │ ├── [7.5M] 5-1实现任务调度算法-1 │ ├── [ 63M] 5-2实现任务调度算法-什么是最小堆-2 │ ├── [ 67M] 5-3实现任务调度算法-实现最小堆的peek与push函数-3 │ ├── [ 76M] 5-4实现任务调度算法-实现最小堆的pop函数-4 │ ├── [ 55M] 5-5任务调度器scheduler │ ├── [ 90M] 5-6如何实现时间切片 │ ├── [ 33M] 5-7如何实现任务调度函数入口 │ ├── [ 71M] 5-8如何实现一个requestIdleCallback │ ├── [111M] 5-9如何调度延迟任务 │ └── [4.6M] 5-10总结：源码实践React底层任务调度机制 ├── 第6章 React18全新底层核心运行机制：任务调度机制源码阅读，思维拔高/ │ ├── [ 34M] 6-1剖析React中的任务调度器场景：合作式调度器&抢占式调度器 │ └── [ 96M] 6-2剖析React任务调度源码 ├── 第7章 React渲染机制：原始渲染VDOM与性能改革Fiber的源码剖析/ │ ├── [134M] 7-1VDOM的四大问题：what、why、where、how │ ├── [ 50M] 7-2-1Fiber详解 │ ├── [ 55M] 7-3-2Fiber详解 │ └── [ 84M] 7-4掌握不同类型组件的Fiber：查看并调试 ├── 第8章 React渲染机制：React中初次渲染流程深度剖析/ │ ├── [ 62M] 8-1在浏览器DOM节点中创建根节点：createRoot-1 │ ├── [105M] 8-2-2在浏览器DOM节点中创建根节点：createRoot │ ├── [ 14M] 8-3-3在浏览器DOM节点中创建根节点：createRoot │ ├── [ 24M] 8-4-4在浏览器DOM节点中创建根节点：createRoot │ ├── [115M] 8-5-1root.render与unmount函数的流程 │ ├── [115M] 8-6-1root.render与unmount函数的流程 │ ├── [104M] 8-7-1update的数据结构与算法 │ ├── [115M] 8-8-2update的数据结构与算法 │ ├── [ 35M] 8-9-1scheduleUpdateOnFiber调度更新 │ ├── [ 78M] 8-10-2scheduleUpdateOnFiber调度更新 │ ├── [ 72M] 8-11-3scheduleUpdateOnFiber调度更新 │ ├── [ 64M] 8-12render阶段 │ ├── [110M] 8-13render阶段-beginWork │ ├── [ 48M] 8-14render阶段-renderRootConcurrent │ └── [130M] 8-15commit阶段 ├── 第9章 React渲染机制：页面初次渲染原生标签代码实践/ │ ├── 【更多it资源 www.】 │ ├── [ 44M] 9-1创建Fiber与FiberRoot │ ├── [ 38M] 9-2如何实现页面渲染的入口函数createRoot │ ├── [ 32M] 9-3scheduleUpdateOnFiber调度更新 │ ├── [ 81M] 9-4render阶段 │ ├── [ 52M] 9-5render阶段-beginWork-1 │ ├── [ 51M] 9-6render阶段-beginWork-2 │ ├── [ 48M] 9-7render阶段-completeWork │ └── [ 85M] 9-8commit阶段 ├── 第10章 React渲染机制：手写不同组件的渲染过程，掌握其机制原理/ │ ├── [ 48M] 10-1如何实现多个原生标签子节点渲染的源码 │ ├── [ 62M] 10-2如何实现文本节点渲染的源码 │ ├── [ 98M] 10-3如何实现Fragment渲染的源码 │ ├── [ 26M] 10-4如何实现类组件渲染的源码 │ └── [ 23M] 10-5实现函数组件渲染的源码 ├── 第11章 React开发的利器：Hooks底层分析/ │ ├── [ 16M] 11-1Hook简介 │ ├── [ 21M] 11-2Hook规则背后的原因 │ ├── [ 42M] 11-3函数组件的Hook源码解读 │ ├── [ 33M] 11-4-1useReducer源码解读 │ ├── [114M] 11-5-2useReducer源码解读 │ └── [ 36M] 11-6useState源码解读 ├── 第12章 React开发的利器：手写实现Hooks，掌握Hooks底层数据结构/ │ ├── [ 53M] 12-1模拟事件，初步实现useReducer │ ├── [101M] 12-2实现useReducer，掌握Hooks的底层结构实现与函数组件的状态-1 │ ├── [107M] 12-3实现useReducer，掌握Hooks的底层结构实现与函数组件的状态-2 │ ├── [ 75M] 12-4节点删除 │ ├── [ 70M] 12-5初步实现多个节点的ReactVDOMDIFF-1 │ ├── [ 93M] 12-6初步实现多个节点的ReactVDOMDIFF-2 │ ├── [ 81M] 12-7完善实现ReactVDOMDIFF算法 │ ├── [ 59M] 12-8如何移动DOM节点 │ ├── [ 44M] 12-9实现useState │ └── [ 22M] 12-10子节点为null、undefined、布尔值 ├── 第13章 React开发的利器：React VDOM DIFF算法源码剖析/ │ ├── [ 52M] 13-1分析不同子节点类型，ReactVDOMDIFF的处理 │ ├── [ 46M] 13-2协调单个节点 │ ├── @更多it资源 www. │ ├── [ 99M] 13-3协调多个子节点 │ ├── [7.9M] 13-4协调文本节点 │ └── [ 26M] 13-5拓展-与Vue3VDOMDIFF对比 ├── 第14章 React开发的利器：Hooks进阶，代码实践手动实现API/ │ ├── [ 49M] 14-1如何实现useMemo │ ├── [ 33M] 14-2如何实现useCallback │ ├── [ 20M] 14-3useMemo与useCallback │ ├── [ 40M] 14-4如何实现useRef │ ├── [102M] 14-5如何实现useLayoutEffect │ ├── [ 55M] 14-6如何实现useLayoutEffect的effect执行 │ └── [ 27M] 14-7如何实现useEffect的effect执行 ├── 第15章 React中的数据模式：代码实现，掌握Context实现原理/ │ ├── [ 55M] 15-1知识分析：Context简介 │ ├── [ 22M] 15-2实现Context，掌握Context的底层结构与源码实现_音频.mp3 │ ├── [ 37M] 15-3实现Provider，掌握其底层实现 │ ├── [ 71M] 15-4实现useContext与Context与Value管理，掌握其数据结构_音频.mp3 │ ├── [ 27M] 15-5实现Consumer │ └── [ 21M] 15-6实现contextType，掌握类组件对于Context消费方式的原理 ├── 第16章 React中的数据模式：Context源码剖析，思维提高/ │ ├── [ 74M] 16-1分析Context的底层结构与源码实现 │ ├── [ 84M] 16-2分析Provider与Contextvalue栈管理，掌握其底层实现 │ ├── [105M] 16-3分析Provider与后代组件消费contextvalue │ └── [ 28M] 16-4后代组件消费的三种方式 ├── 第17章 跨浏览器兼容的事件系统：合成事件源码剖析/ │ ├── [ 41M] 17-1React中的合成事件背景与其必要性 │ ├── [ 44M] 17-2React中的事件注册 │ ├── [ 74M] 17-3React中的事件绑定与事件委托 │ ├── [ 68M] 17-4React中的事件派发（上） │ ├── [107M] 17-5React中的事件派发（下） │ ├── [ 67M] 17-6React合成事件的定义 │ └── [8.2M] 17-7不适合事件委托的事件处理 ├── 第18章 跨浏览器兼容的事件系统：合成事件实践，掌握框架级别的事件/ │ ├── [ 64M] 18-1实现事件注册 │ ├── [ 85M] 18-2实现事件绑定与事件委托 │ ├── [ 61M] 18-3-1实现事件派发 │ ├── [ 69M] 18-4-2实现事件派发 │ ├── [ 58M] 18-5实现合成事件 │ └── [ 93M] 18-6实现受控组件事件 ├── 第19章 性能提高：React Lanes模型源码剖析/ │ ├── [ 70M] 19-1ReactLanes模型背景 │ ├── [ 97M] 19-2ReactLanes模型的应用 │ ├── [148M] 19-3ReactLanes模型常用工具函数 │ ├── [ 80M] 19-4React18新增的transition │ └── [ 69M] 19-5useDeferredValue原理 ├── 第20章 性能提高：React Lanes模型手动实践/ │ ├── [ 84M] 20-1-1实现memo │ ├── [ 83M] 20-2-2实现memo │ ├── [ 37M] 20-3补充受控组件事件 │ └── [103M] 20-4实现lanes模型 └── 第21章 课程总结/ ├── [ 22M] 21-1课程总结 └── [ 53M] 21-2拓展：哪些React未正式发布的功能 └── 资料代码/