javascript - React shallowCompare 如何工作？

Question

React 文档指出

shallowCompare returns true if the shallow comparison for props or state fails and therefore the component should update.

所以，如果理解正确，如果我的组件中没有状态并且我知道 Prop 键没有变化，那么这段代码

let shallowDiff = Object.keys(this.props).filter((item) => {
        return this.props[item] !== nextProps[item];
});
return shallowDiff.length !== 0;

应该返回与 react 比较相同的结果。但事实并非如此。如果没有变化，我的代码会正确返回一个空数组，而 react 会返回 true。我试图理解这种行为并寻找一种方法来搜索问题的关键，但我就是不明白。

Answer 1

shallowCompare is a legacy add-on. Use React.PureComponent instead. https://facebook.github.io/react/docs/shallow-compare.html

如果状态或 Prop 没有变化，shallowCompare 返回 false。当然，当有变化时，shallowCompare 返回 true，并继续重新渲染组件。

但是如果你有一个深度嵌套的对象，shallowCompare 将无法判断嵌套对象是否已更新/更改。

您可以编写自己的函数来检查对象是否已更改，或者如果属性的 ORDER 为 NOT 重要。

JSON.stringify(obj1) === JSON.stringify(obj2) 

我个人不建议使用 shallowCompare 或 React.PureComponent，因为用例太窄。如果您有一个复杂的对象，则这两个函数都无效。如果您的功能适合您，请使用它。