反应PureComponent和shouldComponentUpdate

Question

我了解PureComponent，但是经过深思熟虑，我对此感到困惑。

当状态或道具更改时，会调用

ShouldComponentUpdate函数。因此，我们肯定知道，如果调用ShouldComponentUpdate，则状态或道具会发生变化。这些更改也应反映在组件视图中。如果状态或道具未更改，则不会调用shouldComponentUpdate。

PureComponent提供旧状态或道具与新状态或道具之间的浅层比较，如果它们相同，则不会渲染。但是我们已经知道，shouldComponentUpdate被调用的事实意味着新状态或道具与旧状态或道具不同。

从逻辑上讲，我对此感到困惑，所以我不得不发布这个问题。您能给我一些建议吗？

Answer 1

注意：这是我的理解，因此其他人请随时评论任何问题/更正

您对问题的假设不正确。您以为简单的React.Component认为，如果状态/道具没有任何变化，则永远不会调用shouldComponentUpdate并且它不会重新呈现。这是不正确的，例如，如果普通组件的父级重新渲染，并且父级将道具传递给孩子，那么子级也会重新渲染。即使传递的那些prop值实际上是相同的（您也可以通过在孩子的console.log函数中放置render()来测试此属性）。但是，即使孩子将重新渲染，由于道具是相同的，因此实际上不会发生任何变化（就DOM而言）。因此从技术上来说它进行了不必要的重新渲染。

在简单的组件中，shouldComponentUpdate始终返回true（假设您尚未显式定义它）。因此，如果道具/状态相同，它将始终重新渲染，只是如果没有任何相关差异，则DOM不会发生任何变化。但是，在PureComponent中，它将实际上对新状态/道具进行浅表比较，并且仅在更改后才触发重新渲染。这个想法是它为您实现了shouldComponentUpdate方法。

对于不经常需要更改的组件，进行这种浅表比较（相对较快且便宜）要比不考虑任何更改而不断重新渲染要好。总而言之，纯组件通过在重新渲染之前对状态/道具进行比较，并确保它们实际上是不同的，来防止不必要的重新渲染。