Heim > Web-Frontend > Front-End-Fragen und Antworten > Was ist Setstate in React

Was ist Setstate in React

WBOY
Freigeben: 2022-04-21 17:06:11
Original
2135 Leute haben es durchsucht

Setstate ist die Methode, die zum Aktualisieren des Komponentenstatus verwendet wird. setState() stellt Änderungen am Komponentenstatus in die Warteschlange und benachrichtigt React, dass diese Komponente und ihre Unterkomponenten mithilfe des aktualisierten Status neu gerendert werden müssen (Objekt,[Rückruffunktion])“.

Was ist Setstate in React

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Was ist Setstate in React?

Basierend auf der täglichen Nutzung verwenden wir es grundsätzlich, um den Status der Komponente zu aktualisieren. Laut offizieller Dokumentation:

setState() stellt Änderungen am Komponentenstatus in die Warteschlange und benachrichtigt React, dass diese Komponente und ihre Unterkomponenten mit dem aktualisierten Status neu gerendert werden müssen. Dies ist die primäre Möglichkeit, die Benutzeroberfläche als Reaktion auf Ereignishandler und die Verarbeitung von Serverdaten zu aktualisieren. Stellen Sie sich setState() als eine Anfrage und nicht als einen Befehl vor, der die Komponente sofort aktualisiert. Für eine besser wahrgenommene Leistung ruft React es träge auf und aktualisiert dann mehrere Komponenten in einem einzigen Durchgang. React garantiert nicht, dass Zustandsänderungen sofort wirksam werden.

Der Erklärung zufolge besteht die Funktion von setState darin, die Statusaktualisierungsaufgabe der Komponente in die Aufgabenwarteschlange einzureihen, anstatt den Status sofort durch Aufrufen zu aktualisieren. Das heißt, setState wird als Anforderung und nicht als Befehl betrachtet um die Komponente sofort zu aktualisieren. Wenn Sie daher nach dem Aufruf der setState-Methode den Wert des Komponentenstatus abrufen, erhalten Sie einen Wert, der nicht aktualisiert wurde.

setState() aktualisiert Komponenten nicht immer sofort. Es verschiebt Aktualisierungen stapelweise. Dies macht es gefährlich, this.state unmittelbar nach dem Aufruf von setState() zu lesen. Um versteckte Gefahren zu beseitigen, verwenden Sie bitte die Rückruffunktion von ComponentDidUpdate oder SetState (SetState (Updater, Callback)). Beide Methoden können sicherstellen, dass sie nach dem Anwendungsupdate ausgelöst werden.

Verwenden Sie

setState(updater, [callback]),
Nach dem Login kopieren
updater als Funktion, die das stateChange-Objekt zurückgibt: (state, props) => stateChange

this.setState(state => ({count: state.count + 1}), () => { 
// 在状态更新且界面更新之后回调
        console.log('test3 setState callback()', this.state.count)
      })
Nach dem Login kopieren
setState(stateChange, [callback])
Nach dem Login kopieren

stateChange ist das Objekt,

callback ist eine optionale Rückruffunktion, die nach dem Status verwendet wird wird aktualisiert und die Schnittstelle wird aktualisiert.

this.setState({count: this.state.count + 1}), () => {
 // 在状态更新且界面更新之后回调
        console.log('test3 setState callback()', this.state.count)
      })
Nach dem Login kopieren

Zusammenfassung:

Objektmethode ist die Kurzformmethode der Funktionsmethode

Wenn der neue Status nicht vom ursprünglichen Status abhängt ===> Der neue Status hängt vom ursprünglichen Status ab. ===> Verwenden Sie die Funktionsmethode.

Das obige ist der detaillierte Inhalt vonWas ist Setstate in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage