Question

我已经使用React多年了，但是从来没有实现shouldComponentUpdate的可行方法。嵌套道具和状态的深度平等检查可能很困难。

但是，这样的事情出了什么问题？

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和直接字符串比较也将是非常快速的操作。

总的来说，这种方法对我来说听起来不错，但是我想知道是否遗漏了任何明显的陷阱。

Answer 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的情况下（至少）。（当对象的非整数索引属性以不同顺序创建时，就会发生这种情况。顶级道具或状态属性可能不会发生，但是从属对象呢？{ {1}}，其中this.setState({foo});是在不同时间以不同方式创建的对象...）

Answer 2

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

您需要问自己是否真的需要深度平等检查。为什么不仅仅从PureComponent派生呢？它进行了比较浅的比较，但这还不够吗？

Answer 3

使用loadash _.isEual方法 lodash

这是shouldComponentUpdate的合理实现吗？

3 个答案: