反应功能性无状态组件，PureComponent，Component；有什么区别

Question

从React v15.3.0开始，我们有了一个名为PureComponent的新基类，以扩展内置的PureRenderMixin。我了解的是，在幕后，它对内部的道具进行了比较浅的比较shouldComponentUpdate。现在，我们有3种方法来定义React组件：功能性无状态组件，不扩展任何类扩展PureComponent类的组件扩展Component类的常规组件一段时间以前，我们曾经将无状态组件称为“纯组件”，甚至称为“哑组件”。似乎“纯”一词的整个定义现在已经在React中改变了。尽管我了解这三者之间的基本区别，但仍不确定何时选择。另外，每种性能对性能有何影响和权衡？更新：这些是我希望得到澄清的问题：我应该选择将简单的组件定义为功能性的（出于简化的目的）还是扩展PureComponent类的（出于性能的考虑）？我为失去的简单性而获得了真正的性能提升吗？Component当我总是可以使用PureComponent以获得更好的性能时，是否需要扩展常规类？

Answer 1

我不是反应超常的天才，但据我了解，我们可以在以下情况下使用每个组件

1. 无状态组件- 这些组件没有生命周期，因此应在呈现父组件的重复元素时使用这些组件，例如呈现仅显示信息且没有任何动作要执行的文本列表。

2. 纯组件-这些是具有生命周期的项目，并且在给出一组特定的道具时，它们将始终返回相同的结果。当显示结果列表或不包含复杂子元素的特定对象数据时，可以使用这些组件，并用于执行仅影响自身的操作。这样的显示用户卡列表或产品卡列表（基本产品信息），并且用户只能执行的操作是单击以查看详细信息页面或将其添加到购物车。

3. 普通组件或复杂组件-我使用了术语“复杂组件”，因为它们通常是页面级组件，由许多子组件组成，并且由于每个子组件都可以以自己独特的方式运行，因此您不能百分百确定它会在给定状态下呈现相同的结果。正如我通常所说的，这些应该用作容器组件

Answer 2

• React.Component是默认的“常规”组件。您可以使用class关键字和声明它们extends React.Component。将它们视为具有生命周期方法，事件处理程序和任何方法的类。

• React.PureComponent是使用功能对其和进行浅表比较的函数React.Component实现的。你必须使用，如果你知道的组件具有改变的道具或状态嵌套的数据，你想重新呈现。因此，如果当您作为道具传递或设置为状态的数组或对象发生变化时需要重新渲染组件，则它们并不是很好。shouldComponentUpdate()propsstateforceUpdate()

• 功能组件是没有生命周期功能的组件。它们据说是无状态的，但是它们是如此干净整洁，以至于我们现在有了钩子（自React 16.8起），因此您仍然可以拥有状态。所以我想它们只是“干净的组件”。