React类组件和函数组件的区别？

在React的世界里，类组件和函数组件是构建UI的两种主要方式。它们都能完成任务，但写法和背后的哲学截然不同。理解它们的差异，能帮你更好地选择什么时候该用什么，尤其是在今天Hooks已成主流的背景下。

写法与心智模型

类组件是基于ES6 class的。你得继承React.Component，写一个render方法，在里面返回JSX。状态管理在this.state里，改状态要用this.setState()。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    return (
      <div>
        <p>你点击了 {this.state.count} 次</p>
        <button onClick={this.increment}>点我</button>
      </div>
    );
  }
}

函数组件就简单多了，它就是个纯JavaScript函数，接收props作为参数，直接返回JSX。在Hooks出现之前，它就是个“无状态”的哑组件。

function Welcome(props) {
  return <h1>你好，{props.name}</h1>;
}

类组件是命令式的，你得管理组件的生命周期和内部状态。函数组件（配合Hooks）则是声明式的，你更关心“根据当前的状态和props，UI应该是什么样子”。

状态与生命周期的管理

这是最核心的区别。类组件有自己的状态（this.state）和完整的生命周期方法，比如componentDidMount、componentDidUpdate和componentWillUnmount。这些生命周期钩子让你能在组件挂载、更新和销毁时执行特定操作。

函数组件最初啥也没有，就是个纯函数。但React 16.8引入Hooks后，游戏规则变了。现在你可以用useState来管理状态，用useEffect来处理副作用（相当于生命周期做的事）。

import { useState, useEffect } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log('组件挂载或count更新了');
    return () => { console.log('清理工作'); };
  }, [count]);
  return (
    <button onClick={() => setCount(c => c + 1)}>计数: {count}</button>
  );
}

useEffect把三个生命周期钩子的功能整合到了一个更声明式的API里。这种写法更倾向于把相关的逻辑（状态+副作用）组织在一起，而不是按生命周期阶段硬拆开。

this绑定与性能

类组件里有个经典头疼问题：this的绑定。你得在构造函数里绑事件处理函数，或者用箭头函数，不然this可能就丢了。函数组件没这烦恼，因为压根没有this。

从性能上说，函数组件通常更轻量。类组件要实例化，而函数组件只是被调用。React团队也表示，未来优化会更偏向函数组件。

所以现在怎么选？对于新项目，几乎无一例外地推荐使用函数组件 + Hooks。这是React的未来，逻辑复用更灵活（自定义Hook），代码也更容易理解和测试。类组件还会存在很长一段时间，主要是为了维护老项目。但当你开始新功能时，试试Hooks，你可能会喜欢上那种更直接的表达方式。