Detaillierte Erläuterung des React setState-Datenaktualisierungsmechanismus

Warum setState verwenden?

Im Prozess der React-Entwicklung ist es unvermeidlich, sich mit dem Zustand der Komponenten zu befassen. Jeder, der React verwendet hat, weiß, dass Sie die intern bereitgestellte Methode „setState“ verwenden müssen, wenn Sie den Wert im Status ändern möchten. Warum können wir den Statuswert nicht direkt durch Zuweisung ändern? Lassen Sie uns es analysieren und uns zunächst eine Demo ansehen.

Klasse Index erweitert React.Component {
  dieser.Zustand = {
    Anzahl: 0
  }
  beim Klicken = () => {
    dies.setState({
       Anzahl: 10
    })
  }
  rendern() {
    zurückkehren (
      <div>
        <span>{this.state.count}</span>
        <button onClick={this.onClick}>klicken</button>
      </div>
    )
  }
}

Dem obigen Code zufolge können Sie sehen, dass sich der Wert von count im state nach dem Klicken auf die Schaltfläche auf 10 ändert. Und aktualisieren Sie die Seitenanzeige. Daher hat die Statusänderung zwei Auswirkungen: die entsprechenden Wertänderungen und **Seitenaktualisierungen. **Um diese beiden Punkte zu erreichen, ist setState in React erforderlich. Angenommen, wir ändern den Inhalt der Methode onClick in this.state.count = 10 und drucken den Wert von this.state in der Methode aus. Dann können wir sehen, dass sich der Wert von state geändert hat. Die Seite wird jedoch nicht auf den neuesten Wert aktualisiert. ☆Zusammenfassend:

• Der Zweck der Änderung des Statuswerts besteht darin, die Seite zu aktualisieren. Wir hoffen, dass React den neuesten Status zum Rendern der Seite verwendet. Mit der Methode der direkten Zuweisung kann React jedoch keine Statusänderungen überwachen.
• Mit der Methode setState muss React darüber informiert werden, dass sich die Statusdaten geändert haben.
  

☆Zum Erweitern:

In Vue wird die direkte Zuweisung zum Aktualisieren von Daten verwendet und Vue kann auch die neuesten Daten zum Rendern der Seite verwenden. Warum ist das so? In vue2 wird Object.defineProperty() verwendet, um die Get- und Set-Methoden von Daten zu überwachen und Datenänderungen zu überwachen. In vue3 wird ES6-Proxy verwendet, um Datenänderungen zu überwachen.

Verwendung von setState

Ich glaube, jeder kennt die Verwendung von setState, aber ich möchte es hier trotzdem aufzeichnen: Die setState-Methode hat zwei Parameter: Der erste Parameter kann ein Objekt sein, um den Eigenschaftswert direkt zu ändern, oder es kann eine Funktion sein, die den vorherigen Statuswert abrufen kann. Der zweite Parameter ist eine optionale Rückruffunktion, die den neuesten Statuswert abrufen kann. Die Rückruffunktion wird ausgeführt, nachdem die Komponentenaktualisierung abgeschlossen ist, was der Ausführung während componentDidUpdate -Lebenszyklus entspricht.

• Wenn der erste Parameter ein Objekt ist: Ändern Sie wie in der obigen Demo direkt den Attributwert von state

dies.setState({
	Schlüssel: neuer Status
})

• Wenn der erste Parameter eine Funktion ist: Der Eigenschaftswert des vorherigen Zustands kann innerhalb der Funktion abgerufen werden.

// prevState ist der vorherige Status, props sind die Eigenschaften, wenn dieses Update angewendet wird
this.setState((vorherigerState, Eigenschaften) => {
  zurückkehren {
      Schlüssel: prevState.key 
  }
})

Asynchrone oder synchrone Updates

setState() stellt eine Änderung des Status einer Komponente in die Warteschlange und benachrichtigt React, dass diese Komponente und ihre untergeordneten Elemente mit dem aktualisierten Status erneut gerendert werden müssen. Dies ist die primäre Methode zum Aktualisieren der Benutzeroberfläche als Reaktion auf Ereignishandler und Serverdaten. Behandeln Sie setState() als Anforderung und nicht als sofortigen Befehl zum Aktualisieren der Komponente. Um eine bessere wahrgenommene Leistung zu erzielen, ruft React es verzögert auf und aktualisiert dann mehrere Komponenten in einem einzigen Durchgang. React garantiert nicht, dass Statusänderungen sofort wirksam werden.

Ändern wir zunächst den obigen Code. Wenn setState in der onClick-Methode dreimal hintereinander aufgerufen wird, ist setState, wie oben erwähnt, eine asynchrone Methode. Jeder Aufruf fügt nur die Änderung zur Warteschlange hinzu. Beim synchronen Aufruf wird nur das letzte Update ausgeführt, das Ergebnis ist also 1 statt 3.

bei Klick = () => {
  const { count } = dieser.Zustand
  this.setState({ Anzahl: Anzahl + 1 })
  this.setState({ Anzahl: Anzahl + 1 })
  this.setState({ Anzahl: Anzahl + 1 })
}

