这是 shouldComponentUpdate 的合理实现吗？答案

【问题标题】：Is this a reasonable implementation of shouldComponentUpdate?这是 shouldComponentUpdate 的合理实现吗？
【发布时间】：2019-03-10 03:01:50
【问题描述】：

我多年来一直在使用 React，但从未有过实现 shouldComponentUpdate 的首选方法。嵌套 props 和 state 的深度相等检查可能很困难。

但是，这样的事情有什么问题：

shouldComponentUpdate(nextProps, nextState) {
  const propsChanged = JSON.stringify(this.props) !== JSON.stringify(nextProps)
  const stateChanged = JSON.stringify(this.state) !== JSON.stringify(nextState)
  return propsChanged || stateChanged
}

这样合适吗？这会以意想不到的方式失败吗？

我认为JSON.stringify 和直接字符串比较也是非常快速的操作。

总的来说，这种方法对我来说似乎是合理的，但我想知道我是否遗漏了任何明显的缺陷。

【问题讨论】：

标签： javascript reactjs react-native ecmascript-6

【解决方案1】：

这会以意想不到的方式失败吗？

可能，而且它几乎肯定会比进行深度对象遍历来确定相等性要慢（因为JSON.stringify 必须进行深度对象遍历无论如何）。

它可能失败的一种方式是JSON.stringify 可以为等效对象返回不同的字符串（这是指定的行为）：

const o1 = {a: 1, b: 2};
const o2 = {b: 2, a: 1};
const str1 = JSON.stringify(o1);
const str2 = JSON.stringify(o2);
console.log(str1);
console.log(str2);
console.log(str1 === str2);

...尽管我承认（至少）在 React 组件中的 props 和 state 的情况下不太可能。（当对象上的非整数索引属性以不同的顺序创建时会发生这种情况。这可能不会发生在您的顶级道具或状态属性中，但是从属对象呢？@ 987654325@ 其中foo 是在不同时间以不同方式创建的对象...）

【讨论】：

谢谢，我忘了。您是否知道任何安全的方法可以轻松实现深度比较？
@ischnmn - 可以肯定的是这里有一个关于这个的问题。编辑：Lots, actually。 :-)

【解决方案2】：

不，这不是一个合理的实现。 JSON.stringify 是一个潜在的缓慢操作。

您需要问自己是否真的需要深度相等检查。为什么不直接从PureComponent 派生？它执行了一个浅层的比较，但这还不够吗？

【讨论】：

不，浅比较对于我的用例来说是不够的。
@ischnmn 我相信你认为这是事实，但你能解释一下为什么你认为这是真的吗？也许有一些重构等待发生？
这超出了问题的范围。深度平等是一项核心要求。

【解决方案3】：

使用 loadash _.isEual 方法 lodash

【讨论】：