React.Component与React.PureComponent

Question

官方的React文档声明" 只是React.PureComponent浅析shouldComponentUpdate()对象",并建议如果状态是"深度"的话.

鉴于此,React.PureComponent在创建React组件时,有什么理由可以选择吗？

问题:

React.Component我们可能考虑采用的是否会对使用产生任何性能影响React.PureComponent？
我猜 shouldComponentUpdate()的PureComponent执行只有浅薄的比较.如果是这种情况,不能说方法可以用于更深层次的比较吗？
"此外,我们React.PureComponent会shouldComponentUpdate()跳过整个组件子树的道具更新" - 这是否意味着道具变更被忽略了？

问题来自于阅读这个媒体博客,如果它有帮助.

Answer 1

React.PureComponent和之间的主要区别React.Component是对状态变化PureComponent进行浅层比较.这意味着在比较标量值时会比较它们的值,但在比较对象时,它只比较引用.它有助于提高应用程序的性能.

React.PureComponent当您满足以下任何条件时,您应该去.

如果您正在使用React.PureComponent,则应确保所有子组件都是纯净的.

在使用React.component时我们可能会考虑使用React.PureComponent吗？

是的,它会增加你的应用程序性能(因为比较浅)

我猜测Purecomponent的shouldComponentUpdate()只执行浅比较.如果是这种情况,那么上述方法不能用于更深入的比较吗？

你猜错了.如果您满足我上面提到的任何条件,您可以使用它.

"此外,React.PureComponent的shouldComponentUpdate()跳过整个组件子树的prop更新" - 这是否意味着忽略了prop更改？

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

Answer 2

`Component`并`PureComponent`有一点不同

PureComponentComponent除了它shouldComponentUpdate为你处理方法之外完全相同.

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

当比较先前的道具和状态与下一个时,浅层比较将检查基元是否具有相同的值(例如,1等于1或真等于真),并且更复杂的javascript值(如对象和数组)之间的引用是相同的.

Answer 3

正如我所看到的，主要区别在于组件每次父组件都重新发布时都会重新发布，而不管组件的属性和状态是否已更改。

另一方面，如果纯组件的父级重新渲染，则纯组件不会重新渲染，除非纯组件的属性（或状态）已更改。

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

当父母的道具以仅改变一个孩子的道具的方式改变时，则：

如果所有组件都是常规组件，则整个组件树将重新呈现
如果所有子孙都是纯组件，则只有一个孩子会退任，其子孙中的一个或全部将退还，这取决于他们的道具是否被更改。如果此组件树中有很多组件，则可能意味着性能上的显着提高。

但是，有时使用纯组件不会产生任何影响。当父母从redux商店收到道具时，需要对孩子的道具进行复杂的计算时，我遇到了这样的情况。父母使用平面清单来呈现其孩子。

结果是，每当redux存储区进行很小的更改时，都会重新计算儿童数据的整个平面列表。这意味着对于树中的每个组件，道具都是新对象，即使其值不变。

在这种情况下，纯组件无济于事，并且如果需要重新渲染，则只能通过使用常规组件并在shouldComponentUpdate中检入子代来实现性能提升。