前言

在 react 中，组件分为两种，一种是类组件（class 组件），另一种是函数组件。

在 react 的 16.8 版本之前，我们常规的 react 项目均使用类组件构建，

react 中的函数组件在 16.8 版本之前也被称为无状态组件，因为没有自己 state 和生命周期，根本无法满足基本的项目需求，只能用作 UI 渲染。

但是自从 react 的 16.8 版本推出 hooks 之后，函数组件凭借着绝对的可读性和高复用性迅速替代了臃肿的类组件。类组件慢慢退出了大众的视野。函数组件逐渐称为大众的最优选。

现在，我们来看看类组件和函数组件都有什么不同的地方。

类组件和函数组件的区别

• 类组件有生命周期 / 函数组件没有生命周期（16.8 版本后通过 hooks 中的 useEffect 有了生命周期)
• 类组件需要继承 Class / 函数组件不需要继承 Class
• 类组件有自己的状态 / 函数组件没有自己的状态（16.8 版本之后通过 hooks 中的 useState()有了状态）
• 类组件可以获取实例化之后的 this / 函数组件没有实例

类组件和函数组件的优缺点比较

• 从生命周期的角度来说，类组件的生命周期比函数组件的生命周期更多。 --类组件优
• 从功能上来说，类组件拥有错误边界，但是函数组件没有 --类组件优
• 从代码上来说，函数组件比类组件更简洁易读，更干净清爽 --函数组件优
• 从组件化的角度来说，函数组件也比类组件更好拆分和复用 --函数组件优

总结

类组件和函数组件都有各自的优缺点。而在我们日常的开发中，代码的可读性和复用性一定是重中之重。所以在 react 的项目中，函数组件一定是首选，一般情况下使用函数组件也都可以满足项目需求，当某一个组件需要有特殊通途的时候（比如错误边界或者需要使用到 class 中的某一个生命周期）才会选择类组件。

信息

作者：工边页字 链接：https://juejin.cn/post/7105685684718927909 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。