React.js 中的 Function 和 Class 组件之间的确切区别是啥？ [复制]

Posted 2023-02-23

【中文标题】React.js 中的 Function 和 Class 组件之间的确切区别是啥？ [复制]

【英文标题】：What is the exact difference between Function and Class component in React.js? [duplicate]React.js 中的 Function 和 Class 组件之间的确切区别是什么？ [复制]

【发布时间】：2019-03-21 05:56:10

【问题描述】：

除了Class有状态和函数没有，我认为我们可以通过类组件来实现我们的状态和功能需求，那么为什么我们需要React.js中的Function Component呢？

【参考方案1】：

实际上，除了状态可用性之外，两者之间并没有界限，因为很多开发者经常会一个接一个地弄错，而且有时每个人都有不同的理解和定义，比如 smart-dumb 组件、container-component 等。实际使用（以及我的一些经验），使用功能组件通常更容易，因为：

代码中的噪音更少，不需要额外的声明，从而提高了代码的可读性。

在代码大小和复杂性方面更加紧凑和实用，因为它不像类组件那样包含太多的道具和状态。

根据一些文章 (https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc)，无状态功能组件也提高了性能，因为它不涉及生命周期方法。

此外，有时您不想为仅通过您的类组件有效的紧凑小型不可重用组件编写另一个文件/类。