第二十三章：React 和 Next.js 的边界 —— 零件系统 vs 智能楼宇系统

一句话：

text

React = 造零件的方法
Next.js = 把零件装进整栋楼并负责运营的系统

React 主要解决：

组件
state
props
hooks
渲染模型

Next.js 额外解决：

路由
SSR / SSG / ISR
服务端组件
Server Actions
打包和部署约束

边界速查：

问题	React 管吗	Next.js 管吗
组件怎么写	✅	基于 React
路由怎么组织	❌	✅
服务端渲染	❌	✅
Server Actions	❌	✅
hooks / state / context	✅	继承 React

#React 概念关系总图

text

React 应用
│
├── 组件 (Component) ← 空调的每个零件
│   ├── Props ← 别人给的参数（遥控器指令）
│   ├── State ← 自己的记忆（面板数据）
│   └── JSX ← 长什么样（外观）
│
├── Hooks ← 给组件装能力
│   ├── useState ← 记忆（显示面板）
│   ├── useEffect ← 自动程序（监听+反应）
│   ├── useRef ← 内部零件（不触发刷新）
│   ├── useContext ← 中央广播（跨层通信）
│   ├── useMemo ← 缓存计算结果（省电）
│   └── useCallback ← 缓存函数（省电）
│
├── 状态设计
│   ├── 只存必要 state
│   ├── 派生值直接计算
│   ├── 批处理更新
│   ├── 受控 / 非受控表单
│   └── useReducer ← 复杂控制器
│
├── 渲染机制
│   ├── State/Props 变 → 重新执行函数
│   ├── Virtual DOM Diff → 只更新变化部分
│   └── key → 帮 React 识别列表元素
│
├── 边界与逃生舱
│   ├── Effect 只做外部同步
│   ├── Suspense / lazy ← 按需安装模块
│   ├── Error Boundary ← 保险丝
│   └── React Compiler / memo ← 省电策略
│
└── 数据流
    ├── 父 → 子: Props
    ├── 子 → 父: 回调函数
    ├── 跨层: Context
    └── 框架边界: React vs Next.js