React函数组件 vs 类组件：从生命周期到Hooks的完整进化史

原创

于 2026-02-19 18:11:06 发布 · 429 阅读

文章标签：

#React #函数组件 #类组件 #Hooks

React函数组件 vs 类组件：从生命周期到Hooks的完整进化史

2019年2月6日，React团队在16.8版本中正式推出Hooks API，这个看似简单的更新却彻底改变了React开发范式。当我们回顾React的发展历程，会发现函数组件从最初的"二等公民"逐渐成为官方推荐的首选方案，这背后隐藏着怎样的技术演进逻辑？

1. 类组件的黄金时代

2015年ES6正式发布前，React组件主要通过React.createClass方式创建。随着ES6 class语法的普及，类组件凭借完整的生命周期管理和状态控制能力，成为当时构建复杂组件的唯一选择。

类组件的核心优势在于其完整的生命周期体系：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>当前时间：</h1>
        <h2>{this.state.date.toLocaleTimeString()}</h2>
      </div>
    );
  }
}

这种模式虽然功能完备，但也暴露出几个明显问题：