什么时候在功能组件(ClassComponent)上使用类组件 (FunctionalComponent)？

“功能组件 (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	✅ 默认使用普通（或类）组件；仅在无状态、性能要求高的纯展示组件中用函数式组件