Die Verwendung von setState in React und die Verwendung von synchron und asynchron

Wenn Sie in React den Status direkt mit this.state ändern, wird die Komponente nicht erneut gerendert. Sie müssen this.setState verwenden, um die Eigenschaften der Komponente zu ändern.

1. Zwei Möglichkeiten, this.setState zu definieren

Definieren des Ausgangszustands

Status = {Anzahl: 0},

Wenn zu diesem Zeitpunkt eine Schaltfläche vorhanden ist, klicken Sie auf die Schaltfläche, um die Anzahl um 1 zu erhöhen. Wir können dies auf zwei Arten schreiben

(1) Übertragungsgegenstand

this.setState({Anzahl: this.state.count + 1})

(2) Übertragungsfunktion

this.setState((Zustand, Eigenschaften) => ({Anzahl: Anzahl + 1}))

2. Was sind die Unterschiede zwischen den beiden Methoden von setState?

Wenn der Wert des geänderten Zustands vom Wert des vorherigen Zustands abhängen muss, wird eine Funktion wie die folgende benötigt:

Anzahl hinzufügen(){
  this.setState({Anzahl: this.state.count + 1})
  this.setState({Anzahl: this.state.count + 1})
  this.setState({Anzahl: this.state.count + 1})
}

Zu diesem Zeitpunkt wird nur eine +1-Operation ausgeführt, da mehrere setState-Operationen in React zusammengeführt werden und der neue Status durch Object.assgin({}, {count: 0}, {count: 1}) zusammengeführt wird. Die obige Zuweisung wird dreimal ausgeführt, aber da der Wert von count nicht aktualisiert wird, ist das endgültige Ausführungsergebnis nur +1. Wenn die setState-Zuweisung eine Funktion ist, ist die Situation anders.

Anzahl hinzufügen(){
  this.setState((Zustand, Eigenschaften) => ({Anzahl: Anzahl + 1}))
  this.setState((Zustand, Eigenschaften) => ({Anzahl: Anzahl + 1}))
  this.setState((Zustand, Eigenschaften) => ({Anzahl: Anzahl + 1}))
}

Dieser Vorgang hat einen Effekt von +3, da React eine Beurteilung vornimmt. Wenn eine Funktion übergeben wird, wird diese Funktion ausgeführt und der Wert von count wird zu diesem Zeitpunkt geändert.

3. Ist setState synchron oder asynchron?

☆☆☆☆☆ ist asynchron

(1) Das heißt, nachdem wir den Status über this.setState geändert haben, wird bei der Ausgabe des Statuswerts in der nächsten Zeile nicht der neue Wert angezeigt

(2) Warum asynchron?

Dafür gibt es zwei Gründe. Einer ist die Verbesserung der Effizienz. Jedes Mal, wenn der Statuswert geändert wird, wird der Renderer neu gerendert. Das mehrmalige Zusammenführen und Aktualisieren des Statuswerts kann die Leistung verbessern. Der andere Grund ist, dass der Renderer später aktualisiert wird. Wenn der Renderer Unterkomponenten enthält, hängen die Eigenschaften der Unterkomponenten vom Status der übergeordneten Komponente ab, und Eigenschaften und Status können nicht konsistent sein.

(3) Wie erhält man den Zustandswert während eines asynchronen Betriebs?
① In der Rückruffunktion von setState

dies.setState({ 
  Anzahl: dieser.Zustand.Anzahl + 1}}, 
  ()=>{ console.log(dieser.Zustand.Anzahl)})

② Holen Sie es sich in componentDidUpdate

KomponenteDidUpdate(){
  Konsole.log(dieser.Status.Anzahl)
}

☆☆☆☆☆ ist synchronisiert

(1) Das heißt, nachdem wir den Status über this.setState geändert haben, gibt die nächste Zeile den neuen Wert von state aus

(2) In welchen Szenarien ist eine Synchronisierung möglich?
① Natives js erhält Dom-Elemente und bindet Ereignisse

<button id="addBtn">Klick mich an +1</button>
KomponenteDidMount(){
   const addBtn = document.getElementById('addBtn')
   changeBtn.addEventListener('klicken',()=>{
       this.setState({Anzahl: this.state.count + 1})
       console.log(diese.Statusnachricht)
   })
}

② Timer-SetTimeout

<button onClick={ e => this.addOne() }>Klick mich an +1</button>
addOne(){
setTimeout(()=>{ this.setState({ Anzahl: this.state.count + 1 })
 console.log(dieser.Zustand.Anzahl) },0)
}

Dies ist das Ende dieses Artikels über die Verwendung von setState in React und die Verwendung von synchron und asynchron. Weitere relevante Inhalte zu synchron und asynchron zu React setState finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!