React shallowCompare 如何工作?
How does React shallowCompare work?
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 是正确的。我试图理解这种行为并寻找一种方法来搜索问题的关键,但我就是不明白。
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 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 是正确的。我试图理解这种行为并寻找一种方法来搜索问题的关键,但我就是不明白。
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 因为用例太窄了。如果您有一个复杂的对象,则这两个函数都无效。如果您的功能适合您,请使用它。