React - 使用深度相等来不重新渲染对象身份更改答案

【问题标题】：React - using deep equality as to not re-render on object identity changeReact - 使用深度相等来不重新渲染对象身份更改
【发布时间】：2017-08-26 21:59:54
【问题描述】：

React 在 this page about performance 上讨论了您可以使用浅相等并避免改变对象，因此组件只需检查引用以查看 props 或 state 是否更改。

我实际上想知道相反的情况：是否可以让相等检查使用深度相等并在对象引用更改时忽略（只要它们的内容不更改）？

原因是，我有一个库，它返回一些内部变量的克隆版本，要查看这些变量的更新，我需要重新请求该内部变量，从而获得一个全新的克隆。因此，我将通过引用获得完全不同的对象，但它们可能不会更改任何字段。但是每次我请求这样的更新时，React 都会认为一切都发生了变化，因为所有的引用都发生了变化，并且它重新渲染了很多不必要的东西。

当前解决方案：只要对象的字段不改变，将其放入组件中以阻止其渲染

shouldComponentUpdate(nextProps, nextState) {
  return !_.isEqual(this.props, nextProps) || !_.isEqual(this.state, nextState);
}

因为 lodash 的 isEqual 相等性检查很深，所以这可以解决问题，但我必须在每个想要这种行为的组件上这样做。我想知道是否有一个

实现此目的的首选方式
我使用的一种反模式首先导致了这种情况，我可以完全避免它

或者也许上面的方法是最好的。

【问题讨论】：

如果您希望这是一组组件的默认行为，也许您可以扩展 React.Component 并像这样覆盖 shouldComponentUpdate。所以也许有类似class DeepEqualityComponent extends React.Component的东西，然后从DeepEqualityComponent扩展

标签： javascript reactjs lodash

【解决方案1】：

出于以下原因，我不建议您这样做：

深入比较的成本很高。因此，每次发生变化时，您都必须进行深入比较，然后进行渲染部分。我们最好让 react 进行渲染，因为它是为它制作的。
至于在所有组件中处理它的情况。我们可以通过解构对象从而发送更小的道具来避免这个问题，现在反应可以处理优化的重新渲染。例如：

<Footer data={object} />

<Footer title={object.title} copyright={object.copyright}/>

希望对你有帮助！

【讨论】：