这张地图提供依赖顺序、学习深度与上下文。把它当作导航系统：从头走到尾、从当前水平进入，或并行学习算法。
如果前置知识已经很自然，你不必一定从阶段 01 开始。
如果 Scope、Closures、Prototypes、异步行为或 Browser APIs 还不够稳定，这里最适合开始。
从阶段 01 开始 →已经熟悉 JavaScript如果你已经能够顺畅解释 Closures、Promises、Event Loop、Objects 和 Modules，可以从这里开始。
从阶段 03 开始 →已经在构建 React 应用当 Render 周期、Effects、Refs、Context、Composition 以及 Server/Client 边界都已经清晰时，可以从这里继续。
从阶段 05 开始 →课次数量只是规模参考。遇到有用或有趣的内容，可以多停留一些时间。
在加入框架复杂度之前，为 Values、Scope、Functions、Objects、Prototypes、Coercion 与 Modules 建立可靠的心智模型。
React 和 Next.js 持续依赖 JavaScript 的行为。如果这一层模糊，框架规则就会显得随意。
你能够解释一段 JavaScript 为什么会这样运行，而不仅是它输出什么。
你能够阅读陌生代码，而不必猜测 Scope、References 或 Object Lookup。
从语法走向 Runtime 行为：Event Loop、Promises、async/await、网络、DOM、Storage、错误处理与性能。
最困难的前端 Bug 往往来自 Timing、Lifecycle、Network 或 Browser State，而不是语法本身。
你可以按执行顺序追踪异步代码，并区分 Microtasks 与 Tasks。
你能识别 Cancellation、Cleanup、Storage、Event Propagation 与性能成本等浏览器问题。
当你想在较长的仓库答案之间查看更短、更精选的说明时，可以使用 JavaScript 笔记。
把 React 作为一种 Rendering 模型来学习，而不是一组 Hooks。先从 Components、State、Identity、Render/Commit、Events 与 Composition 开始。
一旦 Render 模型清晰，Hooks 就不再像孤立规则，而会变成可预测的工具。
你可以解释什么会触发 Render，以及 React 在多次 Render 之间会保留或重置什么。
你可以根据 Data Flow 而不是习惯来决定组件边界和 State Ownership。
进一步学习 Synchronization、Escape Hatches、Shared State、Memoization、Suspense、Server Components、Routing、Testing 与 Legacy Context。
到了这里，生产环境中的 React 已经是架构问题：选择正确边界通常比多记一个 API 更重要。
你可以判断什么时候真正需要 Effect，以及什么时候 Derived State 或 Event Handler 更合适。
你可以用 Trade-offs 来讨论性能与 State Management，而不是套用固定口号。
在 React 资料库中切换到 Custom Hooks 或 Project Patterns，看看这些概念如何组合成代码。
从架构角度学习 App Router：Layouts、React Server Components、Client 边界、Route Handlers、Server Actions、Caching、Streaming、Metadata 与 Rendering 选择。
Next.js 的大多数困惑来自把浏览器、React、Server、Cache 与 Request-time 关注点混在一起。这一阶段会把这些层拆开。
你可以判断代码应该运行在哪里，并解释为什么这个边界很重要。
你可以比较 Static、Dynamic、Cached、Streamed 与 Mutation 流程，而不会把它们当成互不相关的功能。
当 JavaScript 基础足够熟练后，并行开启这条路径。先学习数据结构、搜索、排序、递归、Hashing 与复杂度。
当你把算法看作表示方式与 Trade-offs 的选择，而不是要死记的谜题时，算法会更容易。
你可以根据访问、插入、排序与内存需求来选择数据结构。
你可以用 Invariants、步骤与复杂度解释算法，而不是背诵代码。
从单个算法转向可复用模式：Traversal、Shortest Paths、Connectivity、Greedy、Backtracking、Memoization 与 Dynamic Programming。
当你先识别问题家族，再选择具体算法时，高级问题就会变得可控。
在写代码之前，你已经能识别 Graph、Greedy、Backtracking 与 DP 的问题形态。
你可以比较多个有效方案，并解释为什么某个方案在特定约束下更合适。
这里没有期末考试。利用这一阶段回顾现在已经相互连接的主题：Closures 与 Hooks、Event Loop 与 Effects、Caching 与 Next.js、Trees 与 UI、Complexity 与 Performance。
掌握来自连接。当你能从语言、框架、架构与算法多个角度理解一个概念时，它才真正稳固。
你可以在底层 JavaScript 行为与高层应用架构之间自由切换。
你拥有一张地图，可以重新访问薄弱或感兴趣的区域，而不必从头重走整条路径。
这不是时间表——只是避免被动滚动和学习过载的一种方式。
先选一个概念和它的完整答案。不要追求数量。
逐行阅读一个小例子，并把每一行与概念对应起来。
沿着一个相关主题继续，让这个概念成为知识网络的一部分，而不是孤立事实。
隔一段时间重新阅读是有价值的。没有要求必须一次把一个书架读完。
理解心智模型，并能用一个小例子解释它。
了解常见权衡、边界情况，以及它在真实代码中的表现。
当主题与你的工作或兴趣有关时，再阅读内部原理或高级变体。
当你感到迷失时就回到这页。选择最近且清晰的依赖点，读一点，再沿着最合理的连接继续。