React.Component与React.PureComponent

Question

官方React docs表示＆＃34; <asp:SqlDataSource runat="server" ID="SqlDataSourceSiparisYazan" DataTextField="Field of the Name to be shown" DataValueField="KOD" ConnectionString='<%$ ConnectionStrings:CPMMASTER_PGCS %>' SelectCommand="SELECT KOD,ACIKLAMA FROM REFKRT ...'"></asp:SqlDataSource> ＆＃39; s React.PureComponent只是浅显比较对象＆＃34;，如果状态为＆＃34，则建议不要这样做;深＆＃34;

鉴于此，在创建React组件时，有没有理由选择shouldComponentUpdate()？

问题：

• 使用React.PureComponent时我们可能会考虑使用React.Component吗？
• 我猜React.PureComponent shouldComponentUpdate()只执行浅层比较。如果是这种情况，那么该方法不能用于更深入的比较吗？
• ＆＃34;此外，PureComponent＆＃39; s React.PureComponent跳过整个组件子树的支持更新＆＃34; - 这是否意味着忽略道具变化？

问题来自阅读medium blog，如果有帮助的话。

Answer 1

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

如果您满足以下任何条件，则应选择React.PureComponent。

• State / Props应该是一个不可变对象
• 州/道具不应具有层次结构
• 您应该在数据更改时致电forceUpdate

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

  

使用React.component是否会对性能产生任何影响   考虑去React.PureComponent？

是的，它会提高您的应用效果（因为比较浅）

  

我猜测Purecomponent的shouldComponentUpdate（）仅执行   浅比较。如果是这种情况，则不能使用所述方法   进行更深入的比较？

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

  

“此外，React.PureComponent的shouldComponentUpdate（）跳过prop   整个组件子树的更新“ - 这是否意味着道具   变化被忽略了？

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

Answer 2

Component和PureComponent有一个区别

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

道具或状态更改时，PureComponent将对道具和状态进行 浅比较 。另一方面，Component不会立即比较当前道具和状态。因此，每当调用shouldComponentUpdate时，组件将默认重新渲染。

浅比较

在将先前的道具和状态与下一个道具进行比较时，浅表比较将检查基元具有相同的值（例如1等于1或true等于true），并且在更复杂的javascript值（例如object和数组。

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

Answer 3

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

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

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

如果父母的道具发生改变，而只改变了一个孩子的道具，那么：

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

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

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

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