Wenn sich der Status einer Reaktionskomponente ändert, wird die Rendermethode aufgerufen. Daher kann für jede Statusänderung eine Aktion im Render-Methodenkörper ausgeführt werden. Gibt es dann einen bestimmten Anwendungsfall für den setState-Rückruf?
191
render()
stattdessen aktivieren, wird sie jedes Mal ausgeführt, wenn ein Status aktualisiert wird. Dies ist wahrscheinlich nicht das, was Sie möchten. Dadurch wird Ihr Code auch weniger lesbar und logisch.Antworten:
Ja gibt es, da
setState
funktioniert in gewisserasynchronous
Weise. Das heißt, nach dem Aufruf wirdsetState
diethis.state
Variable nicht sofort geändert. Wenn Sie also unmittelbar nach dem Festlegen des Status für eine Statusvariable eine Aktion ausführen und dann ein Ergebnis zurückgeben möchten, ist ein Rückruf hilfreichBetrachten Sie das folgende Beispiel
Der obige Code funktioniert möglicherweise nicht wie erwartet, da die
title
Variable möglicherweise nicht mutiert ist, bevor die Validierung durchgeführt wird. Jetzt fragen Sie sich vielleicht, ob wir die Validierung in derrender()
Funktion selbst durchführen können, aber es wäre besser und sauberer, wenn wir dies in der changeTitle-Funktion selbst handhaben könnten, da dies Ihren Code organisierter und verständlicher machen würdeIn diesem Fall ist ein Rückruf hilfreich
Ein weiteres Beispiel ist, wann Sie möchten
dispatch
und wann sich der Status ändert. Sie möchten dies in einem Rückruf tun und nicht so,render()
wie es bei jedem erneuten Rendern genannt wird. Daher sind viele solcher Szenarien möglich, in denen Sie einen Rückruf benötigen.Ein anderer Fall ist a
API Call
Ein Fall kann auftreten, wenn Sie einen API-Aufruf basierend auf einer bestimmten Statusänderung ausführen müssen. Wenn Sie dies in der Render-Methode tun, wird dieser bei jeder Render-
onState
Änderung aufgerufen oder weil ein Prop an dieChild Component
Änderung weitergegeben wurde.In diesem Fall möchten Sie a verwenden
setState callback
, um den aktualisierten Statuswert an den API-Aufruf zu übergebenquelle
if (this.title.length === 0) {
sollte seinthis.state.title.length
, richtig?setState(state => state.title.length ? { titleError: "Title can't be blank" } : null)
und die Änderung wird gestapelt. Keine Doppelrender erforderlich.quelle
Der 1. Anwendungsfall, der mir in den Sinn kommt, ist ein
api
Aufruf, der nicht in das Rendering eingehen sollte, da er für eine Statusänderung ausgeführt wirdeach
. Der API-Aufruf sollte nur bei einer speziellen Statusänderung und nicht bei jedem Rendern ausgeführt werden.Sehr schlechte Praxis , da die
render
-Methode rein sein sollte, bedeutet dies, dass keine Aktionen, Statusänderungen oder API-Aufrufe ausgeführt werden sollten. Fügen Sie einfach Ihre Ansicht zusammen und geben Sie sie zurück. Aktionen sollten nur für einige Ereignisse ausgeführt werden. Rendern ist kein Ereignis, sonderncomponentDidMount
zum Beispiel.quelle
Betrachten Sie den setState-Aufruf
IDEE
Sie können sich also nicht darauf verlassen
this
. Wenn der obige Aufruf innerhalb einer asynchronen Funktion ausgeführt wurdethis
, bezieht sich dies auf den Status der Komponente zu diesem Zeitpunkt, aber wir haben erwartet, dass dies auf die Eigenschaft innerhalb des Status zum Zeitpunkt des Aufrufs von setState oder des Beginns der asynchronen Task verweist. Und da die Aufgabe ein asynchroner Aufruf war, hat sich diese Eigenschaft möglicherweise im Laufe der Zeit geändert. Daher ist die Verwendung unzuverlässigthis
Schlüsselwort zu verwenden, um auf eine Eigenschaft des Status zu verweisen. wir eine Rückruffunktion, deren Argumente previousState und Requisiten sind. Dies bedeutet, dass die asynchrone Aufgabe ausgeführt wurde und es Zeit war, den Status mithilfe des setState-Aufrufs zu aktualisieren. PrevState bezieht sich jetzt auf den Status, wenn setState hat noch nicht begonnen. Sicherstellen, dass nextState nicht beschädigt wird.Falscher Code: würde zur Beschädigung von Daten führen
Korrekter Code mit setState mit Rückruffunktion:
Wenn wir also unseren aktuellen Status basierend auf dem Wert, den die Eigenschaft gerade besitzt, auf den nächsten Status aktualisieren müssen und dies alles auf asynchrone Weise geschieht, ist es eine gute Idee, setState als Rückruffunktion zu verwenden.
Ich habe versucht, es hier im Codepen CODE PEN zu erklären
quelle