React 核心原理与面试指南
基于 React 19 + Next.js 15 + React Compiler
🗺️ 学习路线
基础概念 → Hooks 精通 → 服务端范式 → 架构原理 → 生态实践 → 技术演进
│ │ │ │ │ │
│ │ │ │ │ └── 全局视野
│ │ │ │ └── 实战必备
│ │ │ └── 深度加分
│ │ └── 🔥 高频考点
│ └── 🔥🔥 核心考点
└── 快速掌握⚡ 面试重点
| 主题 | 考察频率 | 说明 |
|---|---|---|
| use() / useOptimistic | 🔥🔥🔥 | React 19 核心 |
| Server Components | 🔥🔥🔥 | 必考 |
| Server Actions | 🔥🔥🔥 | 全栈趋势 |
| Hooks 原理 | 🔥🔥🔥 | 基础必考 |
| React Compiler | 🔥🔥 | 颠覆性变化 |
| Fiber / Diff | 🔥🔥 | 经典深度题 |
基础篇
- JSX 与虚拟 DOM
- JSX 编译原理、createElement、虚拟 DOM 结构
- 组件范式与生命周期
- Class vs Function、生命周期映射、StrictMode
- 合成事件系统
- 事件委托、React 17 变更、事件池
Hooks 专题 🔥
- Hooks 原理深度 ⭐
- 链表结构、Dispatcher、闭包陷阱
- React 19 新 Hooks ⭐
- use()、useActionState、useFormStatus、useOptimistic
- useEffectEvent 与副作用
- useEffectEvent、useEffect 执行时机
服务端范式 🔥🔥
- Server Components 原理 ⭐
- RSC 架构、'use client'、Flight 协议、组件边界
- Server Actions ⭐
- 表单处理、数据变更、重验证
- Streaming SSR
- renderToPipeableStream、Selective Hydration
架构原理
- Fiber 架构与 Diff 算法 ⭐
- Fiber 结构、双缓冲、三层 Diff 策略
- Scheduler 与 Lane 模型
- 优先级调度、时间切片、Lane 位图
- Concurrent 特性
- useTransition、useDeferredValue、Suspense 原理
性能优化
- React Compiler ⭐
- 自动记忆化、编译优化、迁移指南
- 渲染优化体系
- memo/useMemo/useCallback、虚拟列表、Profiler
生态实践
- 状态管理演进
- Context 问题、Zustand/Jotai、TanStack Query
- Next.js App Router
- 路由架构、缓存策略、Turbopack
- Headless UI 模式
- Compound Components、Radix UI、无障碍
进阶专题
历史与演进 📜
- React 技术演进史 ⭐
- 从 jQuery 到 React 19：每次变革的动机与解决的问题
代码示例
- mini-hooks.js: 简易 Hooks 实现
- scheduler-demo.js: Scheduler 调度实现
文件命名规范
| 前缀 | 含义 | 示例 |
|---|---|---|
core- | 基础核心知识 | 01-core-jsx-vdom.md |
deep- | 深入原理分析 | 10-deep-fiber-diff.md |
practice- | 实践应用 | 15-practice-state-management.md |
advanced- | 进阶专题 | 18-advanced-error-boundary.md |
history- | 历史演进 | 20-history-evolution.md |