反应功能性无状态组件,PureComponent,Component;有什么区别,什么时候应该使用什么?

JavaScript

米亚十三Harry

2020-03-11

React v15.3.0知道,我们有了一个名为PureComponent的新基类,以扩展内置的PureRenderMixin我了解的是,在幕后,它对内部的道具进行了浅浅的比较shouldComponentUpdate

现在,我们有3种方法来定义React组件:

  1. 功能性无状态组件,不扩展任何类
  2. 扩展PureComponent的组件
  3. 扩展Component类的常规组件

一段时间以前,我们曾经将无状态组件称为“纯组件”,甚至称为“哑组件”。似乎“纯”一词的整个定义现在已经在React中改变了。

尽管我了解这三者之间的基本区别,但是我仍然不确定何时选择什么另外,每种性能对性能的影响和权衡如何?


更新

这些是我希望得到澄清的问题:

  • 我应该选择将简单的组件定义为功能性的(出于简化的目的)还是扩展PureComponent类的(出于性能的考虑)?
  • 我为失去的简单性而获得了真正的性能提升吗?
  • Component当我总是可以使用PureComponent以获得更好的性能时,是否需要扩展常规

第565篇《反应功能性无状态组件,PureComponent,Component;有什么区别,什么时候应该使用什么?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

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

  • React.PureComponentReact.Component实现shouldComponentUpdate()与做它的一个比较浅的功能propsstate你必须使用forceUpdate(),如果你知道组件有道具或状态嵌套数据更改,您希望重新呈现。因此,如果当您作为道具传递或设置为状态的数组或对象发生变化时需要重新渲染组件,则它们并不是很好。

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

斯丁前端 2020.03.11

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

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

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android