类（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 了？
