Question

我现在正在使用shouldComponentUpdate，但我不能简单地prevProps.myPropObj == this.state.props.myPropObj进行比较。这是一个对象，我需要进行深入的比较。反应是否向我揭示了一些方法告诉我我的道具是否改变了？或者他们希望我自己做深度比较？我认为反应专门用于比较，所以它应该告诉我们真假是否相同或不相同？

Answer 1

如果道具是不可变的，你可以使用反应shallowCompare。如果你使用像immutablejs这样的东西，或者你通过替换而不是改变它们来改变对象，那么道具可以是不可变的，例如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，非节点环境：

相当于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');
  }
});

Answer 2

React不提供开箱即用的对象的深度比较。

你可以为此自己建造一些东西。例如，通过向对象添加和维护1个唯一ID来注册更改。

或者在您的应用中始终使用类似immutableJS的库。适用于具有大型复杂对象的大型复杂应用程序。

要确保：对于您应用的功能，您不需要shouldComponentUpdate()。 React有自己的引擎，只能在状态之间产生差异。

如何在prevComponentUpdate中将prevProps与this.props进行比较

2 个答案: