React 学习路线

从基础到专家的完整 React 学习指南，适合系统性学习和查漏补缺。

---

学习路线总览

┌─────────────────────────────────────────────────────────────────┐
│                      React 学习路线                              │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│   ┌─────────────┐    ┌─────────────┐    ┌─────────────┐        │
│   │   基础篇    │───▶│   进阶篇    │───▶│   专家篇    │        │
│   │  1-2 个月   │    │  2-3 个月   │    │  持续深入   │        │
│   └─────────────┘    └─────────────┘    └─────────────┘        │
│                                                                  │
│   核心概念          性能优化            源码原理                 │
│   Hooks 基础        状态管理            并发模式                 │
│   组件开发          TypeScript          SSR/RSC                  │
│   路由基础          自定义 Hooks        架构设计                 │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

---

基础篇 (Foundation)

目标：能够独立开发中小型 React 应用

序号	主题	核心内容	预计时间
01	React-01-核心概念	JSX、组件、Props、State、事件处理	1 周
02	React-02-Hooks基础	useState、useEffect、useContext、useRef	1 周
03	React-03-组件设计模式	组件拆分、Props 设计、组合 vs 继承	1 周
04	React-04-路由与导航	React Router、路由配置、导航守卫	3-4 天
05	React-05-表单处理	受控组件、表单验证、常用表单库	3-4 天
06	React-06-样式方案	CSS Modules、Tailwind、CSS-in-JS	3-4 天

基础篇学习检查清单

• [ ] 理解 JSX 的本质（React.createElement 的语法糖）
• [ ] 掌握函数组件和 Hooks 的基本用法
• [ ] 能够正确处理组件间的数据传递
• [ ] 理解 React 的单向数据流
• [ ] 能够使用 React Router 实现页面路由
• [ ] 能够独立完成一个 TodoList 应用

---

进阶篇 (Advanced)

目标：能够开发复杂的企业级应用，具备性能优化能力

序号	主题	核心内容	预计时间
07	React-07-Hooks进阶	useReducer、useMemo、useCallback、useLayoutEffect	1 周
08	React-08-自定义Hooks	Hook 设计原则、常用自定义 Hook、Hook 库	1 周
09	React-09-状态管理	Context 进阶、Redux Toolkit、Zustand、Jotai	1-2 周
10	React-10-TypeScript实战	类型定义、泛型组件、类型体操	1 周
11	React-11-性能优化	渲染优化、代码分割、懒加载、Profiler	1 周
12	React-12-测试策略	单元测试、组件测试、E2E 测试	1 周

进阶篇学习检查清单

• [ ] 理解 useMemo 和 useCallback 的使用场景
• [ ] 能够设计和实现自定义 Hooks
• [ ] 掌握至少一种状态管理方案
• [ ] 能够用 TypeScript 编写类型安全的 React 代码
• [ ] 理解 React 的渲染机制和优化策略
• [ ] 能够编写组件的单元测试

---

专家篇 (Expert)

目标：深入理解 React 原理，能够架构大型应用

序号	主题	核心内容	预计时间
13	React-13-源码解析	Fiber 架构、Reconciliation、调度器	2-3 周
14	React-14-并发模式	Concurrent Mode、Suspense、Transitions	1-2 周
15	React-15-服务端渲染	SSR、SSG、ISR、React Server Components	1-2 周
16	React-16-大型应用架构	目录结构、模块化、微前端	1-2 周
17	React-17-生态与工具链	构建工具、开发工具、最佳实践	1 周

专家篇学习检查清单

• [ ] 理解 Fiber 架构的设计思想
• [ ] 能够解释 React 的 Diff 算法
• [ ] 掌握 Suspense 和并发特性
• [ ] 能够实现和优化 SSR 应用
• [ ] 能够设计大型应用的架构
• [ ] 对 React 生态有全面的了解

---

学习资源推荐

官方资源

• React 官方文档 - 最权威的学习资源
• React GitHub - 源码学习

推荐书籍

• 《React 设计原理》- 卡颂
• 《深入浅出 React 和 Redux》

视频课程

• React 官方教程
• Epic React - Kent C. Dodds

实践项目

难度	项目	涉及知识点
基础	TodoList	组件、State、事件
基础	天气应用	API 请求、useEffect
进阶	电商后台	路由、状态管理、表单
进阶	实时聊天	WebSocket、性能优化
专家	低代码平台	架构设计、拖拽、渲染引擎

---

文档索引

按难度分类

基础篇

• React-01-核心概念
• React-02-Hooks基础
• React-03-组件设计模式
• React-04-路由与导航
• React-05-表单处理
• React-06-样式方案

进阶篇

• React-07-Hooks进阶
• React-08-自定义Hooks
• React-09-状态管理
• React-10-TypeScript实战
• React-11-性能优化
• React-12-测试策略

专家篇

• React-13-源码解析
• React-14-并发模式
• React-15-服务端渲染
• React-16-大型应用架构
• React-17-生态与工具链

按主题分类

核心概念

• React-01-核心概念 / React-13-源码解析

Hooks 体系

• React-02-Hooks基础 / React-07-Hooks进阶 / React-08-自定义Hooks

状态管理

• React-09-状态管理

工程化

• React-10-TypeScript实战 / React-12-测试策略 / React-17-生态与工具链

性能与优化

• React-11-性能优化 / React-14-并发模式

服务端

• React-15-服务端渲染

---

#React #前端 #学习路线