在 React 15 的环境中，选择类组件还是函数式组件，结论非常明确：
如果你的组件需要状态（state）或生命周期方法，必须使用类组件；如果组件只是纯渲染（无状态、无副作用），可以使用函数式组件。
原因在于 React 15 及更早版本中，函数式组件被称为“无状态函数组件”，它有着根本性的功能限制。
1. 为什么必须用类组件？
在 React 15 中，只有类组件才能拥有以下能力：
- State（内部状态）：函数式组件无法使用
this.state或this.setState。 - 生命周期方法：如
componentDidMount、shouldComponentUpdate、componentWillUnmount等。 - Refs（获取真实DOM或组件实例）：虽然可以使用字符串 refs（不推荐）或回调 refs，但如果需要获取组件实例的方法（如调用子组件函数），类组件是唯一选择。
- 错误边界：React 15 中只有类组件能实现
componentDidCatch。
示例对比：
// ✅ 在 React 15 中：需要状态/生命周期 -> 必须用类组件
class Timer extends React.Component {constructor(props) {super(props);this.state = { seconds: 0 };}componentDidMount() {this.interval = setInterval(() => {this.setState((prev) => ({ seconds: prev.seconds + 1 }));}, 1000);}componentWillUnmount() {clearInterval(this.interval);}render() {return <div>Seconds: {this.state.seconds}</div>;}
}
2. 什么时候可以使用函数式组件？
如果组件只依赖传入的 props 进行渲染，没有内部状态、没有生命周期、不需要操作 refs，那么函数式组件是更优选择：
- 代码更简洁：没有
render方法，没有this绑定的困扰。 - 性能略好：没有实例化过程，但在 React 15 中这种优化微乎其微。
- 更纯粹的“展示型”组件。
示例：
// ✅ 纯渲染组件：可以使用函数式组件
function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}// 等价于：
// class Welcome extends React.Component {
// render() {
// return <h1>Hello, {this.props.name}</h1>;
// }
// }
3. 一个重要的历史背景
React 16.8 版本（约2019年）引入了 Hooks，才让函数式组件拥有了状态、生命周期模拟（useEffect）、上下文等全部能力。
在你的 React 15 环境中：
- 不存在
useState、useEffect等 Hooks。 - 如果你尝试在函数式组件中使用这些，代码会直接报错或无法运行。
总结建议
在 React 15 项目中：
- 默认使用类组件，除非你能100%确定该组件永远不需要状态、生命周期、refs实例方法。
- 函数式组件仅用于非常简单的、纯渲染的 UI 片段（如列表项、布局骨架）。
- 如果你现在接手的是一个 React 15 的老项目，并且计划后续升级，建议保持统一（多用类组件），因为升级到 React 16/17/18 后，类组件依然完全可用，而函数式组件可以利用新特性逐步重构。