Wie oft werden mehrere setStates in React aufgerufen?

1. Zwei setState, wie oft soll aufgerufen werden?

Wie im folgenden Code gezeigt, gibt es im state eine count . An die Schaltfläche wird ein Klickereignis gebunden und setState wird im Ereignis zweimal ausgeführt, wobei der Wert von count “ jedes Mal um 1 erhöht wird.

Wie oft wird setState ausgeführt, wenn auf eine Schaltfläche geklickt wird? Wie oft wird render() ausgeführt?

Antwort: Jeweils 1 Mal.

Zustand = {Anzahl: 0};
handleKlick = () => {
    this.setState({ Anzahl: this.state.count + 1 });
    this.setState({ Anzahl: this.state.count + 1 });
};
rendern() {
    Konsole.log(`render`);
    zurückkehren (
        <>
            <div>Aktueller Zähler: {this.state.count}</div>
            <button onClick={this.handleClick}>hinzufügen</button>
        </>
    );
}

Laut gesundem Menschenverstand wird beim ersten Klicken auf die Schaltfläche setState zweimal ausgeführt, sodass der Wert von count jedes Mal um 1 erhöht wird. render() sollte zweimal ausgeführt werden und der Endwert von count sollte 2 sein. Aber so funktioniert React nicht.

Führen Sie einfach den obigen Code in Ihrem Browser aus:

Zu Beginn zeigt die Seite an, dass der Wert von count 0 ist, und die Konsole druckt render aus, was gedruckt wird, wenn React zum ersten Mal rendert. Nach dem Klicken auf die Schaltfläche zeigt die Seite an, dass count 1 ist und nur 1 render gedruckt wird, was bedeutet, dass React während dieses Vorgangs nur einmal setState und einmal render() ausgeführt hat.

Der Grund dafür ist, dass React intern mehrere setState in derselben Ereignisantwortfunktion zusammenführt, wodurch die Anzahl der setState -Aufrufe reduziert wird, was auch die Anzahl der Renderings reduzieren und die Leistung verbessern kann.

Dies erklärt auch, warum der endgültige Wert von count im obigen Code 1 ist, da React die beiden setState zusammengeführt und sie am Ende nur 1 ausgeführt hat render() auch nur einmal ausgeführt wurde.

2. Zwei SetState, welcher wird aufgerufen?

Der obige Code überprüft jedoch nicht, welcher setState nach der Zusammenführung von React ausgeführt wird. Ändern Sie, wie im folgenden Code gezeigt, die Operation für count im zweiten setState , um 2 hinzuzufügen, und lassen Sie den Rest des Codes unverändert:

Zustand = {Anzahl: 0};
handleKlick = () => {
    this.setState({ Anzahl: this.state.count + 1 });
    this.setState({ count: this.state.count + 2 }); //Ändern auf +2
};
rendern() {
    Konsole.log(`render`);
    zurückkehren (
        <>
            <div>Aktueller Zähler: {this.state.count}</div>
            <button onClick={this.handleClick}>hinzufügen</button>
        </>
    );
}

Führen Sie es erneut im Browser aus:

Die Ergebnisse zeigen, dass nach dem Klicken auf die Schaltfläche der Wert von count schließlich 2 wird, was bedeutet, dass eine +2 -Operation ausgeführt wird und render() nur 1 ausgeführt wird. Dies bedeutet, dass, wenn React mehrere setState zusammenführt und es Attribute mit demselben Namen gibt, das letztere Attribut mit demselben Namen das erstere Attribut mit demselben Namen überschreibt . Es ist verständlich, dass bei Attributen mit gleichem Namen letztendlich die Attribute im letzten setState ausgeführt werden.

3. In setTimeout werden zwei setStates platziert?

Was ist das Ergebnis, wenn wir in der Klickereignisfunktion einen Timer setTimeout hinzufügen und die Operation setState im Timer zweimal ausführen? Im folgenden Code wird ein Timer setTimeout in die Ereignisverarbeitungsfunktion geschrieben und zwei setState werden in setTimeout eingefügt.

Zustand = {Anzahl: 0};
handleKlick = () => {
    setzeTimeout(() => {
        this.setState({ Anzahl: this.state.count + 1 });
        this.setState({ Anzahl: this.state.count + 2 });
    }, 0);
};
rendern() {
    Konsole.log(`render`);
    zurückkehren (
        <>
            <div>Aktueller Zähler: {this.state.count}</div>
            <button onClick={this.handleClick}>hinzufügen</button>
        </>
    );
}

Laufergebnisse:

Die Ergebnisse zeigen, dass nach dem Klicken auf die Schaltfläche der Wert von count schließlich 3 wird, was bedeutet, dass sowohl die Operationen +1 als auch +2 ausgeführt werden render() außerdem 2 ausgeführt wird.

Dies liegt daran, dass der direkte Aufruf setState in den synthetischen Ereignissen und Lebenszyklusfunktionen von React durch den Leistungsoptimierungsmechanismus von React verwaltet wird, der mehrere setState zusammenführt. Der Aufruf setState in nativen Ereignissen und setTimeout wird von React nicht verwaltet, daher werden mehrere setState nicht zusammengeführt. Wenn setState mehrmals geschrieben wird, wird setState mehrmals aufgerufen.

4. Fazit

Direkt in React verwendete Ereignisse wie onChange und onClick sind von React gekapselte Ereignisse. Sie sind synthetische Ereignisse und werden von React verwaltet.

React verfügt über einen Mechanismus zur Leistungsoptimierung für synthetische Ereignisse und Lebenszyklusfunktionen. Es führt mehrere setState zusammen. Wenn Attribute mit demselben Namen erscheinen, überschreiben die letzteren die ersteren .

Wenn Sie den Leistungsoptimierungsmechanismus von React umgehen und setState in nativen Ereignissen oder setTimeout verwenden, wird es nicht mehr von React verwaltet. Wenn Sie setState mehrmals schreiben, wird setState mehrmals aufgerufen.

Dies ist das Ende dieses Artikels darüber, wie oft mehrere setStates in React aufgerufen werden. Weitere Informationen dazu, wie oft mehrere setStates in React aufgerufen werden, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!