So verwenden Sie state und setState in React (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich die Verwendung von state und setState in Reaktionsstudiennotizen vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf.

In React werden state und setState() verwendet, um den Zustand von Komponenten zu steuern.

Zustand

Zustand wird in React zum Speichern des Komponentendatenstatus verwendet und kann mit Daten in Vue verglichen werden.

1. Die Rolle des Zustands

Zustand ist ein Objekt einer Komponente in React, das die Benutzeroberfläche als Zustandsmaschine behandelt und sich vorstellt, dass es verschiedene Zustände hat und dann diesen Status rendern, kann die Benutzeroberfläche problemlos mit den Daten konsistent bleiben.

In React führt das Aktualisieren des Status einer Komponente dazu, dass die Benutzeroberfläche neu gerendert wird (betreiben Sie das DOM nicht einfach). Mit anderen Worten, die Benutzeroberfläche ändert sich mit dem Status und den Änderungen.

2. So funktioniert der Status

Die häufig verwendete Methode, um React über Datenänderungen zu benachrichtigen, ist der Aufruf von setState (Daten, Rückruf). Diese Methode führt Daten in diesem .state zusammen und rendert die Komponente erneut. Rufen Sie nach Abschluss des Renderns den optionalen

Rückruf auf Rückruf, da React für die Aktualisierung der Schnittstelle auf den neuesten Stand verantwortlich ist

setState()

Der Unterschied zu Vue besteht darin, dass der Zustand nicht direkt geändert werden kann und benötigt wird über die setState()-Methode geändert werden.

1. SetState() wird nicht sofort nach der Aktualisierung des Komponentenstatus wirksam. Um die Leistung zu verbessern, aktualisiert React den Status stapelweise und rendert ihn dann. Dies ist also kein asynchroner Vorgang notwendig, um den Statuswert unmittelbar nach setSate() abzurufen. Der Status nach der Aktualisierung.

2. Der erste Parameter von setState() akzeptiert zwei Arten von Parametern, Objekt und Funktion

Objekt

this.setState({
 msg: '更新state msg'
})

Wenn der Parameter Objekt ist Diesmal kann es sich um den Schlüssel im entsprechenden Status handeln, und der Wert ist der neue Wert.

Funktion

Wenn der Parameter eine Funktion ist, übergibt setState() das Ergebnis des vorherigen setState() als Parameter an diese Funktion

...
constructor () {
 this.state = { counter: 0 }
}
add() {
 this.setState({ counter: this.state.counter + 1 })
 this.setState({ counter: this.state.counter + 1 }) // 此时`this.state.counter`的值还是初始值0,，所以这个操作是无效的
 this.setState(prevState => { counter: prevState.counter + 1 }) // `prevState.counter` 为上次更新之后的值，即是1
}
...

Der zweite Parameter von setState() ist eine Rückruffunktion, die angibt, dass die Statusaktualisierung abgeschlossen ist

this.setState({
 msg: '更新state msg'
}, () => {
 console.log('state 更新完毕')
})

Demnach können Promise und async/await verwendet werden, um es in einen synchronen Vorgang zu kapseln

setStateAsync(state) {
 return new Promise(resolve => {
  this.setState(state, resolve)
 })
}
// 使用
async add() {
 await setStateAsync({ counter: this.state.counter + 1 })
 console.log('state 更新完毕')
}

Das Obige habe ich für alle zusammengestellt, ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

So verwenden Sie die Swiper-Komponente, um die Bildwechselanzeige im WeChat Mini-Programm zu erreichen

Was gibt es in vue2 .0 Häufig verwendete UI-Bibliotheken?

So konvertieren Sie ein Zeichen in eine Ganzzahl in C#

So führen Sie vue2.0 und animate.css zusammen (Details Tutorial)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie state und setState in React (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!