这张路线适合谁
前置知识一句话说死：HTML/CSS/JavaScript 扎实（能独立写出带事件处理的页面、明白异步与 ES6 模块），就直接上路；解构、箭头函数、数组方法（map/filter）不熟先补——React 的语法甜头全建立在它们上。零基础或环境没装的，从《React 环境搭建与工具链》开始。写过 Vue 的读者有捷径：每篇入门文末都有对照小节。时长口径：每天 1-2 小时业余学习，六个阶段合计 7-10 周。
总览
| 阶段 | 目标 | 阶段产出 | 预估时长 |
|---|---|---|---|
| 一、工具链 | 跑通工程，理解 React 只是库 | 能启动、构建、lint 的最小工程 | 2-3 天 |
| 二、组件与数据流 | JSX、props、受控表单、组合全部过手 | 带持久化的待办应用 | 2-3 周 |
| 三、查阅能力 | 建立 API 索引，遇坑能自查 | 自己的踩坑笔记十条 | 并行进行 |
| 四、本地实战 | 独立完成数据层与持久化的工程决策 | 热榜阅读客户端（或同量级小工具） | 1-2 周 |
| 五、执行模型 | 搞清渲染时机与 Hook 语义——React 真正的分水岭 | 能解释”为什么又渲染了”的口头复盘 | 1-2 周 |
| 六、进阶分岔 | 选一个方向纵深 | 分岔方向里的第一个小项目 | 视方向 3-6 周 |
这条路线的骨架就是本站 React 线：五篇入门加一个实战，加上两篇早已写好的深潜文。阶段产出全部是”做出一个小东西”，不是”看完了什么”。
阶段一：工具链（2-3 天）
学什么：React 与框架的区别（为什么官方没有脚手架）、Vite 三条起步路线怎么选、ESLint 里 Hooks 规则为什么是正确性检查、DevTools 两个面板各干什么。资源就一篇：《React 环境搭建与工具链》，照着做一遍。
产出与验收：本地跑起 dev server，改一行代码看到热更新；故意在组件里条件调用一个 useState，确认 lint 报红。常见卡点：Node 版本低于 20.19 起不来——对照文中版本要求；旧教程还在教 create-react-app，那套已退役，识别到就换。
阶段二：组件与数据流（2-3 周）
学什么：这是 React 的地基，慢就是快。按这个顺序过：
| 概念组 | 包含什么 | 为什么按这个顺序 |
|---|---|---|
| 组件与 JSX | 函数组件、JSX 规则、useState | 先有”组件是反复执行的描述”这个直觉，后面全靠它 |
| 数据流 | props 单向、children、回调、状态提升 | 数据怎么流动决定代码怎么组织，先于一切技巧 |
| 表单与列表 | 受控组件、条件渲染、列表 key | 高频日常，坑也最集中（数字 0、下标 key） |
| 副作用入门 | useEffect 最小用法、自定义 Hook | 放最后：前两组不牢，Effect 只会放大混乱 |
资源两篇：《第一个 React 应用》走完最小闭环，《React 语法要点：组件、JSX 与数据流》逐个展开”为什么”（组合为什么取代继承、单向流动换来了什么）。外部资源不需要，配官方文档的例子足够。
产出与验收：待办应用——增删、勾选、刷新不丢数据，且能对每个用法说出”用错会看到什么现象”。常见卡点两个：直接改状态界面不动（React 比较的是引用，要新数组新对象）；输入框打不了字（受控只写了一半，value 与 onChange 必须成对）。
阶段三：查阅能力（与阶段二并行）
学什么：不是读教程，是建立”知道去哪查”的索引。资源：《React 基础知识参考字典》，按”场景 → API → 坑”组织，常见报错有速查表，遇到问题先查它再搜网。
产出与验收：自己的踩坑笔记十条，格式照字典来（场景/用法/坑三列）。走完全程后这份笔记的价值会超过任何教程——它是按你的错误史排序的。
阶段四：本地实战（1-2 周）
学什么：把语法变成工程决策——数据层怎么选（手写 fetch 还是上库）、缓存与竞态怎么防、localStorage 怎么容错。资源：《用 React + Vite 做一个热榜阅读客户端》，跟着做完后必须脱离文章再做一个变体（RSS 阅读器、追番日历都行，量级相当即可）。
产出与验收：一个自己日常真在用的阅读类小工具。验收标准：快速切换数据源无竞态错乱、脏 localStorage 不崩、断网时界面有提示不白屏、能口头讲清”为什么没上 TanStack Query”。
阶段五：执行模型（1-2 周）——真正的分水岭
学什么：前面都在”怎么用”，这一层是”怎么运转”。两篇深潜按顺序读：
第一篇《React Hooks 心智模型：为什么你总觉得 React 反直觉》：函数组件不是调用是描述、每次渲染的变量都是快照、Effect 是”依赖变了就执行”不是生命周期。读完能解掉八成的”为什么拿到旧值”。
第二篇《React 渲染与重渲染：什么时候会重算，怎么避免白算》：重渲染的四个触发源、memo 挡得住什么挡不住什么、context 的重渲染粒度。读完再用 DevTools Profiler 录自己的实战项目，看谁能对上。
产出与验收：对着自己的项目口头复盘一次”这次交互谁渲染了、为什么、值不值得挡”。这一层过没过，决定了你写的是”能跑的 React”还是”讲得清的 React”——面试与排障的分界线也在这。
阶段六：进阶分岔（3-6 周，选一个方向起步）
| 方向 | 解决什么 | 站内入口 |
|---|---|---|
| 全栈 / Next.js | 路由、SSR、SEO、服务端取数——”服务端在场”的全部问题 | Next.js 学习路线起步，内容站实战收口 |
| 服务端状态 | 多接口缓存、失效、乐观更新——前端数据层工程化 | TanStack Query 基础，系统走TanStack 学习路线 |
| 移动端 | 同一套 React 心智映射到原生界面 | 第一个 React Native 应用上手，React Native 学习路线成线 |
| 类型深度 | 组件契约类型化、重构安全网 | TypeScript 学习路线，在”类型化组件”处与本线会师 |
| 第二框架对照 | 对照学一遍，反哺对 React 执行模型的理解 | Vue 3 学习路线（站内两个系列刻意互设了对照节） |
分岔不必焦虑选错：React 本身的功力（阶段一到五）在每条岔路上都通用，方向只是复用它的方式。
里程碑自检
| 阶段 | 产出 | 过线标准 |
|---|---|---|
| 一 | 最小工程 | 构建与 preview 各跑通一次；lint 的 hooks 警告当 error 处理 |
| 二 | 待办应用 | 增删勾选持久化全可用；受控与 key 的坑能各举一例 |
| 三 | 踩坑笔记十条 | 每条按”场景/用法/坑”三列；翻字典两分钟内能定位 |
| 四 | 阅读客户端及变体 | 竞态、脏数据、断网三个场景手测通过；讲清数据层选型 |
| 五 | 渲染复盘 | 对着 Profiler 讲清一次交互的渲染链路 |
常见问题
Q1: 要不要先学类组件
不需要。函数组件 + Hooks 是 2019 年以来的默认写法，官方文档已全面以它为纲；类组件只在维护老项目时对着文档读。两套心智模型并行学只会互相干扰。
Q2: JavaScript 要多熟才能学 React
硬底线：闭包（Hooks 的一切困惑都是闭包）、数组方法（map/filter 是日常）、异步（Promise 与 async/await）、模块。这四块不熟就先补——在 React 里补 JS，报错信息会加倍迷惑你。
Q3: React Compiler 有 RC 版了，还要学 useMemo/useCallback 吗
要懂，不必常用。Compiler（当前为 RC 阶段，已可在新项目试用）替你做的是自动 memoization，但”什么时候值得 memo”的判断标准没变——阶段五的渲染篇教的正是这个判断。懂了它，你才知道编译器在帮你做什么、以及它没帮到的边角。
Q4: Redux、Zustand 这些状态库什么时候学
阶段四之后、遇到真实需求时。本线阶段二的状态提升与阶段四的模块级缓存（useBoard 里那个 Map）已经覆盖中小应用的状态组织；等你真切碰到”多个数据域交叉、跨页面共享、需要时间旅行调试”再上库，半天就能上手——工具要在感受到痛点之后学，才知道它在替你解决什么。服务端数据的状态管理是另一个问题，那是 TanStack Query 那条岔路的事。
避坑清单
下面五条都是学习路上的高频反模式，每条写明代价——踩过的都懂。
- 不要抄着组件库学 React。组件库能三天”做出”界面，但数据不更新的问题一来，没有单向数据流的底子只能瞎试——地基欠的债第一次真实调试就连本带利还。
- 不要把 useEffect 当万能生命周期。它不是 componentDidMount：依赖数组才是它的核心参数，乱放”顺便执行一下”的逻辑，陈旧值与死循环都在前面等着。
- 不要在没有证据时堆 memo/useCallback。Profiler 录出问题之前，这些手段只增加代码噪音；Compiler RC 落地后更是如此。
- 不要跳过阶段五直接进分岔。带着”总觉得 React 反直觉”的迷雾去学 Next.js，等于在流沙上盖楼——服务端组件的缓存语义会把这个迷雾放大十倍。
- 不要用 Next.js 做不需要服务端的项目。内部工具、纯客户端应用用 Vite 就够；框架的约定是给”服务端在场”付的费，不享受服务就别付费。
学完之后
走完五个阶段（分岔至少起步一个），你手里有：两个真在用的小工具、一份自己的踩坑笔记、以及对着 Profiler 讲清渲染链路的能力。下一步纵深回到阶段六那张分岔表——每条岔路站内都有成体系的线在等你。
诚实收尾：十周走完这条线不会让你”精通 React”，但组件契约、单向数据流、执行模型这三件事会成为肌肉记忆——之后无论切到 Vue、RN 还是任何声明式 UI，你都是带着地图进去的。
版本核实（撰写时检索，2025-08）：React 当前稳定版 19.1.x；create-react-app 已于 2025-02 退役；React Compiler 处于 RC 阶段（2025-04 发布候选版）；Next.js 当前主线 15.x；TanStack Query 当前主线 v5；SWR 当前主线 2.x。本路线所有内链文章均为站内已发布或本批排期发布的内容。具体以官方文档为准。