So vergleichen Sie prevProps mit this.props in sollteComponentUpdate

Question

Ich verwende jetzt , aber ich kann nicht einfach prevProps.myPropObj == this.state.props.myPropObj zu vergleichen. Es ist ein Objekt und ich müsste tief vergleichen. Reagiert mir eine Methode aus, um mir zu sagen, ob sich meine Requisite geändert hat oder nicht? Oder erwarten sie, dass ich selbst den tiefen Vergleich mache? Ich dachte, dass sich react auf diesen Vergleich spezialisiert hat, also sollte es uns sagen, ob es wahr oder falsch ist, ob es gleich ist oder nicht?

Answer 1

Wenn die Stützen unveränderbar sind, können Sie die shallowCompare von react verwenden. Die Requisiten können unveränderlich sein, wenn Sie so etwas wie immutablejs verwenden oder die Objekte ändern, indem Sie ersetzen und sie nicht mutiert, zum Beispiel 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>; 
    } 
} 

Für Nicht-es6, nicht-node-Umgebung:

das äquivalent von var shallowCompare = require('react-addons-shallow-compare'); ist var shallowCompare = React.addons.shallowCompare; so vollständiges Beispiel wäre:

aus der Box

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

Reagieren bietet keinen tiefen Vergleich von Objekten.

Sie könnten etwas selbst dafür bauen. ZB durch Hinzufügen und Verwalten einer eindeutigen ID zu Ihrem Objekt, um Änderungen zu registrieren.

Oder verwenden Sie eine Bibliothek wie immutableJS konsistent über Ihre App. Lohnenswert für große komplexe App mit großen komplexen Objekten.

Um sicher zu gehen: Für die Funktionalität Ihrer App sollten Sie nicht shouldComponentUpdate() benötigen. React hat eine eigene Engine, die nur Unterschiede zwischen Zuständen macht.