shouldComponentUpdate和内置差异之间的区别

Question

我知道shouldComponentUpdate()如果返回false将阻止调用render()方法。 如果我在render()方法中使用了一些昂贵的逻辑，那么shouldComponentUpdate()确实很有帮助，因为我可以防止进行render()调用。

但是如果我的render()方法仅返回Element而又不执行任何昂贵的代码该怎么办。

shouldComponentUpdate()中的比较（以PureComponent的实现为例）与render()调用时内置的React diff之间有什么区别吗？

Answer 1

我认为写在这里很棒： https://reactjs.org/docs/reconciliation.html

主要区别是React.PureComponent在旧道具和新道具之间以及旧状态和新状态之间进行了浅浅的比较，但是内置的React diffing（对帐）只是在旧树和新DOM树之间进行比较，但是请阅读上面的这篇文章，它将解决您的疑问。

Answer 2

反应告诉您在最大情况下避免这种情况会导致性能问题。 React在更新组件元素方面非常聪明，在需要的地方使用key，React将匹配更新并更新DOM。 React本身会比较旧道具和新道具并更新dom。

  

使用shouldComponentUpdate（）来让React知道组件的输出是否   不受当前状态或道具变更的影响。默认值   行为是在每一个状态变化时以及在广大   大多数情况下，您应该依靠默认行为。

每个react组件仅在状态更改时才会重新呈现。

  

此方法仅作为性能优化存在。不要依靠   它可以“防止”渲染，因为这可能会导致错误。考虑使用   内置的PureComponent而不是编写shouldComponentUpdate（）   用手。 PureComponent对props和   状态，并减少您跳过必要更新的机会。

来源：https://reactjs.org/docs/react-component.html#shouldcomponentupdate

如果您仍要使用此功能，则需要对此进行衡量。我认为您应该完全避免使用它，因为通过比较，您可能会弄乱事情。

Answer 3

PureComponent中的

ShouldComponentUpdate（）将对当前和先前的道具和状态进行浅层比较。 跳过整个渲染过程，包括在此组件及以下组件上调用render（）。 这完全避免了对帐过程。这意味着react不必更新V-DOM，也无需与真实DOM进行比较。与浅层比较相比，这是一项昂贵的任务。