Javascript 深入比较React中的对象道具未按预期工作

我通过减少不必要的重新渲染来优化React应用程序的性能。我正在处理的组件接收一个单独的道具，该道具包含一个具有多个关键点的对象，包括对象数组。我正在使用

shouldComponentUpdate

检查道具中的更改，但它没有按预期工作：

shouldComponentUpdate(nextProps) {
    if (!(_.isEqual(nextProps, this.props))) {
        console.log('difference', _.differenceWith(nextProps, this.props));
        return true;
    }

  return false;
}

isEqual

是Lodash中用于深入比较对象的方法

differenceWith

是一种查找两个对象差异的Lodash方法。奇怪的是，使用

isEqual

并没有减少重新渲染，而

differenceWith

打印一个空数组

[]

。但是如果我使用

JSON.stringify

而不是

isEqual

，重新渲染会减少一半，但是

differenceWith

仍然打印

[]

shouldComponentUpdate(nextProps) {
    if ( JSON.stringify(nextProps) !== JSON.stringify(this.props) ) {
        console.log('difference', _.differenceWith(nextProps, this.props));
        return true;
    }

  return false;
}

为什么

isEqual

和

JSON.stringify

在本质上做同一件事时，虽然方式不同（请注意，

isEqual

也是顺序敏感的），但它们的行为会有所不同

在这里避免重新渲染的最佳方法是什么

1-当isEqual和JSON.stringify本质上在做相同的事情时，尽管以不同的方式（请注意，isEqual也是顺序敏感的），为什么它们的行为会有所不同

看看我发现了什么

那要看情况了。对于JSON.stringify（），顺序很重要。因此，如果两个对象中的键值对顺序不同，但相同，则返回false。虽然在Lodash isEqual中这并不重要，但只要键值对存在，它就会返回true

const one={
果：“如果对象是嵌套的，则需要使用lodash
deepClone
或
JSON.parse（JSON.strinfiy（Obj））
我看不出这会有什么帮助？
deepClone
用于克隆此处不需要的对象，将对象转换为json然后返回到对象毫无意义。
应该组件更新
，
PureComponent
和
React。memo
进行浅层比较。因此，如果nested数据更改。感谢您的详细解释。非常感谢。但是，使用
React.PureComponent
在这里没有帮助，因为我有深度嵌套的对象道具。
React.memo
也一样，只是它用于功能组件。@maverick只需编辑问题，回答您在应用程序中提出的两个问题即可问题。我没有回答我的问题。我只是对你的解决方案发表评论。遇到了这个问题。似乎在
shouldComponentUpdate
中使用
isEqual
不是一个好主意。查看Dan Abramov的推文（虽然他没有提到解决方案。我尝试了
快速反应比较
，但奇怪的是，它在这里不起作用，就像
isEqual
对我不起作用一样）-maverick我想说的是，如果你尝试比较嵌套对象，为了避免重新渲染，你可能会比较大量数据，从而影响性能。