如果你已经用 React 写过两三个项目，能用 Hooks 拼出业务页面，但一遇到「为什么 setState 之后拿不到新值」「useEffect 到底什么时候清副作用」这类问题就靠背结论，那这门课值得看一看。它不是教你再做一遍 TodoList，而是带着你把 React 18 的运行时拆开，自己写一遍。换句话说，它解决的是「会用」和「知道为什么这么用」之间那层窗户纸。

它对应哪些真实工作场景

日常写业务时，你可能不会天天翻源码，但几个场景绕不开：排查一个组件莫名多渲染了几次，被要求做性能优化；接手别人封装的 Hook，读不懂里面的依赖设计；团队在讨论要不要上并发特性，你需要判断它到底改了什么。这些问题如果只停留在 API 层面，讨论就会变成玄学。课程把调度、协调、渲染这些环节摊开实现，你在调 bug 时脑子里会有更清楚的一张图，而不是只凭经验猜。

学完你能独立做什么

  • 自己动手搭出一个能跑通函数组件、Hooks、基本更新的精简 React 运行时，理解它和真实版本的差距在哪。
  • 读懂核心流程的调用链路，知道一次更新从触发到页面变化中间经过了什么。
  • 遇到依赖数组、闭包、渲染次数这类问题时，能定位到是哪个环节出的偏差，而不是反复试错。
  • 具备继续读官方源码的入口，知道该从哪个模块下手，而不是面对整个仓库不知从何看起。

要说明的是，这里的「实现」是教学意义上的重现，目的是让你看懂机制，不是让你造一个替代品去上线。把预期放对，学起来会顺很多。

资料适合什么基础

门槛比想象中高一点。你需要熟悉 JS 的闭包、原型、this 这些基本功，写过一段时间 React 函数组件，对 Fiber、并发这些词至少听过但不求懂。如果连 Hooks 的基本用法都没独立用过，直接跟这门课会吃力，建议先拿业务项目练手。反过来，如果你已经在做前端两三年，想从前端工程师往更深一层走，或者准备面试里那些原理向的问题，这门课的信息密度是够的。

怎么用这套资料

跟着敲是关键。这门课的价值不在看完，而在动手——每个阶段都自己写一遍，写不出来再回看对应的讲解，比单纯看视频有效得多。建议一次只推进一小块，比如先跑通最基础的渲染，再往上加更新和 Hooks，别急着一次性铺完。遇到卡住的地方，先自己调试，课程里讲的调试方法本身就是重点。源码部分不用一次背下来，理解流程脉络即可，后面用得到再回头查。

最后提醒一句：这类内容学完不会立刻变成某个具体岗位的敲门砖，它更多是提升你解决问题的底子。如果你只想快速上手做项目，可能有更直接的资料；如果你想真正搞懂手里的这套工具，那它可以作为一个扎实的起点。

课程目录

