Wie man den Zustand in Reaktion bringt

So erhalten Sie den Status in React: Öffnen Sie zunächst die entsprechende React-Codedatei. Anschließend können Sie in React den Status direkt über „this.state.{property}“ abrufen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, React17.0.1-Version, Dell G3-Computer.

Wie bekomme ich den Status in Reaktion?

In React können Sie den Status direkt über this.state.{property} abrufen, aber wenn wir den Status ändern, gibt es oft viele Fallstricke, die beachtet werden müssen.

Das Folgende sind drei häufige Fallen:

1. Der Status kann nicht direkt geändert werden.

Wenn eine Komponente ihren Zustand ändert, wird das Rendern nicht erneut ausgelöst. Beispiel:

2. Wenn setState aufgerufen wird, wird der zu ändernde Status nur in die Ereigniswarteschlange gestellt und die tatsächliche Ausführungszeit optimiert. und Aus eigenen Leistungsgründen können mehrere setState-Zustandsänderungen zu einer Zustandsänderung zusammengeführt werden. Verlassen Sie sich daher nicht auf den aktuellen Status, um den nächsten Status zu berechnen, denn wenn die Statusänderung tatsächlich durchgeführt wird, kann nicht garantiert werden, dass der abhängige this.state der neueste Status ist, da die Reaktion selbst mehrere Status zu einem zusammenführt, und zwar diesen .state wird immer noch sein Der Zustand vor mehreren Zustandsänderungen kann sich nicht auch auf die aktuellen Requisiten verlassen, um den nächsten Zustand zu berechnen, da die Aktualisierung der Requisiten ebenfalls asynchron erfolgt. Wenn Sie bei E-Commerce-Anwendungen im Warenkorb einmal auf die Schaltfläche „Kaufen“ klicken, wird die Kaufmenge um 1 erhöht. Wenn Sie zweimal hintereinander darauf klicken, wird sie um 2 erhöht. Wenn React zusammengeführt und geändert wird Einmal entspricht dies der Ausführung des folgenden Codes:

//错误
this.state.title='React';
正确修改方式是使用setState（）；
//正确
this.setState({title:'React'});

Dann wird der vorherige Vorgang überschrieben und die endgültige Kaufmenge nur um 1 erhöht. Zu diesem Zeitpunkt kann eine andere Funktion als Parameter verwendet werden, setState Diese Funktion hat Zwei Parameter Der erste Parameter ist der aktuellste Status (dieser Der vorherige Status preState (der Status vor der Änderung dieses Komponentenstatus) ist der Status nach der Aktualisierung des Komponentenstatus), und der zweite Parameter sind die neuesten Requisiten. Die Liste lautet wie folgt:

Object.assign(
previousState,
{quantity:this.state.quantity+1},
{quantity:this.state.quantity+1},
)

3. Die Statusaktualisierung ist ein Zusammenführungsprozess

Wenn Sie ssetState() aufrufen, um den Status einer Komponente zu ändern, muss nur der geänderte Status übergeben werden, nicht der vollständige Status Der Komponentenstatus wird aktualisiert. Es handelt sich um einen Zusammenführungsprozess. Der Status einer Komponente lautet beispielsweise:

//正确
this.setState((preState,props)=>({
counter:preState.quantity+1
}))

Wenn Sie nur den Titel ändern müssen, müssen Sie nur den geänderten Titel an setState übergeben:

this.state({
title:'React',
content:'React is an wondeful JS library'
})

react wird zusammengeführt Der neueste Titel wird in den ursprünglichen Zustand versetzt, wobei der Inhalt des ursprünglichen Zustands beibehalten wird. Der endgültige zusammengeführte Zustand lautet:

this.setState({title:'ReactJs'});

Verwandte Empfehlungen: „

“

Das obige ist der detaillierte Inhalt vonWie man den Zustand in Reaktion bringt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!