我现在使用shouldComponentUpdate，但我不能简单地使用prevProps.myPropObj == this.state.props.myPropObj 进行比较。这是一个对象，我需要进行深入比较。反应是否会向我展示一些方法来告诉我我的道具是否改变了？还是他们希望我自己进行深度比较？我在想 react 专门研究这种比较，所以它应该告诉我们是否相同或不同的真/假？
【问题讨论】：
标签： reactjs
如果 props 是不可变的，你可以使用 react 的shallowCompare。如果您使用 immutablejs 之类的东西，或者您通过替换而不是改变对象来更改对象，则 props 可以是不可变的，例如 const prop = Object.assign({}, prop, { changedValues: 'value' });
var shallowCompare = require('react-addons-shallow-compare');
export class SampleComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return shallowCompare(this, nextProps, nextState);
}
render() {
return <div className={this.props.className}>foo</div>;
}
}
对于非es6、非node环境：
var shallowCompare = require('react-addons-shallow-compare'); 的等价物是 var shallowCompare = React.addons.shallowCompare;，所以完整的例子是：
var SampleComponent = React.createClass({
shouldComponentUpdate: function(nextProps, nextState) {
return React.addons.shallowCompare(this, nextProps, nextState);
},
render: function() {
return React.createElement('div', {className:this.props.className}, 'foo');
}
});
【讨论】：
var newObj = JSON.parse(JSON.stringify(this.state.obj)); this.setState({obj:newObj}) 来设置状态，无论我的对象有多深，这是否符合不可变的条件？
JSON.parse(JSON.stringify(...)) 的替代品，我的打字很多哈哈
React 不提供开箱即用的对象的深度比较。
您可以为此自己构建一些东西。例如，通过向您的对象添加和维护 1 个唯一 ID 来注册更改。
或者在您的应用程序中始终使用像 immutableJS 这样的库。非常适合具有大型复杂对象的大型复杂应用程序。
为了确保：对于您应用的功能，您不需要shouldComponentUpdate()。 React 有自己的引擎，只呈现状态之间的差异。
【讨论】：
componentDidUpdate 不断触发？还是即使componentDidUpdate 正在触发，DOM 也永远不会真正更新
componentDidUpdate() 在渲染周期后运行，即使渲染没有导致 DOM 更改。如果在一轮中 prop = A: 那么 react 会将组件渲染到 DOM。如果在下一轮 prop 被传递，值仍然 A：react 将运行重新渲染循环（但不会更改 DOM，因为没有任何更改），然后将运行 componentDidUpdate()。如果你实现了shouldComponentUpdate(): 在下一轮react 将首先检查shouldComponentUpdate()，这将返回false。然后渲染周期中止，componentDidUpdate() 将不会运行。
shouldComponentUpdate。这是否意味着不需要componentDidUpdate，并且只有当我使用componentDidUpdate 时，我才必须使用shouldComponentUpdate 或其他东西来检查它是否真的改变了？感谢您的耐心解释。我喜欢 React 只是想理解它。
shouldComponentUpdate()在内的代码的输出应该与没有该方法的代码的输出完全相同。 shouldComponentUpdate() 用于更快的输出，而不是用于不同的输出。对于componentDidUpdate()，也许this post 会澄清。
shallowCompare() 是合适的方法吗？这取决于你的对象。请参阅@OriDori 的回答。 componentDidUpdate() 是比较合适的地方吗？那是另一个问题。答案取决于您希望代码对比较结果做什么。