035.「16-1」实现noop-renderer【优质资源‖关注：cunWorkNotes 解锁】.mp4
 [80.2 MB] 059.「23-4」实现bailout策略（下）.mp4
 [82.3 MB] 045.「20」实现useRef.mp4
 [62.7 MB] 062.「23-7」实现useMemo、useCallback【资源精选‖更多关注：CunworkNotes】.mp4
 [41.5 MB] 053.「22-5」实现试验性hook —— use.mp4
 [59.5 MB] 040.「18-1」实现并发更新的交互部分.mp4
 [30.3 MB] 047.「21-2」实现Context逻辑【资源精选‖更多关注：CunworkNotes】.mp4
 [30.4 MB] 049.「22-1」Suspense的作用.mp4
 [16.2 MB] 042.「18-3」实现并发更新的状态计算.mp4
 [118.9 MB] 058.「23-3」实现bailout策略（上）.mp4
 [44.9 MB] 039.「17-2」实现并发更新Demo【优质资源‖关注：cunWorkNotes 解锁】.mp4
 [65.0 MB] 028.「13」实现Fragment【资源精选‖更多关注：CunworkNotes】.mp4
 [80.5 MB] 004.「2-2」实现JSX的打包【不易整理‖请关注：CunWorkNoteS】.mp4
 [49.1 MB] 026.「12-2」实现多节点Diff.mp4
 [65.7 MB] 029.「14-1」批处理的概念【优质资源‖关注：cunWorkNotes 解锁】.mp4
 [32.0 MB] 013.「6-3」实现ReactDOM.mp4
 [44.2 MB] 005.「2-3」实现第一种调试方式【持续更新‖免费提供：CunworknoteS】.mp4
 [18.5 MB] 014.「6-4」调试ReactDOM【不易整理‖请关注：CunWorkNoteS】.mp4
 [23.8 MB] 010.「5-2」实现mount流程的completeWork【不易整理‖请关注：CunWorkNoteS】.mp4
 [42.6 MB] 022.「10-2」update流程commit阶段.mp4
 [33.5 MB] 019.「9-1」实现第三种调试方式.mp4
 [24.1 MB] 009.「5-1」实现mount流程的beginWork.mp4
 [68.9 MB] 006.「3」实现Reconciler架构.mp4
 [66.5 MB] 003.「2-1」实现JSX.mp4
 [40.2 MB] 015.「7-1」实现FunctionComponent.mp4
 [19.0 MB] 024.「11」实现事件系统.mp4
 [71.4 MB] 031.「14-3」实现调度阶段.mp4
 [36.9 MB] 002.「1」搭建项目架构.mp4
 [40.8 MB] 012.「6-2」实现Mutation子阶段.mp4
 [33.6 MB] 030.「14-2」实现Lane模型.mp4
 [32.4 MB] 008.「4-2」接入状态更新机制.mp4
 [54.1 MB] 020.「9-2」测试JSX.mp4
 [42.3 MB] 001.课程介绍.mp4
 [5.0 MB] 017.「8-1」实现Hooks架构.mp4
 [45.7 MB] 023.「10-3」update流程处理useState.mp4
 [58.6 MB] 027.「12-3」Diff算法处理commit阶段.mp4
 [34.7 MB] 011.「6-1」实现commit阶段.mp4
 [16.0 MB] 025.「12-1」实现单节点Diff.mp4
 [20.4 MB] 018.「8-2」实现useState.mp4
 [50.5 MB] 021.「10-1」update流程render阶段.mp4
 [47.5 MB] 016.「7-2」实现第二种调试方式.mp4
 [22.2 MB] 007.「4-1」实现状态更新机制.mp4
 [22.4 MB] 033.「15-1」实现useEffect数据结构.mp4
 [58.7 MB] 061.「23-6」实现React.memo.mp4
 [67.7 MB] 032.「14-4」改造更新流程.mp4
 [43.3 MB] 057.「23-2」性能优化策略简介.mp4
 [12.5 MB] 038.「17-1」实现同步更新Demo.mp4
 [34.6 MB] 055.「22-7」完善Suspense.mp4
 [86.4 MB] 037.「16-3」测试useEffect.mp4
 [31.8 MB] 063.「23-8」context兼容bailout策略.mp4
 [94.4 MB] 036.「16-2」打包noop-renderer.mp4
 [31.5 MB] 060.「23-5」实现eagerState策略.mp4
 [40.9 MB] 051.「22-3」实现Suspense工作流程.mp4
 [67.9 MB] 034.「15-2」实现useEffect工作流程.mp4
 [107.0 MB] 056.「23-1」性能优化的一般思路.mp4
 [20.7 MB] 052.「22-4」如何触发Suspense？.mp4
 [13.6 MB] 041.「18-2」实现并发更新的策略逻辑.mp4
 [63.4 MB] 048.「21-3」实现useContext.mp4
 [27.5 MB] 046.「21-1」实现Context数据结构.mp4
 [12.4 MB] 044.「19-2」实现useTransition.mp4
 [67.2 MB] 043.「19-1」useTransition的作用.mp4
 [18.3 MB] 050.「22-2」Suspense的实现思路.mp4
 [87.0 MB] 054.「22-6」实现unwind流程.mp4
 [101.2 MB] 适合人群 React开发者 前端进阶者 框架源码爱好者 学习收获 理解React18原理 提升源码调试能力 掌握React核心功能实现 祝您学习愉快！ 学有所成，前程似锦！