【问题标题】：React.Component vs React.PureComponent [closed]React.Component 与 React.PureComponent
【发布时间】：2017-05-11 11:26:03
【问题描述】：

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

鉴于此，在创建 React 组件时，有什么理由应该更喜欢 React.PureComponent？

问题：

使用React.Component 是否会对性能产生任何影响，我们可以考虑使用React.PureComponent？
我猜shouldComponentUpdate() 的PureComponent 只执行浅比较。如果是这种情况，不能用上述方法进行更深层次的比较吗？
“此外，React.PureComponent 的 shouldComponentUpdate() 跳过整个组件子树的 prop 更新” - 这是否意味着 prop 更改被忽略？

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

【问题讨论】：

我知道你发布这篇文章已经有几个月了，但我认为这篇文章可能会有所帮助：60devs.com/pure-component-in-react.html

标签： reactjs state

【解决方案1】：

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

当您满足以下任何条件时，您应该选择React.PureComponent。

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

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

在使用 React.component 时我们可能会产生任何性能影响吗？考虑使用 React.PureComponent 吗？

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

我猜 Purecomponent 的 shouldComponentUpdate() 只执行肤浅的比较。如果是这种情况，不能使用上述方法进行更深入的比较？

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

“此外，React.PureComponent 的 shouldComponentUpdate() 跳过了 prop 整个组件子树的更新” - 这是否意味着道具更改会被忽略吗？

是的，如果在浅比较中找不到差异，将忽略 prop 更改。

【讨论】：

嗨@VimalrajSankar。感谢您的帮助。您能否举一个以下语句的示例：It means that when comparing scalar values it compares their values, but when comparing objects it compares only references. It helps to improve the performance of the app.？谢谢
@Mr.Script 我希望这会有所帮助stackoverflow.com/a/957602/2557900
State/Props should not have a hierarchy 抱歉，你能解释一下这里的层次结构是什么意思吗？
@SanyLiew 这意味着状态和道具应该只包含原始值，如数字和字符串，而不是对象中的对象（层次结构）。
如果 state/props 是不可变对象，那么有层次结构并仍然使用 PureComponent 应该没问题，只要这些层次结构也维护不可变对象，对吧？

【解决方案2】：

`Component`和`PureComponent`有一个区别

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

当 props 或 state 发生变化时，PureComponent 将对 props 和 state 进行浅比较。另一方面，Component 不会将当前的道具和状态与开箱即用的下一个进行比较。因此，无论何时调用shouldComponentUpdate，该组件都会默认重新渲染。

浅比较

在将前一个 props 和 state 与下一个进行比较时，浅比较将检查基元是否具有相同的值（例如，1 等于 1 或 true 等于 true）以及在更复杂的 javascript 值（如对象和数组。

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

【讨论】：

React.Component => 因此，如果我多次使用相同的道具重新渲染相同的组件。它将触发它的子渲染。无论道具是否改变

【解决方案3】：

在我看来，主要区别在于组件每次父级重新渲染时都会重新渲染，而不管组件的 props 和 state 是否已更改。

另一方面，如果其父组件重新渲染，纯组件将不会重新渲染，除非纯组件的道具（或状态）已更改。

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

当父母的道具发生变化时，只有一个孩子的道具发生了变化，那么：

如果所有组件都是常规组件，那么整个组件树都会重新渲染
如果所有子孙都是纯组件，那么只有一个子会重新渲染，而它的一个或所有孙子会重新渲染，这取决于他们的 props 是否改变。如果此组件树中有许多组件，则可能意味着显着的性能提升。

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

结果是每次redux store有一点点变化，children数据的整个flatlist数组都会重新计算。这意味着对于树中的每个组件，道具都是新对象，即使值没有改变。

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

【讨论】：

【解决方案4】：

用例

在渲染大量组件时建议使用纯组件

例如在FlatList 中渲染数百个产品，或者我正在使用.map()

【讨论】：

Component和PureComponent有一个区别

浅比较

`Component`和`PureComponent`有一个区别