Wann wird der Setstate von React synchronisiert?

Reacts setstate ist in nativen Ereignissen und setTimeout „synchron“, in synthetischen Ereignissen und Hook-Funktionen jedoch „asynchron“. Wenn es sich in React um ein von React ausgelöstes Ereignis handelt, wird der Aufruf von setState nicht synchronisiert. Aktualisieren Sie „this.state“, Andere setState-Aufrufe führen „this.state“ synchron aus.

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

Wann wird der Setstate von React synchronisiert? Wann ist es asynchron?

Lassen Sie uns zuerst die Antwort geben:

Manchmal verhält es sich asynchron und manchmal verhält es sich synchron.

setState ist nur in synthetischen Ereignissen und Hook-Funktionen „asynchron“ und in nativen Ereignissen und setTimeout synchron.

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0
    };
  }
  
  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log
    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log
    }, 0);
  }
  render() {
    return null;
  }
};

1.setState ist nur in synthetischen Ereignissen und Hook-Funktionen „asynchron“ und in nativen Ereignissen und setTimeout synchron.

2. „Asynchron“ von setState bedeutet nicht, dass es intern durch asynchronen Code implementiert wird. Tatsächlich sind der Ausführungsprozess und der Code selbst alle synchron Aktualisierung,

Dies führt zu synthetischen Ereignissen und Der aktualisierte Wert kann nicht sofort in der Hook-Funktion abgerufen werden, was zu sogenannten „asynchronen“ Ergebnissen führt. Natürlich kann das aktualisierte Ergebnis über den Rückruf im zweiten Parameter setState(partialState, Rückruf).

3. Die Batch-Update-Optimierung von setState basiert ebenfalls auf „asynchronen“ (synthetischen Ereignissen, Hook-Funktionen). Es finden keine Batch-Updates in nativen Ereignissen und setTimeout statt Wenn setState mehrmals festgelegt wird, wird es von der Stapelaktualisierungsstrategie von setState überschrieben und die letzte Ausführung übernommen. Wenn mehrere verschiedene Werte von setState gleichzeitig festgelegt werden, werden sie während der Aktualisierung stapelweise zusammengeführt und aktualisiert.

Wenn in React die Ereignisverarbeitung durch React ausgelöst wird (z. B. durch onClick ausgelöste Ereignisverarbeitung), aktualisiert der Aufruf von setState this.state nicht synchron. Andere setState-Aufrufe führen this.state synchron aus. Das sogenannte „Zusätzlich“ bezieht sich auf die direkt über addEventListener hinzugefügten Ereignisverarbeitungsfunktionen unter Umgehung von React und auf asynchrone Aufrufe, die über setTimeout/setInterval generiert werden.

Grund:

In der Implementierung der setState-Funktion von React wird eine Variable isBatchingUpdates verwendet, um zu bestimmen, ob this.state direkt aktualisiert oder in die Warteschlange gestellt und später darüber gesprochen werden soll Dies bedeutet, dass setState diese .state-Funktion synchron aktualisiert. Diese Funktion ändert isBatchingUpdates in true, bevor die Ereignisverarbeitungsfunktion aufgerufen wird Von React gesteuert, wird this.state nicht synchronisiert.

Bitte beachten Sie https://github.com/LuNaHaiJiao/blog/issues/26

Empfohlenes Lernen: „

Video-Tutorial zum Reagieren

“

Das obige ist der detaillierte Inhalt vonWann wird der Setstate von React synchronisiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!