React
前端开发 · 预计 5-7 周 · 4 阶段
React 是目前使用最广的前端组件化框架，理解它等于理解了现代前端开发的核心范式：组件、状态、数据流。路线图从 JSX 基础出发，逐步深入到 Hooks、状态管理、数据请求与性能优化，适合目标前端/全栈岗位的系统学习。
下一阶段目标：React 基础与 JSX（完成当前阶段后自动推进）
学习路线图按顺序学完每一阶段
点击阶段节点直达学习内容；绿色=已完成，彩色=当前阶段
当前阶段React 基础与 JSX
核心知识点
本阶段学习内容
要点速记
- JSX 是 React.createElement 的语法糖，花括号里只能写 JS 表达式（不能写 if/for 语句）
- 组件是接受 props 返回 JSX 的函数；props 只读，单向数据流
- 列表渲染必须加 key，用数据自带稳定 id，不能用数组下标
- 条件渲染用三元表达式或 && 短路
本阶段练习题（点击选项作答）
1. JSX 的本质是什么？
2. 关于 props，下列说法正确的是？
3. 列表渲染时 key 的最佳实践是？
练习任务
- 用 Create React App / Vite 搭建第一个项目
- 实现一个待办列表：输入、渲染、删除
- 拆分 3 个以上小组件并传 props
本阶段验收标准
Hooks 与组件状态
核心知识点
本阶段学习内容
要点速记
- 更新状态依赖旧值时必须用函数式更新：setCount(c => c + 1)
- useEffect 空依赖数组 = 挂载时执行一次；返回的函数是清理（定时器/订阅）
- 自定义 Hook 以 use 开头，把可复用状态逻辑抽离成函数
- Hook 只能在组件或自定义 Hook 顶层调用，不能放条件/循环里
本阶段练习题（点击选项作答）
1. 计数器场景下，为什么推荐 setCount(c => c + 1)？
2. useEffect(() => {...}, []) 中的回调何时执行？
3. 关于自定义 Hook 的规则，正确的是？
练习任务
- 把待办列表升级：搜索过滤 + 本地存储持久化
- 封装 2 个自定义 Hook（useLocalStorage / useDebounce）
- 实现一个计数器 + 计时器组件演示各 Hook
本阶段验收标准
状态管理与数据请求
核心知识点
本阶段学习内容
要点速记
- Context 解决 props 层层传递：createContext + Provider + useContext
- 数据请求要处理三态：加载中/成功/失败；组件卸载后不要 setState（竞态）
- 状态管理选型：小项目 useState+Context，频繁共享用 Zustand，大团队用 Redux
- Context 值变化会让所有消费组件重渲染，高频变化数据慎用
本阶段练习题（点击选项作答）
1. Context 的主要作用是？
2. 异步请求组件卸载后 setState 会发生什么？
3. 状态管理选型原则是？
练习任务
- 用 Context 实现全局主题切换
- 用 Zustand 重构待办应用的状态
- 对接一个公开 API（如天气/榜单）并处理加载/错误态
本阶段验收标准
性能优化与工程化
核心知识点
本阶段学习内容
要点速记
- React.memo 让 props 不变的组件跳过重渲染；配合 useMemo/useCallback 才有效
- React.lazy + Suspense 做代码分割，首屏只加载必要 chunk
- Next.js 三种渲染：SSR（实时+SEO）/ SSG（构建时静态）/ CSR（客户端）
- 优化铁律：先用 Profiler 定位再优化，别给所有组件套 memo
本阶段练习题（点击选项作答）
1. React.memo 的作用是？
2. 懒加载（lazy + Suspense）的主要收益是？
3. SSG（静态生成）最适合什么场景？
练习任务
- 用 React Profiler 分析并优化一个页面的渲染次数
- 用 Next.js 重写待办应用并部署
- 为 2 个组件编写单元测试
本阶段验收标准
怎么学
学习方法与实操建议，配合路线图按阶段推进
- 1以「官方文档 + 官方教程」为主干，React.dev 的教程是最好的入门材料，不要跳步
- 2每个阶段都要做动手项目：先照着教程敲一遍，再不看教程独立实现一遍
- 3学习时带着问题看源码与文档：为什么需要 useEffect？为什么 setState 是异步的？
- 4加入 React 社区（中文：React 中文社区 / 掘金；英文：Reactiflux Discord）
学完能做什么
- 独立开发复杂 React 应用并保持状态清晰
- 用 Next.js 完成 SSR 项目并部署上线
- 能定位并优化页面渲染性能
面试常见问题6 题
常见误区
- 1只看视频不动手，代码能力为零
- 2跳过基础直接套脚手架，看不懂报错
- 3看 class 组件老教程学 React
- 4遇到问题不读官方文档，盲目搜索
学习节奏建议
预计 5-7 周，共 4 个阶段。
每阶段按标注时长安排：先读参考文档掌握核心知识点，再完成练习任务，通过 验收标准后标记完成进入下一阶段。
当前为游客模式，进度保存在本设备；登录后可云端同步、多端续学。
当前进度
进行中
下一阶段：React 基础与 JSX