第 5 章
React 与 Next.js
组件、状态、副作用、Hooks、并发渲染、服务端组件——现代前端框架的心智模型
这一章讲框架层——React 的心智模型和 Next.js 的全栈能力。前四章讲了环境、视觉层、语言层，这一章讲"怎么把前面学的组合成一个应用"。
为什么是 Next.js？ 本章涉及服务端组件（RSC）、流式渲染、Server Actions——这些是 React 的特性，但需要一个支持 RSC 的框架来运行。Next.js 是 RSC 生态中最广泛使用的框架（2025 年 State of JS 调查中 React 框架使用率第一），也是本站的生产技术选型。Remix / Redwood / Waku 等框架也支持 RSC，但 API 和约定不同——本章以 Next.js App Router 为默认环境，在涉及 RSC 的地方会注明"这部分需要框架支持"。如果你用的是其他 React 框架：§5.1-5.2（组件 / 状态 / Hooks / 并发）完全通用，§5.3-5.4（RSC / App Router）的概念和心智模型通用，但具体 API 和文件约定需要查对应框架的文档。
第 4 章教你判断"这段 JavaScript 写得对不对"，第 5 章教你判断"这个 React 组件设计得好不好"。两件事的关键区别：JS 的正确性可以用语言规范验证（作用域、类型、异步顺序），React 组件的"好"没有规范可查——它取决于你对组件模型、数据流、渲染机制的理解深度。
2013 年 React 发布时做了一件事：把 UI 从"命令式 DOM 操作"变成"声明式状态映射"。这个心智转变至今是 React 最核心的价值——你描述"UI 在每种状态下长什么样"，React 负责让 DOM 匹配你的描述。十年后（2023-2025），React 经历了第二次大转变：服务端组件（RSC）把渲染从"纯客户端"拆成"服务端 + 客户端两层"。理解这两次转变，你就理解了 React 的设计逻辑。
写给新人：React 是入门前端框架的事实标准——2025 年 State of JS 调查 中超过 80% 的受访者使用过 React。但不要从"怎么用"开始学——从"为什么这么设计"开始。理解组件、状态、副作用这三个概念，比背 20 个 Hook 的 API 有用得多。
写给老前端：如果你最近一次学 React 是 2018-2020 年（Class 组件 + Redux 时代），这一章基本是从头学——Hooks（2019）、并发渲染（2022）、服务端组件（2023-2024）三次迭代改变了 React 的写法范式。旧知识不会作废，但"最佳实践"完全不一样了。
5.1 本章六节速览
| 节 | 标题 | 一句话定位 | 推荐给 |
|---|---|---|---|
| 5.1 | React 心智模型 | 组件 / 状态 / 副作用 / Hooks——框架的"为什么" | 所有人 |
| 5.2 | 并发渲染与 Suspense | useTransition / useDeferredValue / Suspense 边界 | 有性能问题再读 |
| 5.3 | 服务端组件与客户端组件 | RSC 心智模型 / "use client" 边界 / 流式渲染 | 有 React 项目经验再读，资深尤其 |
| 5.4 | Next.js App Router | 路由 / 数据获取 / 缓存策略 / ISR | 所有人 |
| 5.5 | 状态管理 | Zustand（推荐）/ Jotai / Redux Toolkit 对比 | 写过 React 的人 |
| 5.6 | 样式方案 | Tailwind CSS（推荐）/ CSS Modules / styled 对比 | 所有人 |
推荐阅读路径（建议）：
| 你是 | 直接读 |
|---|---|
| 新人 / 转行者 | §5.1 → §5.4 → §5.6（先理解组件 + 路由 + 样式，再深入并发） |
| 写过 Class 组件但没用过 Hooks | §5.1 全节 + §5.2 Suspense |
| 会 React 但没接触过 Next.js | §5.3 RSC → §5.4 App Router → §5.5 状态管理 |
| 在用 Next.js 但 RSC 没搞懂 | §5.3 全节（RSC 是本章最核心的新概念） |
| 资深，想刷新"最新最佳实践" | §5.2 → §5.3 → §5.5（并发 + RSC + 状态管理是最大的变化） |
全章通读约 90-120 分钟；按路径挑读 30-45 分钟。§5.1 React 心智模型 和 §5.3 服务端组件 是两个核心——前者是框架的"为什么"，后者是 2024+ 最大的架构变化。
本章六节全部完成。第 5 章完。
5.2 React 演进史（必要的回顾）
跟前面几章一样，先看演进。React 的三次大转变，每次都在回答"上一个写法有什么问题"。
| 年代 | 里程碑 | 留下了什么 | 现在怎么看 |
|---|---|---|---|
| 2013 | React 发布（Facebook，Jordan Walke） | 声明式 UI / Virtual DOM / 单向数据流 | 前端框架时代的起点——这三个概念至今是核心 |
| 2015 | React Native 发布 | 组件模型跨平台复用 | "Learn Once, Write Anywhere" |
| 2019 | Hooks（React 16.8） | useState / useEffect / 自定义 Hook | Class 组件时代终结——Hooks 是现代默认写法 |
| 2022 | React 18 并发渲染 | useTransition / useDeferredValue / Suspense | 从"同步渲染"到"可中断渲染" |
| 2023 | React Server Components（Next.js 13.4 App Router） | "use server" / "use client" / 流式渲染 | 第二次大转变——渲染模型从客户端扩展到服务端 |
| 2024 | React 19 + React Compiler | 自动 memo / Server Actions / use() Hook | 编译器替代手动优化 |
三条主线值得记住：
-
从"命令式"到"声明式"：2013 年 React 用
UI = f(state)一个公式替代了 jQuery 的$('#id').show()/$('#id').hide()。这是 React 最核心的设计原则——你描述结果，框架负责过程。 -
从"类"到"函数"：2019 年 Hooks 把状态和副作用从 Class 组件中解放出来——一个函数就能拥有状态，不需要
this、不需要生命周期方法。这是 React 社区最大的一次 API 范式迁移。 -
从"纯客户端"到"服务端 + 客户端"：2023 年 RSC 把组件拆成两层——服务端组件可以访问数据库和文件系统，客户端组件处理交互和状态。这是 React 诞生以来最深层的架构变化。
写给老前端：如果你最近一次学 React 是 2016-2018 年（Class 组件 + Redux +
componentDidMount），这一章需要完整读。不是因为旧知识过期，是因为**"最佳实践"被 Hooks + RSC 两次重写**——Class 组件不再推荐、Redux 不再是默认选择、getServerSideProps被 RSC 替代。
写给新人：直接从 Hooks + 函数组件开始学。不要学 Class 组件（
this.setState/componentDidMount）——它们在新项目里不出现，React 官方文档也不再推荐。你的起点就是 2024 年的最佳实践。
5.3 本章覆盖什么、不覆盖什么
进主干（会详细讲）
- React 心智模型：组件（组合而非继承）、状态（
useState/useReducer）、副作用（useEffect）、Hooks 规则 - 并发渲染：
useTransition/useDeferredValue/ Suspense 边界 / 流式 SSR - 服务端组件：RSC 心智模型 /
"use client"边界 / Server Actions / 流式渲染 - Next.js App Router：文件系统路由 / 布局嵌套 / 数据获取（
fetch缓存） / ISR - 状态管理：Zustand（推荐）/ Jotai / Redux Toolkit 对比——何时用哪个
- 样式方案：Tailwind CSS（推荐）/ CSS Modules / styled-components 对比——选型决策
不进主干（点到为止或完全不讲）
- Class 组件：
this.setState/componentDidMount/shouldComponentUpdate——知道"以前这样写"即可，不学 - Redux 深度用法：middleware 编写 /
createStore内部实现——Zustand 覆盖 90% 场景，Redux Toolkit 只讲对比 - React Native：移动端框架是独立话题，本章只讲 Web React
- Gatsby / Remix：其他 React 框架，讲 Next.js 作为默认推荐
- Webpack / Babel 深度配置：工具链配置留给第 6 章工程化
判断标准：进主干的都是"当前写 React 项目必须掌握的"；不进主干的是"老项目维护可能遇到但新项目不应该用的"。
5.4 本章与其他章节的关系
| 依赖关系 | 说明 |
|---|---|
| ← 第 4 章 | §4.1 闭包是 Hooks 的基础——不理解闭包就无法理解 useState |
| ← 第 4 章 | §4.2 Promise / async-await 是 Server Components 的前置知识 |
| ← 第 3 章 | §3.6 动画 / View Transitions 会在 §5.6 样式方案中用到 |
| → 第 6 章 | React 项目的构建 / 打包 / 优化是工程化章节的核心 |
| → 第 7 章 | React 组件的单元测试 / E2E 测试在第 7 章展开 |
"AI 可委托清单"在本章的位置：§5.1 / §5.3 / §5.5 每节末尾都有"AI 时代写 React 的最小集"段——明确列出"哪些你可以让 AI 写、哪些你必须自己判断"。
5.5 核心概念速查（会在多节反复出现）
以下是本章反复出现的跨节核心概念——会在多节反复出现，本章每次提到时都会回链回来。
| 概念 | 一句话定义 | 为什么重要 | 在本章哪里出现 |
|---|---|---|---|
| 声明式 UI | 描述 UI 在每种状态下长什么样，框架负责渲染 | React 最核心的设计原则 | §5.1 / §5.3 / §5.4 |
| Hooks | 函数组件里使用状态和副作用的方式 | 替代 Class 组件，现代 React 的默认写法 | §5.1 / §5.2 / §5.5 |
| Server Components（RSC） | 在服务端渲染、可以访问数据库的 React 组件 | 2023+ React 最大的架构变化 | §5.3 / §5.4 / §5.5 |
| Suspense | 声明式地等待异步数据，显示 fallback | 并发渲染的核心原语 | §5.2 / §5.3 / §5.4 |
| App Router | Next.js 13.4+ 的文件系统路由 | 替代 Pages Router，RSC 的默认载体 | §5.4 |
| 缓存（cache） | Next.js 的四层缓存体系 | 理解 Next.js 数据流的关键 | §5.4 |
访问性说明：React 官方文档（react.dev）和 Next.js 官方文档均为英文但访问稳定，部分页面有社区中文翻译。
5.6 本章的"AI 可委托"总览
| 任务 | AI 能帮到什么程度 |
|---|---|
| 写基础组件（展示型） | ✅ 委托 AI，但你要 review props 设计是否合理 |
| 写表单 + 校验逻辑 | ✅ 委托 AI，但你要 review 边界条件（空态 / 加载态 / 错误态） |
| 把 Class 组件迁移到 Hooks | ⚠️ AI 写初版，你要检查 useEffect 依赖数组和闭包陷阱 |
| 设计组件拆分策略 | ❌ 你必须判断——AI 不知道你的业务领域和未来变更方向 |
| 决定 RSC vs "use client" 边界 | ❌ 你必须判断——AI 会倾向默认 client，但你应该默认 server |
| 选型状态管理库 | ❌ 业务决策——§5.5 给了决策框架，但最终选哪个取决于你的团队和场景 |
| 排查 Suspense 边界导致的性能问题 | ❌ Tier 4：需要 profiling + 理解并发调度——AI 只能给通用建议 |
回顾第 1 章 §1.4的 D1–D5 维度。本章涉及的"框架设计判断"大部分在 D4（需要上下文才能判断对错） + D5（长期委托会失去自保能力）。
下一节：§5.1 React 心智模型——组件、状态、副作用、Hooks。