学习路线图
本站按“学习意图”分区：Learn（技能）、Guides（做事）、Reference（契约）、Explanation（机制）。下面这张路线图告诉你：先读什么、后读什么、为什么。
三条路径（先选主线，再分支）
- 产品开发线：快速做出可靠功能（表单、数据获取、路由、测试）。
- 性能与体验线：并发原语、Suspense 边界、Profiling、大列表/虚拟化。
- 机制与架构线：渲染模型、调度、Effect 语义、SSR/流式/RSC 心智模型。
依赖关系图（先心智模型，再 API）
React 的主题并不是彼此独立的。如果顺序错了，就会变成“背 API”，遇到问题很难推理。
text
Foundations
-> Components/JSX/Props
-> State model (render is a pure calculation)
-> Render vs Commit (what can happen during render?)
-> Effects (sync vs async side effects, cleanup, consistency)
Interactivity
-> Event handling and state updates
-> Derived state / lifting state / composition
-> Context (prop drilling vs global dependencies)
React 19 & Concurrency
-> Priority: urgent updates vs transitions
-> Suspense boundaries (progressive rendering, avoid waterfalls)
-> Server rendering (streaming) and client hydration constraints
Production practices
-> Forms & Actions (pending/error/success as contracts)
-> Data fetching & caching (where state lives, consistency boundaries)
-> Performance (profile, then optimize)
-> Testing/Debugging/Security/Accessibility下一步读什么（带链接）
- React 19：概览与迁移
- 渲染和提交
- useEffect（Learn） + useEffect（Reference）
- Suspense（Learn） + Suspense（Reference）
- 表单（Guides） + useActionState
- SSR 与 RSC
- 性能 + 测试
能力地图（你最终应该能解释清楚什么）
- 渲染：render 阶段和 commit 阶段分别做什么；为什么 render 必须保持纯粹。
- 状态：局部 state、派生 state、共享依赖（context）与外部 store。
- Effects：用于什么、何时重跑、cleanup、如何避免陈旧闭包。
- 并发：紧急更新与过渡更新；Suspense 如何改变 UI 的“就绪”语义。
- 工程：表单/Actions、数据获取、性能、测试、安全、无障碍。
规划中的深挖主题（不放链接，避免断链）
- Actions 契约：pending/错误/成功、重试与乐观更新。
- Suspense 落地：边界放置、流式 SSR、避免瀑布流。
- 调度心智模型：优先级与 lane；并发是为了体验，而不是“更快”。
- Effect 正确性：StrictMode、幂等性与资源生命周期。
怎么用这张路线图
- 把每个主题都当作“契约”来学：保证什么、不保证什么、依赖哪些不变量。
- 优先用可运行示例：React 的语义是“在变化中观察”学出来的。
- 当你觉得某件事“很玄学”时，去 Explanation 找机制解释。