React15 - 在React15项目中使用类组件还是函数式组件

在 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 项目中：

1. 默认使用类组件，除非你能100%确定该组件永远不需要状态、生命周期、refs实例方法。
2. 函数式组件仅用于非常简单的、纯渲染的 UI 片段（如列表项、布局骨架）。
3. 如果你现在接手的是一个 React 15 的老项目，并且计划后续升级，建议保持统一（多用类组件），因为升级到 React 16/17/18 后，类组件依然完全可用，而函数式组件可以利用新特性逐步重构。