Warum aktualisiert „setState' den Status der React-Komponente nicht sofort?

Warum verändert der Aufruf der setState-Methode den Status nicht sofort?

In React ist die setState-Methode eine asynchrone Funktion, die zum Festlegen des Komponentenstatus verwendet wird. Dies bedeutet, dass der Status nicht sofort nach dem Aufruf von setState aktualisiert wird. Dies liegt daran, dass setState ein erneutes Rendern der Komponente auslöst, was ein teurer Vorgang sein kann. Um zu vermeiden, dass der Browser nicht mehr reagiert, werden setState-Aufrufe gestapelt und später ausgeführt.

Asynchrone Natur von setState

Laut der React-Dokumentation: „setState() mutiert this.state nicht sofort, aber erstellt einen ausstehenden Zustandsübergang. Daher kann der Zugriff auf this.state nach dem Aufruf von setState immer noch den vorhandenen Wert zurückgeben.

Batch-setState-Aufrufe

Zur Leistungsoptimierung können mehrere setState-Aufrufe gestapelt und in einem einzigen erneuten Rendern ausgeführt werden . Dies verhindert unnötiges erneutes Rendern und verbessert die Reaktionsfähigkeit der Benutzeroberfläche.

Verwenden eines Callbacks

Um auf den aktualisierten Statuswert nach setState zuzugreifen, können Sie eine Callback-Funktion als zweites Argument verwenden. Dieser Rückruf wird ausgeführt, nachdem der Status aktualisiert wurde:

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

Beispiel

Betrachten Sie das folgende Beispiel:

class NightlifeTypes extends React.Component {
   handleOnChange = (event) => {
      let value = event.target.checked;

      if(event.target.className == "barClubLounge") {
         this.setState({ barClubLounge: value}, () => { 
             console.log(value);
             console.log(this.state.barClubLounge);
             //both will print same value
         });        
      }
   }
}

In diesem Beispiel wird die Funktion handleOnChange festgelegt die Eigenschaft „barClubLounge state“ zum Wertargument. Die Rückruffunktion im setState-Aufruf stellt sicher, dass in den Konsolenprotokollen der aktualisierte Statuswert angezeigt wird.

Das obige ist der detaillierte Inhalt vonWarum aktualisiert „setState' den Status der React-Komponente nicht sofort?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!