2-1 React16-19有哪些变化？带来了哪些惊喜？
React 16：从"痛不欲生"到"焕然一新"
React 16 之前的版本更新频繁，大版本之间基本不兼容，小版本更新也可能导致整个系统崩溃。这段时期 React 的生态看起来非常丰富，实际上却很杂乱——大量第三方库的存在就是为了填补版本兼容性的窟窿。
React 16 带来的核心变革：
- Fiber 架构：重写了 React 的协调算法，支持可中断渲染和优先级调度
- Hooks 诞生：从类组件全面转向函数式编程，这是对整个前端行业的一次巨大冲击
- Error Boundaries：首次提供了组件级的错误捕获机制
- Portals：支持将子组件渲染到父组件以外的 DOM 节点
- Fragment：支持返回多个元素而不需要额外的包裹标签
Hooks 的出现让 React 从 Class Component 走向 Function Component，函数式编程对 IDE 的代码追踪非常友好，对开发者来说逻辑更加内聚，修改和复用也更为方便。
学习建议：关注官方动态
React 团队非常活跃，每次更新都可能带来概念上的革新。建议开发者：
- 在 GitHub 上对 React 仓库点 Watch，接收更新通知
- 关注 React 官方博客（https://react.dev/blog）的发布公告
- 遇到不可预知的错误时，先去 GitHub Issues 搜索，判断是框架问题还是自身代码问题
- 订阅 React 的 RSS 或 Telegram/推特通知
React 17：承上启下的过渡版本
React 17 被定位为"渐进升级"的过渡版本，采用了与 Angular 类似的升级策略——大版本虽然变化了，但旧版本的代码依然可以正常运行。核心变化：
- 事件委托机制变更：从
document级别改为挂载到 root DOM 容器上，提升了微前端场景下的兼容性 - 事件系统靠拢原生：
onFocus/onBlur等事件改用浏览器原生事件 - 删除事件池：React 16 中为了性能优化使用的事件池机制被移除，简化了事件处理逻辑
- 新的 JSX 转换：不再需要
import React from 'react'
React 17 的意义在于它建立了"向后兼容"的升级范式，从这之后所有的版本升级都遵循这一原则。
React 18：并发渲染的革命
React 18 来得突然但意义重大，它带来了多个重量级特性：
1. 并发渲染（Concurrent Rendering）
这是 React 18 最核心的能力。在 React 17 中，只有浏览器事件触发期间的状态更新会被批量合并；React 18 将事件处理后的状态更新也纳入了合并范围，实现了全自动的并发渲染。
// React 18 自动批处理示例
function handleClick() {
setCount(c => c + 1); // 不会触发渲染
setFlag(f => !f); // 不会触发渲染
// React 18 会在这里一次性合并渲染
}
jsx
2. 新的 Suspense
基于并发渲染的新版 Suspense 支持服务端渲染中的流式传输（Streaming SSR），显著提升了 SSR 的性能和用户体验。
3. startTransition
startTransition API 解决了一个常见的性能问题：当页面响应较慢时，某些耗时的状态更新会阻塞用户输入。
import { startTransition } from 'react';
// 搜索输入场景
function handleChange(e) {
// 紧急更新：立即更新输入框
setInputValue(e.target.value);
// 非紧急更新：延迟更新搜索结果
startTransition(() => {
setSearchQuery(e.target.value);
});
}
jsx
startTransition 比 setTimeout 更优，因为它会被 React 调度器更早地处理渲染更新，同时保持用户输入的流畅性。
4. 新的 Root API
// React 17
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));
// React 18
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);
jsx
createRoot 是启用 React 18 并发特性的入口。
5. breaking changes（破坏性变更）
useEffect清理操作改为异步执行，避免阻塞页面渲染- JSX 不再允许返回
undefined - 移除了 React Native Web 中不需要的内部组件
React 19：Actions 与 Server Components
React 19 于 2024 年 12 月正式发布（稳定版），带来了以下核心特性：
1. Actions 机制
Actions 是 React 19 最重要的概念之一，它自动处理了异步操作中的挂起状态、错误处理和乐观更新：
function UpdateName() {
const [error, submitAction, isPending] = useActionState(
async (previousState, formData) => {
const error = await updateName(formData.get("name"));
if (error) return error;
redirect("/path");
return null;
},
null,
);
return (
<form action={submitAction}>
<input type="text" name="name" />
<button type="submit" disabled={isPending}>Update</button>
{error && <p>{error}</p>}
</form>
);
}
jsx
2. 新的 Hooks
| Hook | 用途 | 说明 |
|---|---|---|
useActionState | 管理 Action 的状态 | 取代了实验阶段的 useFormState |
useOptimistic | 乐观更新 | 在请求进行中立即显示预期结果 |
useFormStatus | 表单状态 | 获取父级 <form> 的提交状态 |
use | 读取资源 | 在渲染中读取 Promise 和 Context |
3. Server Components 与 Server Actions
- Server Components：在构建时或请求时在服务端渲染组件，减少客户端 JS 体积
- Server Actions：客户端组件可以调用服务端的异步函数，通过
"use server"指令标记
4. ref 作为 prop
不再需要 forwardRef，函数组件可以直接接收 ref 作为 prop：
function MyInput({ placeholder, ref }) {
return <input placeholder={placeholder} ref={ref} />;
}
jsx
5. Context 作为 Provider
const ThemeContext = createContext('');
function App({ children }) {
return (
<ThemeContext value="dark">
{children}
</ThemeContext>
);
}
jsx
6. 文档元数据支持
React 19 原生支持在组件中渲染 <title>、<link>、<meta> 标签，React 会自动将它们提升到 <head> 中。
7. 资源预加载 API
import { prefetchDNS, preconnect, preload, preinit } from 'react-dom';
function MyComponent() {
preinit('https://cdn.example.com/app.js', { as: 'script' });
preload('https://cdn.example.com/font.woff', { as: 'font' });
preconnect('https://api.example.com');
}
jsx
React 版本演进一览
| 版本 | 发布时间 | 核心特性 | 定位 |
|---|---|---|---|
| React 16 | 2017.09 | Fiber、Hooks、Error Boundaries | 架构革命 |
| React 17 | 2020.10 | 事件系统升级、渐进式迁移 | 过渡版本 |
| React 18 | 2022.03 | 并发渲染、startTransition、新 Suspense | 性能飞跃 |
| React 19 | 2024.12 | Actions、Server Components、use API | 全栈能力 |
学习建议
- 直接上手 React 18+ 稳定版，使用
create-react-app或 Vite 创建项目 - 精通 Hooks 和函数式编程——这是 React 和 Angular 都在主推的编程范式
- 掌握 TypeScript——React 和 Vue 的大型项目都离不开 TS
- React 19 可以了解但不必急于上手——目前处于稳定阶段，可以用于学习新特性
- 关注自动化工具——提升开发效率，把省下的时间用于技术研究
React 17 之后的版本升级策略参考了 Angular 的渐进式升级方案，后续版本将主要添加新特性和升级 API，不会出现破坏性的大重构。这意味着学好 React 18 的核心概念后，后续版本的跟进成本会很低。
↑