React shallowCompare 如何工作？

Question

React 文档指出

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

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

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

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

Answer 1

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

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

但是如果你有一个深度嵌套的对象，shallowCompare 将无法判断嵌套对象有updated/changed。

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

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

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

React shallowCompare 如何工作？

How does React shallowCompare work?

javascript

reactjs

react-dom