React 学习路线 MOC

从零基础到可独立交付 React 应用的系统学习路线：七个阶段、依赖关系、逐篇目录与 0 到 1 完成标准。

#type / moc #status / growing #tech / dev / frame #resource / react

[!info] related notes

React 学习路线 MOC

这个概念为什么出现

没有依赖顺序时，React 学习会变成 Hook 背板：会写 useEffect 却不懂渲染提交，会上状态库却不懂状态边界，会谈 RSC 却不懂水合。本路线把「从零到可交付 React 应用」拆成七个阶段。

[!abstract] 路线结论 先建立 UI = f(state) 与单向数据流，再学事件与列表；随后以 Hooks 组织状态与副作用边界，再进入组件设计与状态提升/共享；性能建立在正确渲染模型上，最后才是路由、SSR/RSC 与工程交付。

整条路线围绕五个问题：

  1. 为什么界面是状态的函数，而不是 DOM 指令序列
  2. 渲染、提交与副作用边界如何划分
  3. Hooks 规则背后的调用顺序假设是什么
  4. 状态放在哪里：局部、提升、Context 还是外部库
  5. CSR / SSR / Hydration / RSC 各自解决什么问题

如何使用这份路线

场景做法
从零开始按阶段顺序；每篇先跑最小示例再看边界
已有 Vue/其他框架经验可加速 JSX，但不要跳过渲染模型与 effect 边界
只抓主干看文末 8 个主干主题
面试导向主线后接 高频面试
已会常用 Hook从 reducer/Context 状态边界开始，用 BodySense 流式问诊反向补渲染与副作用心智

难度标记

  • L1 入门 · L2 基础 · L3 核心心智 · L4 工程/性能 · L5 架构进阶

依赖关系总图

flowchart TD
    S1["阶段一 组件与 JSX"] --> S2["阶段二 核心 Hooks"]
    S2 --> S3["阶段三 副作用边界"]
    S3 --> S4["阶段四 组件与状态设计"]
    S4 --> S5["阶段五 渲染与性能"]
    S4 --> S6["阶段六 路由与数据"]
    S5 --> S7["阶段七 SSR/RSC 与交付"]
    S6 --> S7

阶段与子 MOC 对照

阶段目标主要子 MOC
一JSX、组件、props/state/ref、事件、列表React 基础 MOC
二useState/useRef/useContext/useReducerReact Hooks MOC
三effect 与外部系统同步React Hooks MOC
四组件设计、状态边界、受控组件状态与数据 MOC
五重渲染、memo、列表性能React 性能 MOC
六路由、数据加载、工程结构状态与数据 MOC · React MOC
七Hydration、SSR、RSCSSR 与 RSC MOC

阶段一：组件与 JSX 心智

目标：建立声明式 UI 与数据到视图的单向流。

完成标准：

  • 能解释 UI = f(state)
  • 能正确使用 props 与本地 state
  • 能写出带 key 的列表渲染
序号笔记核心问题难度源码
1.1ReactReact 解决什么问题L1否
1.2JSXJSX 如何表达 UI 树L1否
1.3props、state 与 ref三类数据源边界L2否
1.4事件处理与状态更新事件如何触发更新L2否
1.5列表渲染与 keykey 稳定身份的作用L2建议
1.6第一印象与主线初学抓手L1否
1.7受控与非受控表单数据所有权L3否

阶段二：核心 Hooks

目标：用 Hooks 表达状态、引用、上下文与本地状态机。

完成标准：

  • 理解 Hooks 只能在函数组件顶层调用的原因
  • 能区分 state 与 ref
  • 能用 reducer 管理多分支本地状态
序号笔记核心问题难度源码
2.1React HooksHooks 为什么出现L2否
2.2Hooks 总览常用 Hooks 地图L2否
2.3useState状态如何触发重渲染L2建议
2.4useState 内部更新队列直觉L4需要
2.5useRef不触发渲染的盒子L2否
2.6useContext跨层读上下文L2否
2.7useReducer本地状态机L3否
2.8React vs Vue3 状态模型对照心智L3否
2.9生命周期与 Hooks生命周期映射L2否

阶段三：副作用边界

目标：把“渲染”和“与外部系统同步”分开。

完成标准：

  • 能写出正确依赖数组与清理函数
  • 知道哪些逻辑不该进 effect
  • 能区分 useEffect 与 useLayoutEffect
序号笔记核心问题难度源码
3.1副作用与外部系统effect 的真正职责L3建议
3.2useEffect提交后同步外部系统L3建议
3.3useEffect 内部实现层直觉L4需要
3.4useLayoutEffect布局前同步L3否
3.5自定义 Hooks逻辑复用边界L3否

阶段四：组件设计与状态管理

目标：把状态放在正确边界，组件职责清晰。

完成标准：

  • 能在提升状态与局部状态间取舍
  • 能说明 Context 不适合什么
  • 能做基础状态管理选型
