javascript - React - 使用深度相等性来避免在对象标识更改时重新渲染

Question

React 讨论 this page about performance您可以使用浅层相等并避免改变对象，这样组件只需要检查引用以查看 props 或状态是否发生了变化。

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

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

当前的解决方案:只要对象的字段不改变，就将其放入组件中以阻止它呈现

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

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

• 实现此目标的首选方式
• 我正在使用的一个反模式首先导致了这个，我可以完全避免它

或者上面的方法可能是最好的。

Answer 1

我不建议您这样做，原因如下:

1. 深入比较的成本很高。所以每当有什么变化时，你都必须做一个深入的比较，然后再做渲染部分。我们最好让 React 进行渲染，因为它是为它而生的。

2. 至于在所有组件中处理它的情况。我们可以通过解构对象从而发送更小的 Prop 来避免这个问题，现在 react 可以处理优化的重新渲染。例如:

   <Footer data={object} />

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

希望对您有所帮助!