官方的React文档声明“React. React.”PureComponent的shouldComponentUpdate()只对对象进行浅层比较”,如果状态为“deep”,建议不要这样做。

鉴于此,是否有任何理由让人们更喜欢React ?在创建React组件时使用PureComponent ?

问题:

使用React对性能有影响吗?组件,我们可以考虑react。purecomponent ? 我猜PureComponent的shouldComponentUpdate()只执行浅层比较。如果是这样的话,难道该方法不能用于更深入的比较吗? “此外,反应。PureComponent的shouldComponentUpdate()跳过整个组件子树的道具更新”——这是否意味着道具更改被忽略?

如果有帮助的话,阅读这个媒体博客产生了一个问题。


React之间的主要区别。PureComponent和React。组件是PureComponent对状态变化做一个简单的比较。这意味着在比较标量值时,它比较它们的值,但在比较对象时,它只比较引用。它有助于提高应用程序的性能。

你应该选择React。当您可以满足以下任何条件时。

State/Props应该是一个不可变的对象 状态/道具不应该有层次结构 当数据发生变化时,应该调用forceUpdate

如果你正在使用React。你应该确保所有的子组件也是纯的。

使用React.component对性能有什么影响吗 考虑使用React.PureComponent?

是的,它会提高你的应用程序的性能(因为简单的比较)

我猜Purecomponent的shouldComponentUpdate()只执行 肤浅的比较。如果是这种情况,就不能用上述方法了 为了更深入的比较?

你猜对了。如果你满足我上面提到的任何一个条件,你就可以使用它。

“此外,反应。PureComponent的shouldComponentUpdate()跳过道具 更新整个组件子树”-这是否意味着道具 更改被忽略?

是的,如果在浅比较中找不到差异,道具变化将被忽略。


Component和PureComponent有一个区别

PureComponent与Component完全相同,除了它为您处理shouldComponentUpdate方法。

当道具或状态发生变化时,PureComponent将对道具和状态进行浅层比较。另一方面,组件不会将当前道具和状态与下一个道具进行比较。因此,无论何时调用shouldComponentUpdate,组件都会在默认情况下重新呈现。

浅的比较

在比较前一个道具和状态和下一个状态时,简单的比较将检查原语是否具有相同的值(例如,1等于1或true等于true),以及在更复杂的javascript值(如对象和数组)之间的引用是否相同。

来源:https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81


在我看来,主要的区别在于,每当它的父组件重新呈现时,组件都会重新呈现,而不管组件的道具和状态是否发生了变化。

另一方面,如果其父组件呈现,纯组件将不会呈现,除非纯组件的道具(或状态)已经更改。

例如,假设我们有一个具有三级层次结构的组件树:父级、子级和子级。

当父节点的道具以只改变一个子节点道具的方式改变时,则:

如果所有的组件都是规则组件,那么整个组件树将被渲染 如果所有的子组件和子组件都是纯组件,那么只有一个子组件和它的一个或所有子组件会被渲染,这取决于它们的道具是否被改变了。 如果这个组件树中有很多组件,这可能意味着性能有显著提升。

然而,有时使用纯组件不会产生任何影响。我曾经遇到过这样的情况,当父节点从redux商店收到它的道具时,需要对它的子节点道具执行复杂的计算。父进程使用平面列表来呈现子进程。

结果是,每当redux存储中有一个很小的变化时,整个子数据的平面数组都要重新计算。这意味着对于树中的每个组件,道具都是新的对象,即使值没有改变。

在这种情况下,纯组件不起作用,只有通过使用常规组件并在shouldComponentUpdate中检入子组件(如果需要重新渲染器)才能实现性能提升。


我认为PureComponent比Regular Component更有效。事实上,您不需要编写太多的代码,它将为您处理shouldComponentUpdate()方法。