React 自 2013 年开源至今，经历了多次重大架构升级和 API 演进。理解版本变迁不仅能帮助你把握技术方向，也能在实际项目中根据版本特性做出合理的技术选择。
1.4.1 类组件时代（React 15 及之前）
在 React 初期，组件的主要形式是类组件（Class Component）。通过继承 React.Component，开发者可以定义 render 方法返回 UI，并使用 this.state 和 this.setState 管理内部状态，通过生命周期方法（componentDidMount、componentDidUpdate、componentWillUnmount）控制副作用。
// 典型的类组件
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
componentDidMount() {
document.title = `Count: ${this.state.count}`;
}
componentDidUpdate() {
document.title = `Count: ${this.state.count}`;
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
增加
</button>
</div>
);
}
}类组件曾是 React 开发的唯一选择，但它存在明显的痛点：
- 逻辑复用困难：高阶组件（HOC）和 Render Props 模式会导致“包装器地狱”，组件层级深，调试困难。
- 生命周期方法复杂：同一逻辑可能分散在
componentDidMount、componentDidUpdate、componentWillUnmount中，维护成本高。 - this 绑定容易出错：需要手动绑定方法或使用箭头函数。
- TypeScript 类型推断不如函数友好：泛型组件实现复杂。
1.4.2 Hooks 的诞生与函数组件崛起（React 16.8）
2019 年 2 月发布的 React 16.8 引入了 Hooks，这是一次革命性变化。Hooks 允许在函数组件中使用状态、副作用等 React 特性，不再需要类的语法。函数组件从仅能做简单展示，一跃成为全功能组件。
// 函数组件 + Hooks 实现同样功能
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>增加</button>
</div>
);
}Hooks 的优势清晰明确：
- 代码更简洁：无需构造器、
this绑定、生命周期方法。 - 逻辑复用：自定义 Hooks 可以轻松抽取有状态逻辑，替代 HOC 和 Render Props，实现真正的业务逻辑复用。
- 关注点分离：相关逻辑可以聚合在一个自定义 Hook 内，而不是分散在多个生命周期方法。
16.8 之后，函数组件 + Hooks 逐渐成为 React 的标准开发方式。社区达成共识：新项目一律使用函数组件，老项目中新增功能也优先使用 Hooks，仅在维护存量类组件时才涉及它们。
1.4.3 React 17：为后续升级铺路的“无新特性”版本（2020 年）
React 17 是一个特殊版本——它没有添加面向开发者的新功能，主要目标是让 React 自身的升级更容易、更安全。
关键变更：
- 事件委托机制重构：React 不再将事件委托到
document上，而是委托到渲染的根容器上。这解决了多个 React 版本共存时代件冲突的问题，也为微前端等场景提供了更好的支持。 - 渐进式升级路径：React 17 支持同一个应用中逐步升级 React 版本，例如一部分子树停留在 React 17，另一部分升级到 18，这对大型项目非常友好。
- 移除了一些过时的 API：如
React.addons等，进一步精简核心库。
对于开发者，React 17 的迁移几乎是无痛的，但它是通向 React 18 并发模式的关键一步。
1.4.4 React 18：并发渲染与新的交互体验（2022 年）
React 18 标志着并发渲染（Concurrent Rendering） 的正式落地。并发模式并未引入新的组件写法，而是赋予 React 一种“同时准备多个 UI 版本”的能力，让应用在保持响应的同时执行重渲染任务。
核心特性一览：
- 并发渲染
通过 createRoot API 启用，React 可以中断、暂停、恢复渲染，优先响应用户输入。这保证了界面的流畅性，避免了长时间占主线程导致的卡顿。
- 自动批处理
在 React 18 中，所有状态更新——无论是在事件处理、setTimeout、Promise 还是原生事件中——都会自动批量处理，减少不必要的重渲染。之前只能在合成事件和生命周期中批量更新。
- Transitions
useTransition 和 startTransition 可以标记某些更新为非紧急更新（联想搜索、页面切换动画），让 React 优先处理点击、输入等紧急交互。
- Suspense 增强
Suspense 不再仅限于代码分割，现在可以用于数据加载，配合过渡 API 实现优雅的加载状态，避免旧数据显示和布局抖动。
- 流式 SSR 与选择性注水
服务端渲染时可边渲染边传输 HTML，不必等待整个页面搭建完成，客户端可以选择性激活交互部分（选择性注水），大幅提升首屏加载速度。
React 18 是仍在广泛使用的版本，大多数新项目都从此版本起步。了解这些特性并适时应用，可以显著提升用户体验。
1.4.5 React 19：编译器优化与全栈能力增强（2024 年）
React 19 将带来一批令人兴奋的特性，核心方向是自动编译优化与服务端能力演进。
主要变化：
- React Compiler（React Forget）
一个实验性的编译器，能够自动处理 useMemo、useCallback、React.memo 等手动优化。开发者只需写声明式代码，编译器在编译时自动缓存组件和值，减少不必要的重渲染，同时保证行为正确。这有望从根本上解决 React 应用中过度使用 memo 的困境。
- Server Components（RSC）正式支持
虽然 RSC 在 Next.js 13+ 中已经可用，React 19 会在库本身层面提供更完备的原生支持。Server Components 允许在服务端渲染组件，不会增加客户端 bundle 体积，可直接访问后端数据源，从根本上改变了组件设计模式。
- 新的 Hooks 与 API
use()：用于在渲染期间消费 Promise、Context 等，简化 Suspense 下的异步数据获取。useActionState/useFormStatus：简化表单处理，提供内置的状态管理和乐观更新。useOptimistic：在服务器响应前抢先更新 UI，提升瞬时反馈体验。
- ref 增强
ref 可以作为函数参数传递，forwardRef 将逐步不再必要，代码更简洁。
- 文档元数据的原生支持
可以直接在组件中写 <title>、<meta>、<link> 等标签，React 会自动将它们提升到 <head> 中，无需第三方库。
React 19 的目标是让开发者写更少的优化代码、获得更好的性能、更自然地使用全栈能力。虽然正式发布后有迁移学习成本，但方向是进一步降低 React 的心智负担。
1.4.6 演进总结与学习建议
从类组件到函数组件，从手动优化到编译器自动化，React 版本演进的脉络清晰：持续降低开发复杂度，提升性能上限，拥抱全栈与服务端。对于开发者：
- 如果你是新手，从函数组件 + Hooks + React 18 开始学习即可，了解类组件以应对维护旧项目的需求。
- 如果你在面试中，可以清晰阐述各版本的里程碑及 Hooks 解决的问题，展现对技术趋势的理解。
- 在生产项目中，优先升级到 React 18 享受并发特性，并关注 React 19 的生态成熟度，逐步尝试 RSC 等新范式。
记住：React 的 API 虽然不断演进，但其组件化、声明式、单向数据流的设计理念始终如一，掌握这些基础原理，你就能够快速适应任何版本变化。