Container-Komponenten sind schlecht? Soll stattdessen store.getState und store.dispatch direkt verwendet werden?

Question

In Reaktion, die Art, wie es herausfindet, ob es re-render-dom ist, ist durch das Testen von Referenzen von Objekten/Funktionen.

Also bei jedem Update wird der gesamte JS berechnet. Bedeutung Containerelemente zurückgeben zwei neue Objekte jedes Mal, einen für maptDispatchToProps und einen für mapStateToProps:

const mapStateToProps = (state, ownProps) => { 
    return { 
    active: ownProps.filter === state.visibilityFilter 
    } 
} 

const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
    onClick:() => { 
     dispatch(setVisibilityFilter(ownProps.filter)) 
    } 
    } 
} 

In obigem Code, den wir jedes Mal enthält active Schlüssel und dann ein neues Objekt enthält eine neue Funktion ein neues Objekt sehen zu onClick. Die Verweise auf diese 3 sind in jedem js-Zyklus brandneu. React vergleicht diese Referenzen und berechnet dann die js in der Komponente neu. Aber ich dachte mit Redux, dass shouldComponentUpdate nicht getestet werden musste, wie kann das sein, wenn sich alle diese 3 Referenzen geändert haben? Especiall die onClick, die dazu führen wird, reagieren auf dann fügen Sie die onClick wieder mit addEventListener.

Answer 1

Sie missverstehen, wie "flache Gleichheit" funktioniert. Beide React PureRenderMixin und React Redux connect Funktion verwenden "flache Gleichheit", um festzustellen, ob sich etwas tatsächlich geändert hat. Das bedeutet, dass die obersten Werte von zwei Objekten verglichen werden, um festzustellen, ob jedes Wertepaar gleich === ist, anstatt zu vergleichen, ob die Objekte selbst die gleichen sind. Also, wenn ich:

var a = {q : 42}; 
var b = {a : a}; 
var c = {a : a}; 

Dann B und C sind deutlich unterschiedliche Objekte, sondern flach gleich, weil für sie beide, das „a“ Feldpunkte auf das gleiche Objekt.

Im Fall der React Redux connect() Funktion überprüft es außerdem in erster Linie den Rückgabewert mapStateToProps, um festzustellen, ob die umschlossene Komponente aktualisiert werden muss.