React 文档

导读与全书目录表：见同目录 01-React 入门：简介·特性与设计范式.md 开头。

---

React15 到 19

要点速览

版本   核心关键词               最大变化                          不升会遇到的问题
15    类组件、同步渲染          Fragment、基础 SSR                大更新卡顿、无错误边界、逻辑复用难
16    Fiber、Hooks、Portals   架构重写、函数组件崛起               弹窗被裁 / 层级错、逻辑复用嵌套地狱
17    过渡、平滑升级            事件系统重构、JSX 新转换             无新特性，只是为 18 铺路
18    并发、自动批处理          渲染机制大改、性能飞跃                卡顿、渲染冗余、新库不兼容
19    表单简化、服务端          Actions、内置表单 Hooks、Compiler   样板代码多、全栈能力缺失、生态落后

---

React15

React 15（2016）：类组件时代、同步渲染

要点速览

# 核心定位
稳定的类组件框架，无 Hooks，同步递归渲染。

# 主要特性
<Fragment>：组件可返回多个元素，不用额外 <div> 包裹。
SSR 基础支持：服务端渲染初步可用。
事件委托绑定到 document。

# 痛点
同步渲染：大组件更新阻塞主线程，UI 卡顿。
无局部错误捕获：一个组件崩溃→整页白屏。
无内置状态复用方案：逻辑复用依赖 HOC /render props，嵌套地狱。

---

React 16

React 16（2017，里程碑）：Fiber + Hooks，函数组件崛起

要点速览

# 16.0～16.7（架构与基础能力）
1. Fiber 架构（底层重写）：渲染拆成可中断的小任务，可调度、可优先级插队，解决大更新卡顿。
2. Error Boundaries捕获子组件 JS 错误，显示降级 UI，避免整页崩溃。
3. 支持 render 返回数组 / 字符串，不用包一层。
4. Portals（类似 Vue Teleport）：ReactDOM.createPortal(child, container)

# 6.8（2019，引爆点）：Hooks 正式发布
1. 核心 Hooks：useState、useEffect、useContext、useRef、useMemo、useCallback。
2. 意义：函数组件也能做类组件所有事（状态、生命周期、复用逻辑），类组件开始边缘化。

# 16.x 必用场景（不用就难受）
1. 弹窗 / 浮层：必须用 Portals，否则被父容器 overflow:hidden 裁剪、层级被压。
2. 逻辑复用：用 自定义 Hooks，告别 HOC 嵌套地狱。

---

React 17

React 17（2020，过渡版）：无新特性，只为平滑升级

要点速览

# 核心变更（不影响业务逻辑，但为 18 铺路）
1. 事件系统重构：事件委托从 document 移到根容器节点（避免多版本冲突）。
2. 新 JSX 转换：不再依赖 React 全局导入，编译时自动引入辅助函数。
3. 渐进式升级：一个项目可同时运行多个 React 版本，逐步迁移。

# 为什么是过渡版？
让大型应用无痛升级到 18，先改底层兼容，再上大特性。

---

React 18

React 18（2022，革命性）：并发渲染 + 自动批处理，渲染机制大改

要点速览

# 关键词
并发渲染、自动批处理、Transitions、Suspense SSR、新 Hooks。

# 1. 并发渲染（Concurrent Rendering）稳定
渲染不再阻塞主线程：可中断、可恢复、可优先级调度，UI 更流畅，大列表 / 复杂表单不卡顿。
开启方式：18 新根 API（替换 ReactDOM.render）,ReactDOM.createRoot(root).render(<App />)

# 2. 自动批处理（Automatic Batching）
17 及之前：只有合成事件（如 onClick）内的多 setState 才合并。
18 所有场景自动批处理（Promise、setTimeout、原生事件、异步函数），减少不必要渲染，性能更好。
18 中，两次 setState 只会重渲染一次
setTimeout(() => {
  setCount(c => c+1);
  setFlag(f => !f);
}, 1000);

# 3. Transitions：区分紧急 / 非紧急更新
useTransition：标记非紧急更新（如搜索框过滤、列表排序），让紧急更新（输入、点击）优先响应。
const [isPending, startTransition] = useTransition();
function handleChange(e) {
  startTransition(() => {
    setSearch(e.target.value); # 非紧急，后台处理
  });
}

# 4. 新 Hooks
useDeferredValue：延迟更新非关键数据（如搜索结果），避免阻塞高优先级渲染。
useSyncExternalStore：订阅外部状态（如 Redux、MobX），兼容并发渲染，避免撕裂。
useInsertionEffect：比 useLayoutEffect 更早，用于注入 CSS-in-JS 样式。

# 5. Suspense + SSR 流式渲染
renderToPipeableStream：服务端流式输出，首屏更快，可选择性注水。

# 如果不升级到 18
大应用卡顿严重，并发能力缺失。
异步场景渲染冗余，性能差。
无法使用新库（如 React Query 5、新 UI 库），生态逐步放弃 17 及以下。

---

React 19

React 19（2024.12，现代化全栈）：表单、异步、服务端全面简化

要点速览

# 关键词
Actions、内置表单 Hooks、React Compiler、Server Components 成熟。

# 1. Actions：统一异步逻辑（告别手动 pending/error）
startTransition 支持异步函数，自动管理 pending、error、回滚。
const [error, submitAction, isPending] = useActionState(async (prevState, formData) => {
  const res = await fetch("/api/submit", { method: "POST", body: formData });
  if (!res.ok) throw new Error("提交失败");
  return { success: true };
}, { success: false });

# 2. 内置表单 Hooks（不用自己封装）
useFormState：管理表单状态（值、错误、提交结果）。
useFormStatus：获取表单提交状态（pending、提交中），用于按钮 loading。
useOptimistic：乐观更新（点赞、收藏、评论），先更新 UI，失败再回滚。

# 3. React Compiler（自动优化）
自动生成 useMemo/useCallback，减少手动优化负担，性能更好。

# 4. Server Components（RSC）成熟
服务端渲染组件，零客户端 JS、首屏极速、SEO 友好，Next.js App Router 标配

# 如果不升级到 19
表单、异步逻辑样板代码极多，开发效率低。
无法使用 RSC / Server Actions，全栈能力缺失。
新生态（如 Next.js 15、Remix 2）全面拥抱 19，旧版本逐步被淘汰。

---