Wann wird der Rückruf von React setState verwendet?

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?

Ja gibt es, da setStatefunktioniert in gewisser asynchronousWeise. Das heißt, nach dem Aufruf wird setStatedie this.stateVariable 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 hilfreich

Betrachten Sie das folgende Beispiel

....
changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value });
  this.validateTitle();
},
validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }
},
....

Der obige Code funktioniert möglicherweise nicht wie erwartet, da die titleVariable möglicherweise nicht mutiert ist, bevor die Validierung durchgeführt wird. Jetzt fragen Sie sich vielleicht, ob wir die Validierung in der render()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ürde

In diesem Fall ist ein Rückruf hilfreich

....
changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value }, function() {
    this.validateTitle();
  });

},
validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }
},
....

Ein weiteres Beispiel ist, wann Sie möchten dispatchund 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 die Child ComponentÄnderung weitergegeben wurde.

In diesem Fall möchten Sie a verwenden setState callback, um den aktualisierten Statuswert an den API-Aufruf zu übergeben

....
changeTitle: function (event) {
  this.setState({ title: event.target.value }, () => this.APICallFunction());
},
APICallFunction: function () {
  // Call API with the updated value
}
....

this.setState({
    name:'value' 
},() => {
    console.log(this.state.name);
});

Der 1. Anwendungsfall, der mir in den Sinn kommt, ist ein apiAufruf, der nicht in das Rendering eingehen sollte, da er für eine Statusänderung ausgeführt wird each. Der API-Aufruf sollte nur bei einer speziellen Statusänderung und nicht bei jedem Rendern ausgeführt werden.

changeSearchParams = (params) => {
  this.setState({ params }, this.performSearch)
} 

performSearch = () => {
  API.search(this.state.params, (result) => {
    this.setState({ result })
  });
}

Daher kann für jede Statusänderung eine Aktion im Render-Methodenkörper 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, sondern componentDidMountzum Beispiel.

Betrachten Sie den setState-Aufruf

this.setState({ counter: this.state.counter + 1 })

IDEE

setState kann in asynchroner Funktion aufgerufen werden

Sie können sich also nicht darauf verlassen this. Wenn der obige Aufruf innerhalb einer asynchronen Funktion ausgeführt wurde this, 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

this.setState(
   {counter:this.state.counter+1}
 );

Korrekter Code mit setState mit Rückruffunktion:

 this.setState(
       (prevState,props)=>{
           return {counter:prevState.counter+1};
        }
    );

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