类为什么在前端框架用的越来越少了？

类（class）在前端框架里为什么越来越少用了？

这是一个非常真实的趋势，尤其在 React、Vue 3、Svelte 等现代前端框架的生态里，基于 class 的组件写法正在被逐渐边缘化，取而代之的是函数式组件 + Hooks（或 Composition API）。

下面是目前最核心的几条原因，按重要程度排序：

1. Hooks / Composition API 带来了更自然的代码组织方式

class 组件的问题在于：生命周期和状态逻辑是分散在不同方法里的，同一个功能的代码被切分成多个生命周期方法：

class UserProfile extends Component { state = { user: null, loading: true }; componentDidMount() { this.fetchUser(); } componentDidUpdate(prevProps) { if (prevProps.id !== this.props.id) { this.fetchUser(); } } fetchUser = async () => { ... } }

而用 Hooks / Composition API 后，逻辑可以按“功能”聚合：

function UserProfile({ id }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { const fetchUser = async () => { setLoading(true); const data = await api.getUser(id); setUser(data); setLoading(false); }; fetchUser(); }, [id]); // 依赖变化自动重跑 // 所有和「获取用户」相关的逻辑都在一起 }

结论：Hooks 让“关注点分离”变成了“关注点聚合”，代码更直观、更容易复用。

2. class 的 this 绑定问题太痛苦

几乎每个前端开发者都踩过这些坑：

• 忘记 bind → 点击事件 this 变成 undefined
• 在 render 里写onClick={this.handleClick.bind(this)}→ 每次渲染都创建新函数
• 用箭头函数解决 → 类里到处是箭头函数，代码看着别扭
• constructor 里一堆 this.xxx = this.xxx.bind(this)

Hooks 彻底消灭了this的概念，从根源上解决了这个问题。

3. 函数组件 + Hooks 性能更好（官方优化方向）

• 函数组件本身更轻量（没有实例、没有 prototype 链）
• React 官方从 16.8 开始把所有新特性都优先给函数组件（Suspense、Concurrent Mode、Server Components、use() 等）
• class 组件的很多特性（如 getDerivedStateFromProps、componentDidCatch）在 Hooks 时代都有更好的替代方案

React 官方文档现在甚至把 class 组件放在“旧写法”章节，强烈推荐函数组件。

4. 更好的 Tree Shaking 和打包体积

函数组件 + Hooks 更容易被 bundler（webpack、esbuild、rolldown、turbopack 等）做 tree-shaking。

class 组件因为有实例方法、生命周期、this 绑定等，很难被完全消除死代码。

5. 社区和生态已经全面转向函数式

• 2020 年之后，几乎所有新库、新组件、新教程都默认用 Hooks
• 大量经典库（如 react-query、zustand、swr、jotai、valtio、tanstack table 等）都是基于 Hooks 设计的
• 用 class 写组件反而会显得“过时”，在团队协作中增加心智负担

6. Composition API / Signals 进一步加速了“无 class”趋势

Vue 3 的 Composition API、SolidJS 的 Signals、Svelte 的 runes、Angular 的新控制流 + inject()，都在往纯函数 + 响应式变量的方向演进，几乎完全抛弃了 class 的写法。

那 class 还有什么场景会用？

目前还在用 class 的主流场景其实已经很少了，主要剩下：

• 遗留项目（不得不维护的老代码）
• 需要使用 React 的 ErrorBoundary（目前官方仍推荐 class 组件做 ErrorBoundary）
• 某些特殊的高阶组件（HOC）场景（但现在也越来越少）
• 企业内部的“规定必须用 class”（极少数）

总结：为什么 class 被抛弃的本质

class 组件的设计是面向对象的，而现代前端更倾向于函数式 + 组合式编程范式。

函数式写法 + Hooks / Composition在以下维度全面胜出：

• 逻辑聚合度更高
• 没有 this 绑定地狱
• 更容易复用逻辑（自定义 Hook / composable function）
• 官方优先支持新特性
• 生态和社区共识已经转向
• 更符合现代 JS/TS 的发展方向（const/let、箭头函数、解构、模块化）

一句话：

class 组件在前端不是“不好用”，而是“不再是最优解”了。

现在的趋势是：能用函数组件 + Hooks 的地方，尽量不用 class。

你现在项目里还在用 class 组件吗？还是已经完全切到 Hooks 了？