React - 使用深度相等而不重新渲染对象标识更改

Question

React在这个页面上讨论了性能,你可以使用浅等式并避免变异对象,这样组件只需要检查引用以查看props或状态是否发生了变化.

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

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

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

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

由于lodash的isEqual相等性检查很深,但是我必须在每个想要这种行为的组件上执行此操作.我想知道是否有一个

• 实现这一目标的首选方式
• 我正在使用的反模式首先导致这种情况,我可以完全避免它

或者上述方法最好.

Answer 1

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

1. 深度比较的代价是高昂的。因此，每次发生变化时，您都必须进行深入比较，然后进行渲染部分。我们最好让 React 来进行渲染，因为它就是为此而设计的。

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

   <Footer data={object} />

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

我希望这有帮助！