Ich habe gerade festgestellt, dass die React- this.setState()
Funktion in einer Komponente asynchron ist oder nach Abschluss der aufgerufenen Funktion aufgerufen wird.
Jetzt habe ich diesen Blog gesucht und gefunden ( setState () State Mutation Operation kann in ReactJS synchron sein )
Hier stellte er fest, dass dies setState
asynchron (aufgerufen, wenn der Stapel leer ist) oder synchron (aufgerufen, sobald aufgerufen) ist, je nachdem, wie die Zustandsänderung ausgelöst wurde.
Nun sind diese beiden Dinge schwer zu verdauen
- Im Blog wird die
setState
Funktion innerhalb einer Funktion aufgerufenupdateState
, aber was dieupdateState
Funktion ausgelöst hat, weiß eine aufgerufene Funktion nicht. - Warum sollten sie
setState
asynchron machen, da JS eine Single-Threaded-Sprache ist und dieser setState kein WebAPI- oder Server-Aufruf ist, sondern nur für den JS-Thread ausgeführt werden muss. Tun sie dies so, dass durch das erneute Rendern nicht alle Ereignis-Listener und andere Dinge gestoppt werden, oder gibt es ein anderes Designproblem?
setState
: medium.com/@agm1984/…Antworten:
Sie können eine Funktion aufrufen, nachdem der Statuswert aktualisiert wurde:
Wenn Sie viele Status gleichzeitig aktualisieren müssen, gruppieren Sie sie alle innerhalb desselben
setState
:Anstatt:
Mach das einfach:
quelle
1)
setState
Aktionen sind asynchron und werden zur Leistungssteigerung gestapelt. Dies wird in der Dokumentation von erläutertsetState
.2) Warum sollten sie setState asynchronisieren, da JS eine einzelne Thread-Sprache ist und dies
setState
kein WebAPI- oder Server-Aufruf ist?Das ist weil
setState
sich der Status ändert und ein erneutes Rendern verursacht wird. Dies kann eine teure Operation sein, und wenn der Browser synchronisiert wird, reagiert er möglicherweise nicht mehr.Daher sind die setState-Aufrufe sowohl asynchron als auch stapelweise, um eine bessere Benutzeroberfläche und Leistung zu erzielen.
quelle
this.setState({ something: true }, () => console.log(this.state))
Ich weiß, dass diese Frage alt ist, aber sie hat viele reaktionsfähige Benutzer, einschließlich mir, lange Zeit sehr verwirrt. Kürzlich hat Dan Abramov (vom Reaktionsteam) eine großartige Erklärung geschrieben, warum die Natur von
setState
asynchron ist:https://github.com/facebook/react/issues/11527#issuecomment-360199710
setState
soll asynchron sein, und dafür gibt es in der verknüpften Erklärung von Dan Abramov einige wirklich gute Gründe. Dies bedeutet nicht , es wird immer asynchron sein - es bedeutet vor allem , dass man einfach nicht kann abhängen auf wobei synchron . ReactJS berücksichtigt viele Variablen in dem Szenario, in dem Sie den Status ändern, um zu entscheiden, wann diestate
tatsächlich aktualisiert und Ihre Komponente erneut gerendert werden soll.Ein einfaches Beispiel, um dies zu demonstrieren, ist, dass wenn Sie
setState
als Reaktion auf eine Benutzeraktion aufrufen ,state
diese wahrscheinlich sofort aktualisiert wird (obwohl Sie sich wiederum nicht darauf verlassen können), sodass der Benutzer keine Verzögerung verspürt , aber wenn du anrufstsetState
Als Reaktion auf eine Ajax-Anrufantwort oder ein anderes Ereignis, das nicht vom Benutzer ausgelöst wird, wird der Status möglicherweise mit einer geringfügigen Verzögerung aktualisiert, da der Benutzer diese Verzögerung nicht wirklich spürt und die Leistung durch Warten auf verbessert Stapeln Sie mehrere Statusaktualisierungen zusammen und rendern Sie das DOM weniger oft neu.quelle
Guter Artikel hier https://github.com/vasanthk/react-bits/blob/master/patterns/27.passing-function-to-setState.md
oder Rückruf weitergeben
this.setState ({.....},callback)
https://medium.com/javascript-scene/setstate-gate-abc10a9b2d82 https://medium.freecodecamp.org/functional-setstate-is-the-future-of-react-374f30401b6b
quelle
Sie können den folgenden Wrap verwenden, um einen Synchronisierungsaufruf zu tätigen
quelle
Stellen Sie sich vor, Sie erhöhen einen Zähler in einer Komponente:
Sowohl der übergeordneten als auch der untergeordneten Komponente ist ein Zählhandler zugeordnet. Dies geschieht absichtlich, damit wir setState () zweimal im selben Kontext für das Sprudeln von Klickereignissen ausführen können, jedoch innerhalb von zwei verschiedenen Handlern.
Wie wir uns vorstellen würden, würde ein Ereignis mit einem Klick auf die Schaltfläche nun beide Handler auslösen, da das Ereignis während der Blasenphase vom Ziel zum äußersten Container sprudelt.
Daher wird btnCountHandler () zuerst ausgeführt, wobei erwartet wird, dass die Anzahl auf 1 erhöht wird, und dann wird divCountHandler () ausgeführt, um die Anzahl auf 2 zu erhöhen.
Die Anzahl wird jedoch nur auf 1 erhöht, wie Sie in den React Developer-Tools überprüfen können.
Dies beweist, dass reagieren
stellt alle setState-Aufrufe in die Warteschlange
kehrt zu dieser Warteschlange zurück, nachdem die letzte Methode im Kontext ausgeführt wurde (in diesem Fall der divCountHandler).
führt alle Objektmutationen, die innerhalb mehrerer setState-Aufrufe im selben Kontext auftreten (z. B. alle Methodenaufrufe innerhalb einer einzelnen Ereignisphase, zum selben Kontext), zu einer einzigen Objektmutationssyntax zusammen (Zusammenführung ist sinnvoll, da wir daher die Statuseigenschaften unabhängig voneinander aktualisieren können in setState () an erster Stelle)
und übergibt es an ein einzelnes setState (), um ein erneutes Rendern aufgrund mehrerer setState () -Aufrufe zu verhindern (dies ist eine sehr primitive Beschreibung der Stapelverarbeitung).
Resultierender Code, der von react ausgeführt wird:
Um dieses Verhalten zu stoppen, werden Rückrufe übergeben, anstatt Objekte als Argumente an die setState-Methode zu übergeben.
Nachdem die letzte Methode die Ausführung abgeschlossen hat und reag zurückkehrt, um die setState-Warteschlange zu verarbeiten, ruft sie einfach den Rückruf für jede setState-Warteschlange auf und übergibt den vorherigen Komponentenstatus.
Auf diese Weise wird sichergestellt, dass der letzte Rückruf in der Warteschlange den Status aktualisiert, den alle vorherigen Kollegen in die Hand genommen haben.
quelle
Ja, setState () ist asynchron.
Über den Link: https://reactjs.org/docs/react-component.html#setstate
Weil sie denken Über
den Link: https://github.com/facebook/react/issues/11527#issuecomment-360199710
Asynchrones setState () macht das Leben für diejenigen, die anfangen und leider sogar Erfahrung haben, sehr schwierig:
- Unerwartete Renderprobleme: verzögertes Rendern oder kein Rendern (basierend auf der Programmlogik)
- Übergeben von Parametern ist unter anderem eine große Sache
.
Das folgende Beispiel hat geholfen:
Hoffentlich hilft das.
quelle