按「心智模型 → 运行时理解 → 工程能力 → 前沿视野」四阶段推进。每周节奏按每天 1–2 小时估算，可自行压缩或展开。每个阶段都以动手项目收尾，只读不写等于没学。
第一阶段：建立心智模型（kp-001 ~ kp-007）
—
目标：能声明式地思考「UI 是状态的函数」，并用组件搭出静态 + 简单交互的页面。
推荐顺序：
- kp-001 React 是什么与心智模型 —— 先立 UI = f(state) 的世界观
- kp-002 声明式 UI 与 JSX —— 学会这门「模板语言」的 JavaScript 本质
- kp-003 组件与组件树 —— 一切皆组件
- kp-005 State 与 useState —— 让界面动起来
- kp-004 Props 与单向数据流 —— 数据如何向下流动
- kp-006 事件处理 —— 用户输入如何回调到状态
- kp-007 条件渲染与列表渲染 —— 组合出真实界面
✅ 里程碑项目：Todo List（新增/完成/删除/过滤），不使用任何外部状态库。
第二阶段：理解运行时（kp-008 ~ kp-014）
—
目标：不再「背规则」，而是能解释规则背后的渲染模型；开始正确地写副作用与表单。
推荐顺序：
- kp-008 渲染与协调 —— 为什么 React 这样设计
- kp-009 Key 与列表复用 —— 最常被写错的 API
- kp-010 useEffect 与副作用 —— 与外部世界打交道的唯一正门
- kp-014 Hooks 规则与闭包陷阱 —— 理解「快照」心智模型
- kp-011 受控与非受控组件 —— 表单的两条路线
- kp-012 Context 与跨层级通信 —— 何时穿透、何时止步
- kp-013 组合模式与 Children —— 组件设计的进阶语法
✅ 里程碑项目：给 Todo List 加上「localStorage 持久化（effect）+ 编辑弹窗（受控表单）+ 主题切换（Context）」。
第三阶段：工程能力（kp-015 ~ kp-021)
—
目标：从「能跑」到「好维护」：抽象复用、性能意识、健壮性、选型能力。
推荐顺序：
- kp-015 自定义 Hook —— 复用逻辑而非复用 UI
- kp-016 useReducer —— 状态超过三四个字段时的解法
- kp-017 useRef 与命令式逃生舱 —— focus、测量、动画
- kp-019 重渲染机制与性能优化 —— 先懂原理再谈优化
- kp-018 记忆化 —— useMemo/useCallback/memo 的正确剂量
- kp-020 Suspense 与 Error Boundary —— 加载与失败的优雅处理
- kp-021 状态管理与数据获取 —— Redux/Zustand/TanStack Query 选型逻辑
✅ 里程碑项目：一个多页应用（如「书签管理器」），含懒加载、全局状态、错误处理；用 React DevTools Profiler 找到并优化一处真实重渲染。
第四阶段：前沿与实践（kp-022 ~ kp-028）
—
目标：面向 2026 年的 React：并发、服务端范式、工程体系。此阶段允许「先会用，原理后补」。
推荐顺序：
- kp-022 并发渲染与调度 —— React 18 以来的底层新范式
- kp-023 useTransition 与 useDeferredValue —— 两个可直接上手的并发 API
- kp-025 React 19 新特性与 Actions —— 表单、乐观更新、use()
- kp-024 React Server Components —— 服务端组件的边界与心智
- kp-026 元框架与 Next.js —— 把范式落地的框架层
- kp-027 测试策略 —— Vitest + Testing Library + Playwright
- kp-028 反模式与代码审查清单 —— 把前 27 篇浓缩成 checklist
✅ 终局项目：用 Next.js（App Router）把书签管理器重写为全栈应用：Server Component 首屏 + Server Action 写入 + 乐观更新 + 客户端测试。
检验标准
每个阶段结束时问自己三个问题：
- 我能用一句话解释这个阶段每个 KP 的「核心权衡」吗（不只是 API 用法）？
- 我写出的代码，能经得起 kp-028 审查清单逐条过吗？
- 我能向别人讲清楚「为什么这样写更好」吗？
三者皆「是」，进入下一阶段；否则回到对应 KP 的自测题重做。