“功能组件 (Functional Component)” 和 “类组件 (Class Component)” 的使用时机，是 React（或 Vue 2 + Class API）里一个常见的设计抉择点。
一、前置概念澄清
| 名称 | 说明 |
|---|---|
| 类组件 (Class Component) | 使用 class 关键字定义，继承 React.Component（或在 Vue2 用 vue-class-component），通过生命周期方法控制逻辑。 |
| 函数组件 (Functional Component) | 使用函数定义的组件（function MyComponent(props) { ... }），React16.8+ 可以使用 Hook 管理状态和生命周期。 |
Vue 2 场景下，“类组件”通常指使用 vue-class-component + vue-property-decorator 的写法，而“函数式组件”(functional: true) 指无状态、无实例的轻量组件。
React 和 Vue 语义略不同，下面分别讲。
二、React 场景
使用 函数组件 (Functional Component) 的情况（现在主流）
-
组件只依赖 props 或 hooks，不需要复杂的生命周期；
-
想要更简洁的写法（无 this、无绑定）；
-
性能更好（React 18 以后底层优化函数组件）；
-
想用 React Hooks；
-
想用 自定义 Hook 封装逻辑。
示例：
function UserList({ users }) {const [filter, setFilter] = useState('');const filtered = users.filter(u => u.name.includes(filter));return (<div><input value={filter} onChange={e => setFilter(e.target.value)} /><ul>{filtered.map(u => <li key={u.id}>{u.name}</li>)}</ul></div>);
}
使用 类组件 (Class Component) 的情况（旧项目或特殊情况）
-
项目是老代码基于 Class API；
-
依赖生命周期钩子（componentDidCatch, getSnapshotBeforeUpdate）；
-
需要使用 错误边界（Error Boundary）；
-
团队已有大量类组件封装（统一风格或工具）。
示例：
class ErrorBoundary extends React.Component {state = { hasError: false };componentDidCatch(error, info) {this.setState({ hasError: true });}render() {return this.state.hasError ? <h1>Something went wrong.</h1> : this.props.children;}
}
三、Vue 2 场景
在 Vue 2 中，“类组件”与“函数式组件”含义不同：
| 类型 | 特点 | 典型使用场景 |
|---|---|---|
Class Component (vue-class-component) |
有实例 (this)，有响应式数据、生命周期、计算属性等 |
正常业务组件 |
Functional Component (functional: true) |
无实例、无响应式数据，只接收 props、slots |
纯渲染逻辑、性能优化场景（如列表子项、无状态展示） |
Vue 2 函数式组件示例：
<template functional><div class="tag" :class="props.type">{{ props.label }}</div>
</template>
四、总结对比表
| 对比项 | React 类组件 | React 函数组件 | Vue2 类组件 | Vue2 函数式组件 |
|---|---|---|---|---|
| 状态（state） | 有 | 通过 Hook | 有 | 无 |
| 生命周期 | 有 | Hook 模拟 | 有 | 无 |
| 实例（this） | 有 | 无 | 有 | 无 |
| 性能 | 一般 | 更优 | 一般 | 更优 |
| 主要用途 | 旧项目、错误边界 | 新项目主流 | 普通组件 | 纯渲染、轻量组件 |
推荐结论
| 框架 | 推荐写法 |
|---|---|
| React（新项目） | ✅ 使用函数组件 + Hooks（类组件仅用于 ErrorBoundary） |
| Vue 2 | ✅ 默认使用普通（或类）组件；仅在无状态、性能要求高的纯展示组件中用函数式组件 |
