Question

React文档声明

shallowCompare如果为props或者浅层比较则返回true 状态失败，因此组件应该更新。

因此，如果理解正确，如果我的组件中没有状态，并且我知道道具键没有变化，则此代码

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

应该与反应比较返回相同。但事实并非如此。如果没有更改，我的代码会正确返回一个空数组，而react返回true。我试图理解这种行为，并寻找一种方法来搜索问题密钥，但我只是没有得到它。

Answer 1

shallowCompare是一个传统的附加组件。请改用React.PureComponent。 https://facebook.github.io/react/docs/shallow-compare.html

如果状态或道具没有变化，则shallowCompare返回false。当然，当有变化时，shallowCompare返回true，并继续重新呈现Component。

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

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

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

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

React shallowCompare如何运作？

1 个答案: