正版资源React18内核探秘：手写React高质量源码迈向高阶开发
《React18内核探秘：手写React高质量源码迈向高阶开发》通过手写5000+源码，深入理解 React 内部机制，提升 React 复杂代码设计能力【技能收获】学完可掌握：Vue / 前端工程化、网络安全 / CTF、React 前端。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生与
这份资料解决什么问题
大部分 React 教程停在「怎么用」：讲完 JSX、Hooks、状态管理就收尾，开发者能拼业务，却说不清一次 setState 之后到底发生了什么——为什么更新是异步批处理的、Fiber 树是怎么一步步构建和替换的、调度器凭什么判断哪个任务更急。这门课把方向倒过来，从使用者的位置往内核里走，用自己写一遍的方式把 React 18 的运行时拆开。它真正想训练的不是「会写 React」，而是能读懂复杂前端框架源码、能设计出可维护的组件抽象的那层能力。
技术栈与整体结构
课程围绕 React 18 的 concurrent 能力展开，主线是三块互相咬合的东西：渲染器这一侧的 Fiber 架构与协调流程，调度器这一侧的时间切片与优先级队列，以及对外暴露的 Hooks 与更新机制。技术栈是纯 JavaScript，不依赖构建工具的黑盒，手写规模在 5000 行源码量级，意味着它不是零散的代码片段，而是能跑起来的一整套最小实现。章节推进大致是先把虚拟 DOM 的创建和 diff 跑通，再补上 Fiber 节点与 workLoop 的协作，最后接入调度优先级、lane 模型和 Hooks 链表。每一块都建立在前一块可运行的基础上，不是各讲各的。
可复用的模块与知识点
跟着写完之后，手上会留下几个能直接迁移到实际项目里的东西：
- 一个极简的 Fiber 与 reconciliation 实现，能对照 React 源码理解 beginWork、completeWork 的分工。
- 基于 MessageChannel 或模拟实现的任务调度循环，理解时间切片如何避免长任务阻塞主线程。
- 用链表组织的 Hook 结构，能解释 React 为什么对 Hooks 调用顺序如此敏感。
- 一套优先级与中断恢复的模型，对应 React 18 的 transition 和并发渲染。
这些东西的价值不在「再造一个 React」，而在于以后遇到性能问题、遇到奇怪的更新时序时，你有能力从调度和协调的角度去定位，而不是靠猜和试。
怎么用这份资料
建议按章节顺序推进，因为后一章的实现依赖前一章留下的结构，跳过基础直接看调度会断电。每完成两到三节，不要只跑通代码，而是合上资料自己复现一遍，再把差异记进笔记——这些差异点往往就是你对 React 认知的盲区。源码对照阅读时，把课上的最小实现和 React 官方仓库对应模块并排看，能明显感觉到哪些是核心不变量、哪些是工程上的妥协。最后可以给自己定个目标：不参考资料，独立搭出一个支持 Hooks、支持优先级调度的最小运行时，跑通一个列表更新和并发输入的 Demo，这比看完视频更能说明问题。
适合谁
已经能熟练写 React 业务、但想弄清内部机制的中级前端；准备读或正在读 React 源码、被 Fiber 和 lane 模型卡住的开发者；以及需要设计组件库或状态管理方案、希望从框架层借鉴思路的人。如果你还没写过组件、不了解基本的 Hooks 用法，这份资料会偏深，建议先把基础工程实践补上再来。
通过手写5000+源码，深入理解 React 内部机制，提升 React 复杂代码设计能力
课程推荐
《React18内核探秘：手写React高质量源码迈向高阶开发》通过手写5000+源码，深入理解 React 内部机制，提升 React 复杂代码设计能力【技能收获】学完可掌握：Vue / 前端工程化、网络安全 / CTF、React 前端。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生与自动化运维仍是企业 IT 刚需方向，认证 + 实战项目组合能显著提升面试通过率，适合向中高级运维或架构岗进阶。 若你已有一定编程或运维基础，本课程可帮助你在现有技能栈上快速叠加热门方向能力，提升求职时的项目说服力与薪资谈判空间。
视频目录（189 节）
* 1-1 导学.mp4
* 2-1 思想准备01-本章介绍.mp4
* 2-2 思想准备02-源码观.mp4
* 2-3 思想准备03-React是什么.mp4
* 2-4 思想准备04-React架构演进过程.mp4
* 2-5 思想准备05-树立数据结构与算法的意识.mp4
* 2-6 思想准备06-树立用原子视角看问题的意识.mp4
* 2-7 思想准备07-理解React源码学习的基本方法.mp4
* 2-8 思想准备08-小结.mp4
* 3-1 -本章介绍.mp4
* 3-2 -环境搭建.mp4
* 3-3 -虚拟DOM与真实DOM的实况对比.mp4
* 3-4 -JSX的相关概念和原理.mp4
* 3-5 -React和ReactDOM职责划分.mp4
* 3-6 -createElement.mp4
* 3-7 -render函数.mp4
* 3-8 -setPropsForDom.mp4
* 3-9 -初始化渲染调试.mp4
* 3-10 -思考题.mp4
* 3-11 -小结.mp4
* 4-1 本章介绍.mp4
* 4-2 组件概念介绍.mp4
* 4-3 实现函数组件的基础功能.mp4
* 4-4 类组件的基本实现.mp4
* 4-5 类组件的更新机制分析.mp4
* 4-6 类组件setState函数的实现.mp4
* 4-7 类组件setState函数的实现.mp4
* 4-8 事件合成机制原理介绍.mp4
* 4-9 实现事件合成机制.mp4
* 4-10 实现事件合成机制.mp4
* 4-11 ref原理分析.mp4
* 4-12 原生标签和类组件ref的实现.mp4
* 4-13 引入forwardRef的底层逻辑.mp4
* 4-14 forwardRef的实现.mp4
* 4-15 组件相关代码调试.mp4
* 4-16 思考题与解答.mp4
* 4-17 小结.mp4
* 5-1 -本章介绍.mp4
* 5-2 原理分析.mp4
* 5-3 原理分析.mp4
* 5-4 源码实现-简单场景-1.mp4
* 5-5 源码实现-简单场景-2.mp4
* 5-6 源码实现-复杂场景-1.mp4
* 5-7 源码实现-复杂场景-2.mp4
* 5-8 源码实现-代码调试.mp4
* 5-9 源码实现-代码调试.mp4
* 5-10 -思考题和解答.mp4
* 5-11 -小结.mp4
* 6-1 -本章介绍.mp4
* 6-2 -生命周期的本质.mp4
* 6-3 -生命周期图的观察.mp4
* 6-4 -常用生命周期函数案例.mp4
* 6-5 -常用生命周期函数代码实现.mp4
* 6-6 -shouldComponentUpdate案例.mp4
* 6-7 -shouldComponentUpdate源码实现.mp4
* 6-8 -getDefirvedStateFromProps案例.mp4
* 6-9 -getDefirvedStateFromProp源码实现.mp4
* 6-10 -getSnapshotBeforeUpdate案例.mp4
* 6-11 -getSnapshotBeforeUpdate源码实现.mp4
* 6-12 -生命周期函数代码调试.mp4
* 6-13 -思考题与解答.mp4
* 6-14 -本章小结.mp4
* 7-1 -本章介绍.mp4
* 7-2 -PureComponent案例.mp4
* 7-3 -PureComponent源码实现.mp4
* 7-4 -memo案例.mp4
* 7-5 -1-memo源码实现.mp4
* 7-6 -2-memo源码实现.mp4
* 7-7 -代码调试.mp4
* 7-8 -思考题.mp4
* 7-9 -小结.mp4
* 8-1 -本章介绍.mp4
* 8-2 -Hooks概况.mp4
* 8-3 -useSstate案例观察.mp4
* 8-4 -useState源码实现.mp4
* 8-5 -useReducer案例观察.mp4
* 8-6 -useReducer源码实现.mp4
* 8-7 -useEffect及useLayoutEffect源码实现.mp4
* 8-8 -useEffect及useLayoutEffect源码实现.mp4
* 8-9 -useRef案例和源码.mp4
* 8-10 -useImperativeHandle案例和源码.mp4
* 8-11 -useMemo及useCallback案例.mp4
* 8-12 -useMemo及useCallback源码实现.mp4
* 8-13 -代码调试.mp4
* 8-14 -思考题及解答.mp4
* 8-15 -小结.mp4
* 9-1 -本章介绍.mp4
* 9-2 -为什么需要Fiber架构.mp4
* 9-3 -Fiber架构是什么.mp4
* 9-4 -Fiber是什么.mp4
* 9-5 -双缓冲策略.mp4
* 9-6 -工作循环.mp4
* 9-7 -并发模式.mp4
* 9-8 -思考题及解答.mp4
* 9-9 -本章小结.mp4
* 10-1 -本章介绍.mp4
* 10-2 -环境准备.mp4
* 10-3 -jsxDev代码实现.mp4
* 10-4 createRoot-1.mp4
* 10-5 createRoot-2.mp4
* 10-6 -createRoot的类型表达实现及调试.mp4
* 10-7 -render函数阶段划分.mp4
* 10-8 updateContainer代码实现-1.mp4
* 10-9 -2updateContainer代码实现.mp4
* 10-10 -1-scheduleUpdateOnFiber.mp4
* 10-11 scheduleUpdateOnFiber-2.mp4
* 10-12 beginWork1-1.mp4
* 10-13 beginWork1-2.mp4
* 10-14 beginWork2-1.mp4
* 10-15 beginWork2-2.mp4
* 10-16 -beginWork调试.mp4
* 10-17 -completeWork1.mp4
* 10-18 completeWork2-1.mp4
* 10-19 completeWork2-2.mp4
* 10-20 -completeWork3.mp4
* 10-21 -completeWork调试.mp4
* 10-22 commitWork代码实现-1.mp4
* 10-23 commitWork代码实现-2.mp4
* 10-24 -代码调试.mp4
* 10-25 -函数组件.mp4
* 10-26 -思考题.mp4
* 10-27 -小结.mp4
* 11-1 -本章介绍.mp4
* 11-2 -思路分析.mp4
* 11-3 -事件名注册.mp4
* 11-4 -注册监听事件.mp4
* 11-5 事件派发主要逻辑-1.mp4
* 11-6 事件派发主要逻辑-2.mp4
* 11-7 -收集监听器函数.mp4
* 11-8 -合成事件对象.mp4
* 11-9 -事件函数回调.mp4
* 11-10 -代码调试.mp4
* 11-11 -思考题.mp4
* 11-12 -小结.mp4
* 12-1 -本章介绍.mp4
* 12-2 dom diff思路分析 1.mp4
* 12-3 dom diff思路分析 2.mp4
* 12-4 -单节点dom diff.mp4
* 12-5 多节点dom diff 1.mp4
* 12-6 多节点dom diff 2.mp4
* 12-7 -多节点dom diff 3.mp4
* 12-8 多节点dom diff 4.mp4
* 12-9 多节点dom diff 5.mp4
* 12-10 -思考题和解答.mp4
* 12-11 -小结.mp4
* 13-1 -本章介绍.mp4
* 13-2 useReducer挂载-1.mp4
* 13-3 useReducer挂载-2.mp4
* 13-4 -useReducer触发更新.mp4
* 13-5 useReducer更新渲染1-1.mp4
* 13-6 useReducer更新渲染1-2.mp4
* 13-7 -useReducer更新渲染2-1.mp4
* 13-8 -useReducer更新渲染2-2.mp4
* 13-9 -useReducer更新渲染3.mp4
* 13-10 -useReducer调试.mp4
* 13-11 -useState.mp4
* 13-12 -useEffect挂载-1.mp4
* 13-13 -useEffect挂载-2.mp4
* 13-14 useEffect更新1-1.mp4
* 13-15 useEffect更新1-2.mp4
* 13-16 -useEffect更新2.mp4
* 13-17 -useEffect调试.mp4
* 13-18 -useLayoutEffect.mp4
* 13-19 -思考题及解答.mp4
* 13-20 -小结.mp4
* 14-1 -本章介绍.mp4
* 14-2 -本章介绍.mp4
* 14-3 -二进制的计算.mp4
* 14-4 -最小堆算法原理.mp4
* 14-5 -最小堆算法实现-1.mp4
* 14-6 -最小堆算法实现-2.mp4
* 14-7 -React18优先级体系.mp4
* 14-8 -小结.mp4
* 15-1 -本章介绍.mp4
* 15-2 -调度核心逻辑1.mp4
* 15-3 调度核心逻辑2-1.mp4
* 15-4 调度核心逻辑2-2.mp4
* 15-5 -ReactFiberLane和ReactEventPriority-1.mp4
* 15-6 -ReactFiberLane和ReactEventPriority-2.mp4
* 15-7 Lane模型下的更新队列-1.mp4
* 15-8 Lane模型下的更新队列-2.mp4
* 15-9 Lane模型下的更新队列-3.mp4
* 15-10 -加入优先级的初始化渲染.mp4
* 15-11 -本章小结.mp4
* 16-1 -本章介绍.mp4
* 16-2 -同步渲染.mp4
* 16-3 -并发渲染.mp4
* 16-4 -思考题.mp4
* 16-5 -小结.mp4
