Eine kurze Einführung in setState in React.js

Wie man setState effektiv einsetzt und welche Fallstricke zu vermeiden sind

TL; DR - Wenn Sie visuell lernen, schauen Sie sich das Video an, das ich gemacht habe: ReactJS - Wie setState funktioniert

Oder schau es dir hier an:

Eine Einführung in setState

Das erste, was Sie beachten müssen, ist die Tatsache, dass die setState-Funktion in React asynchron arbeitet. Dies könnte einige Entwickler stören, da die Statuswerte nach dem Update nicht sofort verfügbar sind.

Es gibt zwei Varianten der Verwendung von setState: den objektbasierten Ansatz und den funktionalen Ansatz.

Lassen Sie uns beide in Aktion sehen. Wir werden das Problem mit dem objektbasierten setState dabei verstehen.

Lassen Sie uns eine einfache Anwendung erstellen.

class App extends React.Component { constructor() { super(); this.state = { value: 0, message: 'default click state' } } onClick = () => { this.setState({ value: this.state.value + 1 }); this.setState({ message: `click-state ${this.state.value}` }); } render(){ return( render->state={this.state.value} - {this.state.message} Click-setState ); }}

Jetzt mounten wir diese Anwendung auf unserem Root-DOM-Knoten.

ReactDOM.render( , document.getElementById("root"));

Der obige Code rendert bei Ausführung den Wert und die Nachricht aus dem Statusobjekt und rendert auch eine Schaltfläche.

Wenn Sie sich den Klick-Handler ansehen, haben wir zwei aufeinanderfolgende setState-Funktionen, die auf den this.state-Wert zugreifen.

Das Verhalten, das wir erwarten, ist, dass beim Klicken auf die Schaltfläche der korrekte Statuswert im folgenden div (als Referenz extrahiert) gerendert werden sollte:

 render->state={this.state.value} - {this.state.message} 

Das this.state.messageenthält Werte vonthis.state.value

Wir erwarten, dass beide Statuswerte beim Klicken auf die Schaltfläche gleich sein sollten.

Lassen Sie uns die Ausgabe davon sehen.

Die anfängliche Ausgabe wird unten gezeigt, da der Wert zunächst 0 ist.

Nach dem ersten Klick erwarten wir die folgende Ausgabe:

render->state=1 -click-state 1

aber wir bekommen das stattdessen:

Beim zweiten Klick stimmt die Ausgabe immer noch nicht überein, wie unten gezeigt.

Inzwischen schläfst du vielleicht oder kratzst dir am Kopf :)

Die Funktion onClick ()

Schauen wir uns also die Funktion onClick () an, um das Problem zu verstehen.

Da der setState-Aufruf asynchron ist, bevor die erste setState-Ausführung abgeschlossen werden kann, verweist der Verweis auf den zweiten setState möglicherweise auf den vorherigen Wert und nicht auf den ersten aktuell aktualisierten Wert.

Wir werden dies beheben, indem wir den funktionalen Aspekt von setState verwenden.

Um das Update zu demonstrieren, erstellen wir eine weitere Schaltfläche:

Click-setState fn

Fügen Sie einen neuen Klick-Handler onClickfn () hinzu, wie unten gezeigt

Die obige Methode verwendet den Funktionsparameter in setState.

Dies kann eine Pfeilfunktion wie oben gezeigt oder die normale ES5-Funktion sein.

Diese Funktion verwendet zwei Parameter als Argumente: Der erste ist der prevState und der zweite sind die Requisiten (falls Sie auch Requisiten benötigen, die von der übergeordneten Komponente übergeben werden). Hier schauen wir nur in den Vorzustand.

Der obige prevState bezieht sich auf die setState-Funktion, da es sich um den zuletzt aktualisierten Status handelt. Dies zeigt immer auf den richtigen Wert.

Lassen Sie uns die Ausgabe nach ein paar Klicks sehen. Sie werden feststellen, dass die Werte immer synchron sind, wenn Sie auf die zweite Schaltfläche klicken.

Im obigen Beispiel können Sie sehen, dass die Verwendung des Funktionsparameters setState den vorherigen Status korrekt stapelt und Sie vorhersagbare Statuswerte erhalten.

Eine weitere Einschränkung, die wir beachten müssen: setState () übernimmt eine weitere Rückruffunktion, die ausgeführt wird, sobald die Statuswerte erfolgreich aktualisiert wurden.

Dies ist sehr praktisch in Situationen, in denen Sie eine Operation ausführen müssen, sobald setState erfolgreich aktualisiert wurde.

Sehen wir uns ein letztes Beispiel an.

Angenommen, wir möchten den Statuswert nach der Aktualisierung protokollieren und schreiben den Code wie folgt. Ich werde dafür den onClickfn () - Handler verwenden.

Aber lassen Sie uns das sehen console.logund überprüfen, ob der Wert korrekt ist oder nicht. Nach drei Klicks erhalten Sie folgenden Status:

Sie werden feststellen, dass der protokollierte Wert nicht der zuletzt aktualisierte Wert ist. Lassen Sie uns das beheben und die Ausgabe sehen.

Im obigen Beispiel verwenden wir den zweiten Rückrufparameter setState (). Dieser Rückruf wird ausgeführt, sobald setState () seinen Vorgang abgeschlossen hat.

Sehen wir uns die endgültige Ausgabe mit dem oben geänderten Code an.

Einpacken

Ich hoffe, dieser kleine Artikel klärt einige Missverständnisse über setState auf.

Der vollständige Quellcode ist bei jsbin verfügbar.

Viel Spaß beim Codieren!

Lerne mit mir @Learner + Fullstack Coach (@rajeshpillai): //twitter.com/rajeshpillai

Promotion: Special $10 coupon for medium readers for my upcoming live ReactJS-Beyond the basics course on udemy in case you wish to support our open source curriculum Mastering frontend engineering in 12 to 20 weeks