**直面组件渲染的黑盒：手写源码的价值**
很多前端工程师在业务开发中依赖 React，但往往停留在“会用 API”的层面。当遇到复杂的渲染卡顿、状态更新异常或难以追踪的性能瓶颈时，由于缺乏对内部机制的理解，只能盲目试错。这门课的核心价值不在于背诵 React18 的文档，而在于通过手写 5000 多行核心源码，拆解从虚拟 DOM 生成到真实 DOM 更新的完整链路。它解决的是“知其然不知其所以然”的困境，帮助开发者从使用者转变为理解者，掌握框架设计的底层逻辑，而不仅仅是表层的语法糖。
**适合人群与学习门槛**
这门课不适合纯前端初学者，要求学习者具备扎实的 JavaScript 基础，熟悉 ES6+ 语法，并且至少使用过 React 开发过实际项目，理解组件生命周期和 Hooks 的基本用法。你不需要背诵 React 源码的每一行代码，但需要对现有的 React 项目有感性认识，知道数据是如何驱动视图更新的。对于刚入职的前端或希望深入框架原理的资深开发者，这是非常好的进阶材料。它不涉及复杂的数学推导或底层浏览器引擎优化，重点在于代码架构设计，因此对编码逻辑清晰的人更友好。
**建议学习路径与核心模块**
建议不要线性从头看到尾，而是按照渲染流程的逻辑分块攻克。首先重点研读“元素树与 Fiber 架构”部分，理解为什么 React 18 将渲染单元拆分为 Fiber 节点，以及这种链表结构如何支持可中断渲染。这是理解后续所有机制的基础。其次，深入剖析“调度器与时间切片”，看 React 如何将耗时任务切分，让出主线程，这是解决界面卡顿的关键。最后，结合“并发特性”章节，了解 `useTransition` 和 `useDeferredValue` 在源码层面的实现原理。学完这些核心模块，你应该能够独立画出 React 18 的渲染时序图，并解释在特定代码场景下，哪些更新会被优先级降级。
**学完后的独立能力与资料配合**
完成本课程后，你将具备独立诊断复杂渲染问题的能力。例如，当你的应用出现白屏或交互延迟时，你不再只能猜测，而是能根据 Fiber 节点的更新标志定位问题源头。你还能在自定义 Hook 或第三方库中，更规范地处理状态更新与副作用，避免竞态条件。资料包中的代码片段是最佳练习伴侣，建议不要只阅读，而是跟随注释一步步实现简易版 React。特别是当阅读手写源码时，若对某个算法理解不深，可以对照原始 GitHub 代码进行比对，思考设计取舍。这种“手写+对比”的方式，能极大提升你的代码设计能力，为未来承担前端架构职责打下坚实基础。
课程目录
├── 1-课程简介/ │ └── [8.0M] 1-1 导学 ├── 2-登高望远，手写源码前的思想准备/ │ ├── [4.5M] 2-1 思想准备01-本章介绍 │ ├── [ 10M] 2-2 思想准备02-源码观 │ ├── [ 69M] 2-3 思想准备03-React是什么 │ ├── [ 29M] 2-4 思想准备04-React架构演进过程 │ ├── [5.7M] 2-5 思想准备05-树立数据结构与算法的意识 │ ├── [4.7M] 2-6 思想准备06-树立用原子视角看问题的意识 │ ├── [9.9M] 2-7 思想准备07-理解React源码学习的基本方法 │ └── [2.3M] 2-8 思想准备08-小结 └── 3-原始版-初始化渲染：实现最原始的渲染过程/ ├── [8.8M] 3-1 -本章介绍 ├── [ 25M] 3-2 -环境搭建 ├── [ 37M] 3-3 -虚拟DOM与真实DOM的实况对比 ├── [ 27M] 3-4 -JSX的相关概念和原理 ├── [ 17M] 3-5 -React和ReactDOM职责划分 ├── [ 59M] 3-6 -createElement ├── [ 60M] 3-7 -render函数 ├── [ 22M] 3-8 -setPropsForDom ├── [ 72M] 3-9 -初始化渲染调试 ├── [ 15M] 3- 10 -思考题 └── [1.1M] 3- 11 -小结 ├── 4-原始版-引入函数组件与类组件提升渲染能力/ │ ├── [3.2M] 4-1 本章介绍 │ ├── [ 30M] 4-2 组件概念介绍 │ ├── [ 47M] 4-3 实现函数组件的基础功能 │ ├── [ 47M] 4-4 类组件的基本实现 │ ├── [ 24M] 4-5 类组件的更新机制分析 │ ├── [ 61M] 4-6 类组件setState函数的实现 │ ├── [ 88M] 4-7 类组件setState函数的实现 │ ├── [ 28M] 4-8 事件合成机制原理介绍 │ ├── [ 68M] 4-9 实现事件合成机制 │ ├── [ 79M] 4- 10 实现事件合成机制 │ ├── [ 60M] 4- 11 ref原理分析 │ ├── [ 24M] 4- 12 原生标签和类组件ref的实现 │ ├── [ 46M] 4- 13 引入forwardRef的底层逻辑 │ ├── [ 39M] 4- 14 forwardRef的实现 │ ├── [ 54M] 4- 15 组件相关代码调试 │ ├── [ 12M] 4- 16 思考题与解答 │ └── [1.4M] 4- 17 小结 ├── 5-原始版-对渲染过程进行优化-DOM DIFF/ │ ├── [9.8M] 5-1 -本章介绍 │ ├── [ 50M] 5-2 原理分析 │ ├── [ 33M] 5-3 原理分析 │ ├── [ 66M] 5-4 源码实现-简单场景-1 │ ├── [ 64M] 5-5 源码实现-简单场景-2 │ ├── [107M] 5-6 源码实现-复杂场景-1 │ ├── [ 61M] 5-7 源码实现-复杂场景-2 │ ├── [ 76M] 5-8 源码实现-代码调试 │ ├── [ 55M] 5-9 源码实现-代码调试 │ ├── [ 21M] 5- 10 -思考题和解答 │ └── [1.7M] 5- 11 -小结 ├── 6-原始版-类组件的增强：生命周期/ │ ├── 【更多it资源 www.】React 18 │ ├── [3.3M] 6-1 -本章介绍 │ ├── [ 15M] 6-2 -生命周期的本质 │ ├── [ 18M] 6-3 -生命周期图的观察 │ ├── [ 82M] 6-4 -常用生命周期函数案例 │ ├── [ 48M] 6-5 -常用生命周期函数代码实现 │ ├── [ 26M] 6-6 -shouldComponentUpdate案例 │ ├── [ 39M] 6-7 -shouldComponentUpdate源码实现 │ ├── [ 46M] 6-8 -getDefirvedStateFromProps案例 │ ├── [ 26M] 6-9 -getDefirvedStateFromProp源码实现 │ ├── [ 74M] 6-10 -getSnapshotBeforeUpdate案例 │ ├── [ 68M] 6-11 -getSnapshotBeforeUpdate源码实现 │ ├── [ 73M] 6- 12 -生命周期函数代码调试 │ ├── [9.6M] 6- 13 -思考题与解答 │ └── [870K] 6- 14 -本章小结 ├── 7-原始版-进一步探索对渲染过程的性能优化/ │ ├── @更多it资源 www. │ ├── [1.8M] 7-1 -本章介绍 │ ├── [ 28M] 7-2 -PureComponent案例 │ ├── [ 29M] 7-3 -PureComponent源码实现 │ ├── [ 14M] 7-4 -memo案例 │ ├── [ 90M] 7-5 -1-memo源码实现 │ ├── [ 64M] 7-6 -2-memo源码实现 │ ├── [ 67M] 7-7 -代码调试 │ ├── [ 49M] 7-8 -思考题 │ └── [1.6M] 7-9 -小结 ├── 8-原始版-引入日常开发的利器：Hooks/ │ ├── [2.4M] 8-1 -本章介绍 │ ├── [ 24M] 8-2 -Hooks概况 │ ├── [ 16M] 8-3 -useSstate案例观察 │ ├── [100M] 8-4 -useState源码实现 │ ├── [ 16M] 8-5 -useReducer案例观察 │ ├── [ 15M] 8-6 -useReducer源码实现 │ ├── [ 39M] 8-7 -useEffect及useLayoutEffect源码实现 │ ├── [ 78M] 8-8 -useEffect及useLayoutEffect源码实现 │ ├── [ 22M] 8-9 -useRef案例和源码 │ ├── [ 33M] 8-10 -useImperativeHandle案例和源码 │ ├── [ 38M] 8- 11 -useMemo及useCallback案例 │ ├── [ 32M] 8- 12 -useMemo及useCallback源码实现 │ ├── [ 46M] 8- 13 -代码调试 │ ├── [ 14M] 8- 14 -思考题及解答 │ └── [2.4M] 8- 15 -小结 ├── 9-React18-React 性能革命：Fiber 架构的设计理念/ │ ├── [1.6M] 9-1 -本章介绍 │ ├── [ 68M] 9-2 -为什么需要Fiber架构 │ ├── [ 22M] 9-3 -Fiber架构是什么 │ ├── [ 26M] 9-4 -Fiber是什么 │ ├── [ 20M] 9-5 -双缓冲策略 │ ├── [ 30M] 9-6 -工作循环 │ ├── [ 11M] 9-7 -并发模式 │ ├── [ 10M] 9-8 -思考题及解答 │ └── [2.2M] 9-9 -本章小结 ├── 10-React18-初始化渲染/ │ ├── 【更多it资源 www.】 │ ├── [1.9M] 10-1 -本章介绍 │ ├── [ 29M] 10-2 -环境准备 │ ├── [ 59M] 10-3 -jsxDev代码实现 │ ├── [ 86M] 10-4 createRoot-1 │ ├── [107M] 10-5 createRoot-2 │ ├── [ 63M] 10-6 -createRoot的类型表达实现及调试 │ ├── [ 13M] 10-7 -render函数阶段划分 │ ├── [ 54M] 10-8 updateContainer代码实现-1 │ ├── [ 29M] 10-9 -2updateContainer代码实现 │ ├── [ 54M] 10-10 -1-scheduleUpdateOnFiber │ ├── [ 63M] 10-11 scheduleUpdateOnFiber-2 │ ├── [ 82M] 10-12 beginWork1-1 │ ├── [ 79M] 10-13 beginWork1-2 │ ├── [ 50M] 10-14 beginWork2-1 │ ├── [ 67M] 10-15 beginWork2-2 │ ├── [ 96M] 10- 16 -beginWork调试 │ ├── [ 80M] 10-17 -completeWork1 │ ├── [119M] 10-18 completeWork2-1 │ ├── [ 52M] 10-19 completeWork2-2 │ ├── [102M] 10-20 -completeWork3 │ ├── [121M] 10- 21 -completeWork调试 │ ├── [ 98M] 10-22 commitWork代码实现-1 │ ├── [114M] 10-23 commitWork代码实现-2 │ ├── [ 54M] 10- 24 -代码调试 │ ├── [ 76M] 10- 25 -函数组件 │ ├── [9.1M] 10- 26 -思考题 │ └── [ 25M] 10- 27 -小结 └── 11-React18-合成事件系统/ ├── [7.2M] 11-1 -本章介绍 ├── [ 10M] 11-2 -思路分析 ├── [ 63M] 11-3 -事件名注册 ├── [ 99M] 11-4 -注册监听事件 ├── [ 92M] 11-5 事件派发主要逻辑-1 ├── [114M] 11-6 事件派发主要逻辑-2 ├── [ 66M] 11-7 -收集监听器函数 ├── [ 68M] 11-8 -合成事件对象 ├── [ 50M] 11-9 -事件函数回调 ├── [ 53M] 11- 10 -代码调试 ├── [ 13M] 11- 11 -思考题 └── [6.8M] 11- 12 -小结 ├── 12-React18-组件更新/ │ ├── [4.5M] 12-1 -本章介绍 │ ├── [ 55M] 12-2 dom diff思路分析 1 │ ├── [ 39M] 12-3 dom diff思路分析 2 │ ├── [110M] 12-4 -单节点dom diff │ ├── [ 59M] 12-5 多节点dom diff 1 │ ├── [ 75M] 12-6 多节点dom diff 2 │ ├── [ 99M] 12-7 -多节点dom diff 3 │ ├── [ 32M] 12-8 多节点dom diff 4 │ ├── [ 62M] 12-9 多节点dom diff 5 │ ├── [7.3M] 12- 10 -思考题和解答 │ └── [7.7M] 12- 11 -小结 ├── 13-React18-Hooks/ │ ├── [6.2M] 13-1 -本章介绍 │ ├── [ 48M] 13-2 useReducer挂载-1 │ ├── [ 61M] 13-3 useReducer挂载-2 │ ├── [115M] 13-4 -useReducer触发更新 │ ├── [101M] 13-5 useReducer更新渲染1-1 │ ├── [ 61M] 13-6 useReducer更新渲染1-2 │ ├── [ 70M] 13-7 -useReducer更新渲染2-1 │ ├── [ 63M] 13-8 -useReducer更新渲染2-2 │ ├── [ 70M] 13-9 -useReducer更新渲染3 │ ├── [ 95M] 13- 10 -useReducer调试 │ ├── [112M] 13- 11 -useState │ ├── [ 67M] 13-12 -useEffect挂载-1 │ ├── [ 70M] 13-13 -useEffect挂载-2 │ ├── [ 71M] 13-14 useEffect更新1-1 │ ├── [ 70M] 13-15 useEffect更新1-2 │ ├── [117M] 13-16 -useEffect更新2 │ ├── [ 37M] 13- 17 -useEffect调试 │ ├── [ 91M] 13- 18 -useLayoutEffect │ ├── [7.6M] 13- 19 -思考题及解答 │ └── [6.5M] 13- 20 -小结 ├── 14-React18-Lane模型与优先级/ │ ├── [ 14M] 14-1 -本章介绍 │ ├── [ 16M] 14-2 -本章介绍 │ ├── [ 77M] 14-3 -二进制的计算 │ ├── [ 47M] 14-4 -最小堆算法原理 │ ├── [ 41M] 14-5 -最小堆算法实现-1 │ ├── [ 64M] 14-6 -最小堆算法实现-2 │ ├── [ 50M] 14-7 -React18优先级体系 │ └── [ 14M] 14-8 -小结 ├── 15-React18-调度系统/ │ ├── [ 25M] 15-1 -本章介绍 │ ├── [ 95M] 15-2 -调度核心逻辑1 │ ├── [ 75M] 15-3 调度核心逻辑2-1 │ ├── [ 58M] 15-4 调度核心逻辑2-2 │ ├── [ 80M] 15-5 -ReactFiberLane和ReactEventPriority-1 │ ├── [ 88M] 15-6 -ReactFiberLane和ReactEventPriority-2 │ ├── [122M] 15-7 Lane模型下的更新队列-1 │ ├── [105M] 15-8 Lane模型下的更新队列-2 │ ├── [ 32M] 15-9 Lane模型下的更新队列-3 … 其余 8 项略，目录共 208 项
