Analyse asynchroner Probleme von React's setSate

Der Inhalt dieses Artikels befasst sich mit der Analyse des asynchronen Problems von React. Es hat einen gewissen Referenzwert. Ich hoffe, dass es für Sie hilfreich ist.

Wenn wir die Dokumentation lesen, sagen die meisten, dass der SetState von React asynchron ist, aber ist er wirklich asynchron? Wenn ja, dann können wir auch raten: Lässt sich das synchronisieren? Wann muss es also asynchron sein und wann muss es synchronisiert werden?

Werfen wir zunächst einen Blick auf die offizielle Beschreibung von setSate durch React:

Betrachten Sie setState() als eine Anfrage und nicht als einen Befehl, um die Aktualisierungskomponente sofort auszuführen. Für eine bessere Leistung kann React den Vorgang verschieben und diese Komponenten später alle auf einmal aktualisieren. React garantiert nicht, dass die geänderten Ergebnisse unmittelbar nach setState verfügbar sind.

Ein sehr klassisches Beispiel:

// 初始state.count 当前为 0
componentDidMount(){
    this.setState({count: state.count + 1});
    console.log(this.state.count)
}

Wenn Sie mit React vertraut sind, müssen Sie wissen, dass das endgültige Ausgabeergebnis 0 und nicht 1 ist.

Sehen wir uns ein weiteres Beispiel an

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = { number: 0 };
  }
  render() {
    return <button ref="button" onClick={this.onClick.bind(this)}>点我</button>;
  }
  componentDidMount() {
    //手动绑定mousedown事件
    this.refs.button.addEventListener(
      "mousedown",
      this.onClick.bind(this)
    );
   
    //setTimeOut
    setTimeout(this.onClick.bind(this), 1000);
  }
  onClick(event) {
    if (event) {
      console.log(event.type);
    } else {
      console.log("timeout");
    }
    console.log("prev state:", this.state.number);
    this.setState({
      number: this.state.number + 1
    });
    console.log("next state:", this.state.number);
  }
}
export {Demo};

Verwenden Sie 3 Methoden, um den Status in dieser Komponente zu aktualisieren

 1.在p节点中绑定onClick事件
 2.在componentDidMount中手动绑定mousedown事件
 3.在componentDidMount中使用setTimeout调用onClick

Können Sie das Ergebnis erraten, nachdem Sie auf die Komponente geklickt haben? Das Ausgabeergebnis ist:

timeout
prev state: 0
next state: 1
mousedown
prev state: 1
next state: 2
click
prev state: 2
next state: 2

Das Ergebnis scheint etwas unerwartet zu sein. Von den drei Methoden wird nur das an p gebundene onClick-Ereignis ausgegeben, was beweisen kann, dass setState asynchron ist synchron sein.

Zusammenfassung:
1. Im Komponentenlebenszyklus oder bei der Reaktionsereignisbindung wird setState asynchron aktualisiert.
2. Der Aufruf von setState in einem verzögerten Rückruf oder einem nativen ereignisgebundenen Rückruf ist nicht unbedingt asynchron.

Dieses Ergebnis bedeutet nicht, dass die Aussage, dass setState asynchron ausgeführt wird, falsch ist. Eine genauere Aussage ist, dass setState keine synchrone Ausführung garantieren kann.

Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte JavaScript-Video-Tutorial auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonAnalyse asynchroner Probleme von React's setSate. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!