这门课解决什么工作场景

很多前端工程师在面试高级岗位或面对复杂性能瓶颈时，常因"只知道用，不知道原理"而失分。比如 setState 为什么在合成事件和原生事件中有不同的批处理行为？Concurrent Mode 到底如何打断渲染？Suspense 的降级逻辑是什么？这些问题在实际工作中直接决定你能否独立排查疑难杂症。

这门课不教你写 Hello World，而是带你钻进 React 16+ 的内部，搞清楚 Fiber、Scheduler 和 Reconciler 是如何协作的。如果你已经熟练使用 React 开发项目，但想从"调包侠"进阶为能进行框架层面优化的工程师，这门课是填补底层认知缺口的务实选择。

学习门槛与路径

本课程不适合零基础初学者。它要求你已有扎实的 JavaScript 基础——理解闭包、原型链、Promise，以及对 React 日常开发的熟练经验——会写 Class Component 和 Hooks，至少独立完成过两个以上中大型项目。否则容易迷失在细节中，产生挫败感。课程结构清晰，建议严格按顺序推进，不要跳章学习。

前两章是地基，重点搞懂 JSX 的编译产物、React Element 与 Component 的本质区别，以及 Hooks 的链表存储机制。这些是后续理解更新流程的前提。第三章进入核心，务必配合图示理解 Fiber 树的结构，弄懂 Render 阶段和 Commit 阶段的分工。第四章是难点，Fiber Scheduler 涉及时间切片和优先级调度，建议反复观看，结合代码调试观察任务切换过程。

资料包中的视频讲解配合官方文档阅读效果最佳。遇到抽象概念（如 expiration time）时，暂停视频尝试在脑中推演一遍执行流程，比被动观看更有效。建议每天投入一至两小时，两周内完成基础章节，Fiber Scheduler 部分可延长至一周。

学完能独立做什么

完成本课程后，你将具备以下能力：第一，能独立分析 React 应用的渲染性能瓶颈，区分是不必要的重渲染还是调度阻塞；第二，能看懂并调试复杂的异步更新逻辑，理解 Concurrent Mode 的实际落地场景；第三，在面试中能清晰阐述 React 从 Class 到 Hooks、从同步到并发的演进逻辑，展现系统性思维。

需要提醒的是，源码阅读枯燥且抽象。它的价值在于"解惑"而非"入门"。如果你只是想快速上手 React 开发，建议先看官方教程。这门课适合已经遇到瓶颈、想要突破的工程师。学完后，你不仅能写出更高效的代码，还能在与团队讨论架构方案时有更坚实的底气。

课程目录

第1章 课程导学 试看 1 节 | 12分钟 1-1 课程导学 (11:08).mp4
 第2章 基础知识 React API 一览 试看 

12 节 | 124分钟 2-1 准备工作 (11:07).mp4
 2-2 JSX到JavaScript的转换 (07:17).mp4
 2-3 react-element (11:08).mp4
 2-4 react-component (08:46).mp4
 2-5 react-ref (06:40).mp4
 2-6 forward-ref (06:55).mp4
 2-7 context (10:26).mp4
 2-8 concurrent-mode (09:32).mp4
 2-9 suspense-and-lazy (09:32).mp4
 2-

10 hooks (11:02).mp4
 2-

11 children (22:34).mp4
 2-

12 others (08:28).mp4
 第3章 React中的更新 试看 7 节 | 98分钟 3-1 react-dom-render (25:41).mp4
 3-2 react-fiber-root (10:45).mp4
 3-3 react-fiber (12:50).mp4
 3-4 react-update-and-updateQueue (14:24).mp4
 3-5 react-expiration-time (15:50).mp4
 3-6 different-expirtation-time (11:29).mp4
 3-7 react-setState-forceUpdate (06:55).mp4
 第4章 Fiber Scheduler 

11 节 | 172分钟 4-1 总结流程概览 (20:04).mp4
 4-2 scheduleWork (22:13).mp4
 4-3 requestWork (09:49).mp4
 4-4 batchedUpdates (15:12).mp4
 4-5 reactScheduler（1） (12:54).mp4
 4-6 reactScheduler（2） (12:39).mp4
 4-7 reactScheduler（3） (20:10).mp4
 4-8 reactScheduler（4） (14:19).mp4
 4-9 performWork (18:43).mp4
 4-

10 renderRoot (14:00).mp4
 4-

