Wie wirkt sich die erneute Auswahl auf das Rendern von Komponenten aus?

Question

Ich verstehe nicht wirklich, wie die Neuauswahl das Rendern von Komponenten reduziert. Dies ist, was ich ohne erneutes Auswählen:

const getListOfSomething = (state) => (
    state.first.list[state.second.activeRecord] 
); 

const mapStateToProps = (state, ownProps) => { 
    console.log(state.first.list, state.second.activeRecord); 
    return { 
    ...ownProps, 
    listOfSomething: getListOfSomething(state) 
    } 
}; 

Es verbindet ein Element aus einer Liste basierend auf einem bestimmten Wert. Render wird jedes Mal etwas in den Zustandsänderungen genannt, so zum Beispiel meiner console.log Ausgänge:

{}, "" 
{}, "" 
{}, "" 
{}, "1" 
{"filled", "1"} 

weil etwas geht in dem anderen Teil des Speichers auf. Somit wird die Komponente 5 mal, 2 redundant gerendert.

Verwendung jedoch erneut auswählen:

const getList = state => state.first.list; 
const getActiveRecord = state => state.second.activeRecord; 
const listOfSomething = (list, activeRecord) => { 
    console.log(list, activeRecord); 
    return list[activeRecord]; 
} 
const getListOfSomething = createSelector(getList, getActiveRecord, listOfSomething); 

const mapStateToProps = (state, ownProps) => { 
    console.log(state.first.list, state.second.activeRecord); 
    return { 
    ...ownProps, 
    listOfSomething: getListOfSomething(state) 
    } 
}; 

Hier ist meine erste Auswahl console.log Ausgänge:

{}, "" 
{}, "1" 
{"filled", "1"} 

Die zweite:

{}, "" 
{}, "" 
{}, "" 
{}, "1" 
{"filled", "1"} 

Und die Komponente richtig gemacht - 3 mal!

Warum ist das so? Warum wird die Komponente nur 3 Mal gerendert? Was ist hier genau los?

Answer 1

Die connect-Funktion von React-Redux beruht auf Vergleichen mit oberflächlichen Gleichheitszeichen. Jedes Mal, wenn der Speicher aktualisiert wird und die mapState-Funktion einer Komponente ausgeführt wird, überprüft diese verbundene Komponente, ob der Inhalt des zurückgegebenen Objekts geändert wurde. Wenn mapState etwas anderes zurückgegeben hat, muss die umschlossene Komponente erneut gerendert werden.

Erneut auswählen verwendet "memoization", was bedeutet, dass es eine Kopie der letzten Eingaben und Ausgaben speichert. Wenn es die gleichen Eingaben zweimal hintereinander sieht, gibt es die letzte Ausgabe zurück, anstatt Dinge neu zu berechnen. Eine select-basierte Auswahlfunktion gibt also die gleichen Objektreferenzen zurück, wenn sich die Eingaben nicht geändert haben. Dies bedeutet, dass es wahrscheinlicher ist, dass connect sieht, dass nichts anders ist und die umschlossene Komponente nicht erneut gerendert wird.

Weitere Informationen dazu, wie Unveränderbarkeit und Vergleiche mit Redux und React-Redux funktionieren, finden Sie im neuen Artikel Redux FAQ section on Immutable Data.