思否编程- 卡颂-自顶向下学 React 源码

这门课解决的是「会用 React，但说不清为什么」的问题

很多人写 React 写到一定阶段会卡住：组件为什么重复渲染、setState 之后到底发生了什么、key 换了为什么列表状态就乱了、Fiber 到底是什么东西。日常业务里靠经验能绕过去，一旦遇到性能问题或者面试追问原理，就只能背结论。这门课针对的正是这个断层——它不教你怎么写组件，而是带你把 React 的内部运转拆开看一遍，重点是渲染流程、Fiber 架构和 Diff 这几块真正影响写代码判断的部分。

需要说明的是，这不是一门面向零基础的课。如果你还没独立写过几个 React 项目，没被状态更新和渲染时机坑过，看源码会非常痛苦，收益也低。它适合的是已经能熟练使用 React、写过半年以上业务代码，想从「知道怎么用」走到「知道为什么这么设计」的人。转行者如果刚学完基础语法，建议先放一放，等有实际项目经验再回来。

建议的观看顺序：先理念，再架构，最后啃实现

课程按理念、架构、实现三层展开，这个顺序不要打乱。开头几节讲设计理念和架构演进，看起来偏概念，但它是后面所有源码细节的坐标系——不理解 React 为什么要把更新拆成可中断的单元，后面看调度逻辑只会一头雾水。接着是 Fiber 架构的工作原理，这是整门课的主干，也是理解并发特性的前提。最后进入实现篇，从 Diff 算法这类具体机制入手，配合源码目录结构和调试方法的讲解，把抽象概念落到代码上。

建议先看「如何学习 React 源码」和「如何调试源码」这两节，先把工具链和阅读方法准备好，再往下走。否则很容易变成看视频时点头、关掉就忘。看的过程中最好开着 React 仓库，跟着断点走一遍，哪怕只跟通一条更新链路，也比被动看完十节强。

学完之后能独立做什么，资料怎么配合练

学完比较现实的目标是：能自己读懂一次状态更新从触发到提交的完整链路，能解释 Fiber 节点和调和过程的关系，遇到重复渲染或列表状态错乱时，能定位到是 Diff 策略还是更新调度的问题，而不是靠试。面试里被问到 React 原理，也能讲出自己的理解而不是复述八股。

练习上，别指望看完就掌握。每看完一块，回到自己的项目里找一个对应场景验证：比如故意改 key 观察行为差异，或者用调试工具跟一次渲染。资料里的视频和图示适合第一遍建立框架，第二遍再对照源码逐个函数看。源码阅读本身很枯燥，配合真实项目里的问题去看，才不容易半途放弃。