11 最后补充 (11:41).mp4
 第5章 各类组件的Update 

13 节 | 155分钟 5-1 入口和优化 (17:47).mp4
 5-2 FunctionalComponent的更新 (07:06).mp4
 5-3 reconcilerChildren (26:36).mp4
 5-4 reconcilerChildren-array (23:57).mp4
 5-5 updateClassComponent (27:01).mp4
 5-6 ClassComponent的更新 (09:10).mp4
 5-7 IndeterminateComponent组件类型和其更新过程 (07:03).mp4
 5-8 HostRoot的更新 (05:11).mp4
 5-9 HostComponent和HostText的更新 (08:29).mp4
 5-

10 Poratl组件的更新 (05:11).mp4
 5-

11 ForwardRef的更新 (02:54).mp4
 5-

12 Mode组件的更新 (04:55).mp4
 5-

13 Memo组件的更新 (09:16).mp4
 第6章 完成节点任务 9 节 | 108分钟 6-1 completeUnitOfWork的整体流程和意义 (24:12).mp4
 6-2 重设childExpirationTime (06:54).mp4
 6-3 completWork具体做了什么 (04:00).mp4
 6-4 初次渲染中completeWork对于DOM节点的创建和appendAllChild算法 (16:50).mp4
 6-5 初次渲染中如何进行DOM节点属性初始化操作 (14:22).mp4
 6-6 更新DOM时进行的diff判断 (08:24).mp4
 6-7 completeWork阶段对于HostText的更新 (03:21).mp4
 6-8 renderRoot中对于错误的处理 (14:03).mp4
 6-9 unwindWork以及React中的错误处理 (15:02).mp4
 第7章 commitRoot 8 节 | 96分钟 7-1 commitRoot的总体工作内容 (11:31).mp4
 7-2 invokeGuardedCallback开发时的帮助方法 (13:44).mp4
 7-3 commitRoot第一个操作-获取快照 (04:57).mp4
 7-4 commitAllHostEffects总体做了哪些事情 (06:23).mp4
 7-5 commitPlacement插入新的子节点的操作 (17:31).mp4
 7-6 commitWork更新节点属性的过程 (11:50).mp4
 7-7 commitWork删除节点的操作过程 (17:47).mp4
 7-8 commitLifecycles调用生命周期方法 (11:23).mp4
 第8章 功能详解：基础 

13 节 | 197分钟 8-1 context-stack (12:21).mp4
 8-2 遗留context-api的实现过程（1） (17:06).mp4
 8-3 遗留context-api的实现过程（2） (15:19).mp4
 8-4 新context的实现 (22:36).mp4
 8-5 ref的实现过程 (09:25).mp4
 8-6 hydrate-是否需要hydrate的判断 (06:44).mp4
 8-7 hydrate-更新开始判断节点是否可以hydrate (11:35).mp4
 8-8 hydrate-再completeWork中复用可hydrate的节点 (16:09).mp4
 8-9 event事件系统初始化-注入平台事件插件 (20:12).mp4
 8-

10 event事件监听的过程 (14:24).mp4
 8-

11 event-事件触发的过程 (21:16).mp4
 8-

12 event-事件对象的生产过程 (19:40).mp4
 8-

13 event查漏补缺 (09:58).mp4
 第9章 suspense and priority 7 节 | 104分钟 9-1 优先级和任务挂起的含义（1） (14:48).mp4
 9-2 优先级和任务挂起的含义（2） (14:35).mp4
 9-3 两个expirationTime的不同作用 (11:55).mp4
 9-4 Suspense组件同步模式下的更新 (24:12).mp4
 9-5 Suspense组件同步渲染模式补充 (08:43).mp4
 9-6 Suspense组件异步模式下的更新 (20:24).mp4
 9-7 retrySuspendedWork所做的事情 (08:35).mp4
 第10章 功能详解：Hooks 6 节 | 100分钟 10-1 什么是Hooks以及他的用法 (22:29).mp4
 10-2 Hooks的定义以及执行前后的准备和重置 (17:54).mp4
 10-3 useState的实现原理和注意事项（1） (13:38).mp4
 10-4 useState的实现原理和注意事项（2） (13:59).mp4
 10-5 useEffect和useLayoutEffect的实现原理和区别 (23:37).mp4
 10-6 其他Hooks的实现 (08:20).mp4
 第11章 课程总结 1 节 | 13分钟 11-1 课程总结 (12:05).mp4