javascript - 这是shouldComponentUpdate的合理实现吗？

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

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

最佳答案

这会以意外的方式失败吗？


可能，并且几乎可以肯定，它比进行深度对象遍历来确定相等要慢（因为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的情况。 （当对象的非整数索引属性以不同的顺序创建时会发生这种情况。顶级属性或状态属性可能不会发生，但是从属对象呢？this.setState({foo});其中foo是在不同时间以不同方式创建的对象...）

关于javascript - 这是shouldComponentUpdate的合理实现吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52651471/