React 知识体系
React 是一个用于构建用户界面的 JavaScript 库，采用组件化开发模式。
📁 目录结构
React/
├── 01-基础入门/ # 基础概念和语法
│ ├── 01-语法基础/ # JSX 语法
│ ├── 02-组件基础/ # 组件概念
│ ├── 03-状态管理/ # Context API、State
│ └── 04-事件处理/ # 事件处理
│
├── 02-核心机制/ # React 工作原理
│ ├── 01-渲染机制/ # 虚拟 DOM、Diff 算法
│ ├── 02-生命周期/ # 组件生命周期
│ └── 03-事件系统/ # 事件系统原理
│
├── 03-Hooks深度理解/ # Hooks 原理和使用
│ ├── 01-基础Hooks/ # useState、useEffect、useContext
│ ├── 02-进阶Hooks/ # useMemo、useCallback、useRef
│ ├── 03-自定义Hooks/ # 自定义 Hooks
│ └── 04-原理深入/ # Hooks 实现原理
│
├── 04-组件设计模式/ # 组件设计最佳实践
│ ├── 01-设计原则/ # 组件设计原则
│ ├── 02-设计模式/ # 常见设计模式
│ └── 03-组件通信/ # 组件间通信
│
├── 05-性能优化/ # 性能优化技巧
│
├── 06-高级特性/ # 高级特性和 API
│
├── 07-表单处理/ # 表单处理方案
│
├── 08-路由管理/ # 路由管理方案
│
├── 09-样式处理/ # 样式处理方案
│
├── 10-服务端渲染/ # SSR 和 RSC
│
├── 11-React生态/ # React 生态系统
│
├── 12-最佳实践/ # 开发最佳实践
│
└── 13-原理深入/ # React 源码和原理
🎯 学习路径
初学者路径
- 01-基础入门 → 掌握 JSX、组件、Props、State、Context
- 03-Hooks深度理解/01-基础Hooks → 掌握 useState、useEffect、useContext
- 04-组件设计模式 → 掌握组件拆分和组合
- 08-路由管理 → 掌握 React Router
- 实战项目 → 构建完整应用
进阶路径
- 03-Hooks深度理解 → 深入理解所有 Hooks
- 02-核心机制 → 理解 React 工作原理
- 05-性能优化 → 掌握优化技巧
- 06-高级特性 → 掌握并发特性、错误边界等
- 07-表单处理 → 掌握表单处理方案
高级路径
- 13-原理深入 → 理解 React 源码
- 12-最佳实践 → 大型应用架构
- 10-服务端渲染 → 掌握 Next.js
- 11-React生态 → 探索生态工具