函数组件与类组件：两种思维模式的碰撞
说实话，我刚接触React那会儿，类组件还是主流。那时候大家都觉得class才是正经写法，函数组件就是个「轻量级选手」。但你看现在，函数组件加上Hooks，已经成了React的绝对主角。
这一章，我们来聊聊这两种组件的定义、使用，以及我个人的选择建议。
函数组件的定义与使用
函数组件，说白了就是一个返回JSX的普通函数。它接收props作为参数，输出UI。
// 最简单的函数组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 箭头函数写法，我个人更偏爱这种
const Welcome = ({ name }) => {
return <h1>Hello, {name}</h1>;
};函数组件有几个特点：
- 无状态：早期函数组件没有自己的状态，只能接收props渲染
- 无生命周期：没有componentDidMount这些方法
- 纯函数：同样的输入，永远输出同样的结果
但自从React 16.8引入Hooks后，函数组件也能用useState管理状态，用useEffect处理副作用了。嗯，这里要注意，Hooks的出现彻底改变了游戏规则。
我的习惯：新项目我全部用函数组件。原因很简单——代码更少，逻辑更集中，测试也更容易。
类组件的定义与使用
类组件是用ES6 class定义的组件。它继承自React.Component，必须实现render方法。
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
componentDidMount() {
console.log('组件挂载了');
}
render() {
return (
<div>
<h1>Hello, {this.props.name}</h1>
<p>计数：{this.state.count}</p>
</div>
);
}
}类组件的特点：
- 有状态：通过this.state管理内部状态
- 有生命周期：componentDidMount、componentDidUpdate等
- this绑定：方法需要手动绑定this，或者用箭头函数
我曾经踩过的坑：类组件里忘记绑定this，导致事件处理函数拿不到正确的上下文。这个问题排查起来特别头疼，尤其是团队新人写的代码。
两种组件的对比
| 对比维度 | 函数组件 | 类组件 |
|---|---|---|
| 定义方式 | 普通函数/箭头函数 | ES6 class |
| 状态管理 | useState Hooks | this.state |
| 生命周期 | useEffect模拟 | 内置生命周期方法 |
| 代码量 | 更少，更简洁 | 相对较多 |
| this绑定 | 不需要 | 需要手动处理 |
| 性能 | 通常更好 | 略差（实例化开销） |
| 学习曲线 | 平缓 | 较陡（class概念） |
你想想看，为什么函数组件现在这么受欢迎？说白了，就是因为它更符合JavaScript的函数式编程思想。没有this的困扰，没有生命周期方法的混乱，逻辑可以按功能拆分到不同的Hooks里。
何时选择哪种组件
我个人有个简单的判断标准：
- 新项目一律用函数组件——这是React官方推荐的方向，也是社区共识
- 老项目维护——如果项目里全是类组件，没必要强行重构。除非你遇到性能瓶颈或者逻辑特别混乱
- 需要错误边界——目前只有类组件支持componentDidCatch，函数组件还不行
- 团队技术栈——如果团队对class更熟悉，用类组件也没问题。但我建议尽快迁移
核心建议：除非你有特殊理由（比如错误边界），否则优先选择函数组件。我在过去两年参与过的6个React项目中，全部采用函数组件+Hooks的方案，开发效率和代码质量都有明显提升。
我记得有一次，团队里有个老哥坚持用类组件写新功能。结果代码review的时候，光this绑定的问题就改了三次。后来他主动说：「还是用函数组件吧，省心。」
嗯，这就是现实。技术选型有时候不光是技术问题，也是团队协作的问题。函数组件让代码更简单，简单就意味着更少的bug，更快的开发速度。
最后说一句：不管选哪种，理解它们的本质区别才是关键。函数组件是「渲染函数」，类组件是「实例对象」。想清楚这个，你就能做出合适的选择了。