Der obige Code kann als Methode Object.assign() verstanden werden.

Objekt.zuweisen(
  Zustand,
  { Anzahl: Status.Anzahl + 1 },
  { Anzahl: Status.Anzahl + 1 },
  { Anzahl: Status.Anzahl + 1 }
)

Wenn eine Funktion als erster Parameter übergeben und dreimal hintereinander aufgerufen wird, ist das Ergebnis dann dasselbe, als ob sie als Objekt übergeben würde?

bei Klick = () => {
  this.setState((vorherigerState, Eigenschaften) => {
    zurückkehren {
      Anzahl: vorherigerZustand.Anzahl + 1
    }
  })
  this.setState((vorherigerState, Eigenschaften) => {
    zurückkehren {
      Anzahl: vorherigerZustand.Anzahl + 1
    }
  })
  this.setState((vorherigerState, Eigenschaften) => {
    zurückkehren {
      Anzahl: vorherigerZustand.Anzahl + 1
    }
  })
}

Das Ergebnis unterscheidet sich erheblich von der Art der Objektübergabe. Durch die Verwendung der Funktionsmethode kann der Effekt einer Erhöhung um 3 erzielt werden. Warum ist das so? Die aktuellsten Status- und Props-Werte können innerhalb der Funktion abgerufen werden. Aus dem Obigen können wir ersehen, dass setState stapelweise aktualisiert wird. Die Verwendung einer Funktion stellt sicher, dass der aktuelle Status auf dem vorherigen Status basiert, sodass der Effekt der Selbstinkrementierung um 3 erreicht wird.

☆Zusammenfassend: Warum ist die Methode setState asynchron?

• Dies kann die Leistung erheblich verbessern. React16 führte die Fiber-Architektur ein, die Aufgaben aufteilt und priorisiert und Aufgaben mit höheren Prioritäten Vorrang einräumt. Die Antwort der Seite ist eine Aufgabe mit hoher Priorität. Wenn setState synchron ist, muss die Seite nach der Aktualisierung aktualisiert werden, wodurch die Antwort der Seite blockiert wird. Der beste Ansatz besteht darin, mehrere Updates zu erhalten und dann Batch-Updates durchzuführen. Aktualisieren Sie die Seite nur einmal.
• Wenn der Status synchron aktualisiert wird, die Renderfunktion jedoch noch nicht ausgeführt wurde, können Status und Requisiten nicht synchron gehalten werden.

**Sind alle setStates asynchron? **Die Antwort ist ja! ! ! Es gibt auch Szenarien, in denen setState in React synchronisiert wird.

beim Klicken = () => {
	this.setState({ Anzahl: this.state.count + 1 })
  console.log(dieser.Status)
  setzeTimeout(() => {
    this.setState({ Anzahl: this.state.count + 1 })
    console.log(dieser.Status)
  }, 0)
}

Der obige Code druckt **0, 2. **Warum ist das so? Tatsächlich ist setState in React keine asynchrone Funktion im strengen Sinne. Die Implementierung erfolgt durch eine verzögerte Ausführung der Warteschlange. Verwenden Sie isBatchingUpdates um zu bestimmen, ob der aktuelle setState zur Aktualisierungswarteschlange hinzugefügt wird oder die Seite aktualisiert. Wenn isBatchingUpdates=ture , fügen Sie es der Aktualisierungswarteschlange hinzu, andernfalls führen Sie die Aktualisierung aus.

Wir wissen, dass React isBatchingUpdates verwendet, um zu bestimmen, ob der Aktualisierungswarteschlange beigetreten werden soll. Warum ist isBatchingUpdates im setTimeout -Ereignis false ? Der Grund dafür ist, dass in React die nativen Ereignisse von HTML gekapselt und als synthetische Ereignisse bezeichnet werden. **Daher kann im Lebenszyklus und bei synthetischen Ereignissen von React der Wert von isBatchingUdates gesteuert und anhand des Werts bestimmt werden, ob die Seite aktualisiert werden soll. Bei nativen Ereignissen, die von der Hostumgebung bereitgestellt werden (d. h. nicht synthetische Ereignisse), kann der Wert von isBatchingUpdates nicht auf „false“ gesetzt werden, daher wird das Update sofort ausgeführt.

☆ Daher ist setState kein synchrones Szenario, wird aber in speziellen Szenarien nicht von React gesteuert **

Zusammenfassen

setState ist keine einfache synchrone oder asynchrone Funktion. Der Unterschied zwischen der synchronen und asynchronen Leistung spiegelt sich in den unterschiedlichen Aufrufszenarien wider. Es verhält sich wie eine asynchrone Funktion im Lebenszyklus und bei synthetischen Ereignissen von React. In nicht-synthetischen Ereignissen wie den nativen Ereignissen von DOM erscheinen sie als synchrone Funktionen.

Oben finden Sie eine ausführliche Erläuterung des React setState-Datenaktualisierungsmechanismus. Weitere Informationen zum React setState-Datenaktualisierungsmechanismus finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!