Leistungsvergleich this.setState (this.state) und this.setState ({})

Question

Ich habe ein Szenario, in dem ich Daten von api bekomme. In diesem Fall wird meine KomponenteWillReceiveProps() ausgelöst, wenn ich einen neuen Wert aus dem Speicher erhalte.

componentWillReceiveProps(newProps){ 
    if(newProps.listOne){ 
    this.state.listOne = newProps.listOne; 
    } 
    if(newProps.listTwo){ 
    this.state.listTwo = newProps.listTwo; 
    } 

    this.setState(this.state); 

} 

Jetzt nach react doc ist es unangemessen zu verwenden this.setState (this.state);

zu halten, so dass die Art und Weise im Auge 1

componentWillReceiveProps(newProps){ 
    if(newProps.listOne){ 
    this.setState({listOne : newProps.listOne}); 
    } 
    if(newProps.listTwo){ 
    this.setState({listTwo : newProps.listTwo}); 
    } 

} 

In Fall wäre Zustand zu aktualisieren meine nur einmal wird ausgelöst Render, nachdem ich alle Daten in den Zustand kopiert haben. In Fall 2 werden mein render (und alle dazwischen liegenden Lebenszyklen) ausgelöst, jedes Mal, wenn meine If-Bedingung erfüllt wird.

Also ich verstehe nicht, wie es meine Leistung verbessert. Sagen wir, wir sprechen über nicht eine, aber viele bedingte Zustandsaktualisierung.

Answer 1

Wenn Sie setState rufen nur einmal möchten, können Sie es wie folgt tun:

componentWillReceiveProps(newProps) { 
    // Copy the state instead of mutating this.state directly. 
    const state = { ...this.state }; 

    if (newProps.listOne) { 
     state.listOne = newProps.listOne; 
    } 

    if (newProps.listTwo) { 
     state.listTwo = newProps.listTwo; 
    } 

    this.setState(state); 
} 

Sie können hier weiter verbessern, indem sie mit Hilfe von Bibliotheken wie Immuable.js wirklich unveränderlich Datenstrukturen verwenden.

Das manuelle Batch-Update solcher Updates ist jedoch unter dem Gesichtspunkt der Leistung nicht erforderlich. Reagieren Sie intern diese Updates intern, da dies ein Lebenszyklus-Hook ist. Es kann jedoch sinnvoll sein, wenn Sie den Rückruf von setState verwenden möchten.