序号笔记核心问题难度源码
4.1组件设计原则组件如何切分L3否
4.2状态提升 vs 就近状态放哪L3否
4.3Context 与状态管理边界Context 适用面L3否
4.4状态管理选型库何时值得引入L3否
4.5按功能组织目录工程结构L2否
4.6常见模式模式索引L2否
4.7React 中的 TypeScript 组件与 Hook 类型props、事件、Reducer 与 Context 如何建模L3建议
4.8React 类型化包装组件与多态组件如何继承 props、处理 ref 与组件变体L3建议
4.9组件内服务端状态与客户端状态远程数据和本地交互状态如何分工L3否

阶段五：渲染与性能

目标：在正确性之后谈重渲染与缓存。

完成标准：

  • 能解释重渲染传播路径
  • 知道 memo/useMemo/useCallback 的成本
  • 能优化列表而不过早优化
序号笔记核心问题难度源码
5.1渲染与重渲染何时重渲染L3建议
5.2渲染传导与状态边界状态边界如何止损L4建议
5.3prop 身份与重渲染引用相等性L3否
5.4useMemo计算结果缓存L3否
5.5useCallback函数身份缓存L3否
5.6memo组件浅比较L3否
5.7列表性能大列表策略L4否
5.8表单性能输入卡顿治理L3否
5.9性能总览方法论L3否
5.10虚拟 DOM协调层直觉L3建议

阶段六：路由与数据

目标：把页面导航与服务端数据接入应用。

序号笔记核心问题难度源码
6.1路由基础SPA 路由原理L2否
6.2React Router 7框架模式路由L3否
6.3路由数据加载loader 等数据入口L3否
6.4TanStack Query 与 Suspense 集成缓存数据、加载边界与错误边界如何协作L4建议
6.5Stack 架构历史协调器L4建议
6.6Stack vs FiberFiber 为何出现L4建议
6.7前端测试组件、Hook 和业务行为如何验证L3否

阶段七：SSR、RSC 与交付

目标：理解服务端渲染与组件边界。

序号笔记核心问题难度源码
7.1Hydration 水合客户端如何接管L3建议
7.2水合不匹配常见失败L3否
7.3useEffect 与 SSR浏览器 API 边界L3否
7.4useLayoutEffect 与 SSR布局 effect 警告L3否
7.5Server vs Client Components职责划分L4建议
7.6React Server ComponentsRSC 模型L4建议
7.7SSR 数据获取首屏数据L4否
7.8SSR 架构边界分层L4否
7.9SSR/水合/RSC 对照概念辨析L4否
7.10服务端直出与客户端请求边界选择L3否
7.11Vite 学习路线工程构建L2否

如果只抓主干，优先这 8 个主题

  1. JSX · props/state/ref
  2. useState
  3. useEffect
  4. 列表与 key
  5. 副作用与外部系统
  6. 渲染与重渲染
  7. Context 与状态边界
  8. Hydration · Server/Client

一条实用学习原则

不要一开始把 React 学成“背 Hook 面板”。先分清渲染逻辑、事件逻辑和副作用逻辑，再去理解状态管理和性能优化。

0 到 1 的完成标准

  • 能解释一次 setState 如何走到界面更新
  • 能正确使用 effect 清理，避免泄漏与重复请求
  • 能设计受控表单与状态提升
  • 能说明 memo 家族何时无效
  • 能区分 CSR、SSR、Hydration、RSC

认知跳跃提醒

  1. 未理解渲染就堆 memo → 先 5.1 / 5.2
  2. 未理解 effect 边界就请求数据乱飞 → 先 3.1 / 3.2
  3. 未理解状态所有权就上全局库 → 先 4.2 / 4.3
  4. 未理解水合就上 RSC 口号 → 先 7.1 / 7.5 / 7.9

相关入口

自测题

  1. 为什么性能阶段放在状态设计之后？
  2. 自定义 Hook 解决的是什么问题，不解决什么？
答案
  1. 性能优化建立在正确的状态边界上；边界错误时 memo 只是掩盖问题。
  2. 解决逻辑复用与意图命名；不自动消除重渲染，也不替代状态架构设计。

BodySense 项目实战入口（把路线落到真实代码）

[!info] 你正在 BodySense（体态健康 AI 助手）中用 React + TS 实做下面这些概念。仓库里已经为几个「教学走廊」文件加了详细注释。建议阅读顺序：先读代码注释 → 翻对应笔记 → 回到代码确认。

想练的知识点去看的代码（仓库内相对路径）对应笔记
useReducer 本地状态机 + 可辨识联合 actionapps/web/src/features/consultation/context/ActiveTurnContext.tsxReact 中的 TypeScript 类型设计 · 可辨识联合与穷尽检查
流式 SSE 解析、增量解码、AbortController 取消apps/web/src/features/consultation/hooks/useSSEProcessor.tsWeb Streams 增量解码 · AbortController 取消
跨端流事件契约（TS 侧形状）packages/contracts/src/stream-events.ts泛型/约束/keyof · 编译期 vs 运行时边界
  • 流式链路教材（仓库内）：docs/learning/06-javascript-typescript-streaming.md
  • 由易到难的实战任务（仓库内）：docs/learning/05-practice-tasks.md 与 .practice-map/maps/bodysense-fundamentals.md
  • 总导航：BodySense MOC
创建于 2026/3/19 更新于 2026/8/1