React 进阶系列：覆盖 95% 场景的 8 大核心模式

引言

很多初学者学完 React 基础后，面对实际项目仍然不知道如何下手。原因在于：你不需要掌握所有 API，只需要掌握几个核心模式。

本系列基于一个 Next.js 15 教学项目，提炼出 8 个覆盖 95% 开发场景的 React 核心模式。每个模式单独一篇，从”为什么需要”到”怎么用”再到”常见踩坑”，配合完整代码示例。

系列文章一览

序号	模式	核心解决的问题	文章链接
1	useState	组件如何记住数据？	Pattern 1: useState 状态管理
2	useEffect	组件如何与外部世界交互？	Pattern 2: useEffect 副作用
3	Props 与组件组合	组件之间如何传递数据和复用 UI？	Pattern 3: Props 与组件组合
4	条件渲染	如何根据不同状态显示不同 UI？	Pattern 4: 条件渲染
5	列表渲染与 Key	如何高效渲染一组数据？	Pattern 5: 列表渲染与 Key
6	事件处理与表单	如何处理用户输入和交互？	Pattern 6: 事件处理与表单
7	Context API	如何避免 Props 层层传递？	Pattern 7: Context API
8	自定义 Hooks 与性能	如何复用逻辑和优化性能？	Pattern 8: 自定义 Hooks 与性能优化

技术栈

本系列项目使用以下技术栈：

Next.js 15 (App Router)
React 19
TypeScript 5
Tailwind CSS 4

项目刻意不使用任何外部状态管理库（Redux、Zustand 等），只用 React 原生 API，帮助你理解底层原理。

项目结构

src/
├── app/
│   ├── layout.tsx          # 根布局（Server Component）
│   ├── page.tsx            # 首页（Server Component）
│   └── globals.css         # 全局样式 + 主题变量
├── components/
│   └── Dashboard.tsx       # 所有 Pattern 的演示组件（Client Component）
├── contexts/
│   └── ThemeContext.tsx     # 主题上下文（Pattern 7）
└── hooks/
    └── useLocalStorage.ts  # 自定义 Hook（Pattern 8）

学习路线建议

第一阶段：基础状态与渲染
  Pattern 1 (useState) → Pattern 2 (useEffect) → Pattern 3 (Props)

第二阶段：UI 逻辑
  Pattern 4 (条件渲染) → Pattern 5 (列表渲染) → Pattern 6 (表单)

第三阶段：架构能力
  Pattern 7 (Context) → Pattern 8 (自定义 Hooks)

前置知识

阅读本系列前，建议先掌握：

React 入门完全指南中的基础知识
JavaScript ES6+ 语法（箭头函数、解构、展开运算符）
TypeScript 基础（interface、类型注解）

总结

8 个模式，覆盖绝大多数场景。接下来从 Pattern 1 开始，一步步构建你的 React 模式库。