我们如何对“shouldComponentUpdate”中的“this.props”和“nextProps”进行深度比较？

【问题标题】：How can we do deep comparison of "this.props" and "nextProps" in "shouldComponentUpdate"?我们如何对“shouldComponentUpdate”中的“this.props”和“nextProps”进行深度比较？
【发布时间】：2021-11-03 09:33:51
【问题描述】：

到目前为止，我所知道的是，如果 props（当前和下一个） 并进行字符串化然后进行比较，它可能会提供一些结果。但是，我不确定这是否适用于持有功能的道具。如果有其他可能的方法，请解释一下。

JSON.stringify(this.props) === JSON.stringify(nextProps)

【问题讨论】：

标签： javascript reactjs react-lifecycle

【解决方案1】：

JSON.stringify 可能不起作用，因为对象键的顺序基于它们的定义时间 (relevant stackoverflow rabbit hole)。因此，您可能无法始终保证它们的顺序相同。

由于我不记得的原因（可能是无聊）几个月前我做了一个对象差异函数：

function diff (a, b) {
  let obj = {};
  
  for (let key in a) {
    if (a[key] === b[key]) continue;
    
    obj[key] = b[key];
  }
  
  for (let key in b) {
    if (key in obj) continue;
    
    if (a[key] === b[key]) continue;
    
    obj[key] = b[key];
  }
  
  return obj;
}

虽然这只适用于原始值（例如字符串、数字等）。

如果这是一个个人项目，为什么不尝试将其扩展到对象和数组？

如果没有，我建议使用像 deep-object-diff 这样的库

【讨论】：