类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 更容易被 bundlerwebpack、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 了