Verständnis des synchronen oder asynchronen Problems von setState in React

1. Ist setState synchron? asynchron?

In den Klassenkomponenten von React können wir die Methode setState verwenden, um den Status zu aktualisieren. Aber manchmal können nach der Verwendung von setState die neuesten Daten nicht abgerufen werden.

Tatsächlich wird der Ausführungsprozess von setState selbst in React mit dem Code synchronisiert, was nur durch den Leistungsoptimierungsmechanismus des React-Frameworks selbst verursacht wird. In React werden synthetische Ereignisse und Lebenszyklusfunktionen vor Aktualisierungen aufgerufen, was dazu führt, dass aktualisierte Werte in synthetischen Ereignissen und Lebenszyklusfunktionen nicht sofort abgerufen werden können und somit eine asynchrone Form entsteht.

Wenn die Methode setState in einem synthetischen Ereignis n-mal aufgerufen wird und React nicht optimiert ist, wird die aktuelle Komponente n-mal gerendert, was eine enorme Leistungsverschwendung darstellt. Aus Leistungsgründen führt React daher mehrere Aufrufe der Methode setState zu einer Ausführung zusammen. Wenn setState ausgeführt wird, werden die Daten im Status nicht sofort aktualisiert.

Wie bereits erwähnt, erfolgt der direkte Aufruf von setState in den synthetischen Ereignissen und Lebenszyklusfunktionen von React asynchron.

Wenn Sie außerdem den Leistungsoptimierungsmechanismus von React umgehen und setState in nativen Ereignissen oder setTimeout verwenden, erfolgt ein synchrones Verhalten.

2. Verhält sich asynchron

1. Reagieren Sie auf synthetische Ereignisse

Direkt in React verwendete Ereignisse wie onChange, onClick usw. sind von React gekapselte Ereignisse. Sie sind synthetische Ereignisse und werden von React verwaltet. Aufgrund des Mechanismus zur Leistungsoptimierung erscheint der direkte Aufruf von setState im synthetischen Ereignis dann asynchron.

Im folgenden Code wird im synthetischen Ereignis onClick der Zähler im Status direkt um 1 erhöht und der Wert von Zähler anschließend ausgegeben. Dies führt dazu, dass beim ersten Klicken auf die Schaltfläche 0 statt der letzten 1 ausgegeben wird.

Zustand = {Anzahl: 0};
hinzufügen = () => {
    this.setState({ Anzahl: this.state.count + 1 });
    konsole.log(dieser.zustand.anzahl); // 0
};
rendern() {
    zurückkehren (
        <>
            <div>Aktueller Zähler: {this.state.count}</div>
            <button onClick={this.add}>hinzufügen</button>
        </>
    );
}

2. Lebenszyklusfunktionen

Die Lebenszyklusfunktion wird ebenfalls von React verwaltet. Der direkte Aufruf von setState in der Lebenszyklusfunktion verhält sich ebenfalls asynchron.

Im folgenden Code wird in der Lebenszyklusfunktion componentDidMount die Anzahl im Status um 1 erhöht und anschließend der Wert von count ausgegeben. Das Ergebnis ist 0 statt der letzten 1.

Zustand = {Anzahl: 0};
componentDidMount() {
    this.setState({ Anzahl: this.state.count + 1 });
    konsole.log(dieser.zustand.anzahl); // 0
}
rendern() {
    zurückkehren (
        <>
            <div>Aktueller Zähler: {this.state.count}</div>
            <button>Hinzufügen</button>
        </>
    );
}

3. Erscheint als Synchronisation

1. Einheimische Ereignisse

Der Ausführungsprozess von setState selbst ist synchron. Die Verwendung nativer Ereignisse und die Umgehung der Verwaltung von React führt zu einer synchronen Form.

Der folgende Code ruft das DOM-Element anhand der ID ab und bindet das Klickereignis mithilfe nativer Methoden. Im Klickereignis wird 1 zur Anzahl im Status addiert und dann der Wert der Anzahl gedruckt. Als Ergebnis wird der neueste Zählwert 1 gedruckt.

Zustand = {Anzahl: 0};
componentDidMount() {
    const btn = document.getElementById('btn');
    btn.onclick = () => {
        this.setState({ Anzahl: this.state.count + 1 });
        konsole.log(dieser.zustand.anzahl); // 1
    };
}
rendern() {
    zurückkehren (
        <>
            <div>Aktueller Zähler: {this.state.count}</div>
            <button id="btn">hinzufügen</button>
        </>
    );
}

2. setTimeout

Der folgende Code schreibt einen Timer setTimeout in die Lebenszyklusfunktion componentDidMount. Innerhalb von setTimeout wird der Zähler im Status um 1 erhöht und der Wert von count anschließend gedruckt. Als Ergebnis wird der letzte Zählerwert 1 gedruckt.

Obwohl setState auch in die componentDidMount-Funktion des Lebenszyklus geschrieben wird, wird es nicht direkt in componentDidMount geschrieben, sondern mit einer Ebene von setTimeout umschlossen. Auf diese Weise verhält sich setState synchron.

Zustand = {Anzahl: 0};
componentDidMount() {
    setzeTimeout(() => {
        this.setState({ Anzahl: this.state.count + 1 });
        konsole.log(dieser.zustand.anzahl); // 1
    }, 0);
}
rendern() {
    zurückkehren (
        <>
            <div>Aktueller Zähler: {this.state.count}</div>
            <button>Hinzufügen</button>
        </>
    );
}

4. Der zweite Parameter von setState

Unabhängig davon, ob setState in objektorientierter oder funktionalorientierter Form geschrieben ist, gibt es einen zweiten Parameter, der eine optionale Rückruffunktion ist. Diese Rückruffunktion wird erst aufgerufen, nachdem der Status aktualisiert und die Schnittstelle aktualisiert wurde (nachdem render aufgerufen wurde).

Wie im folgenden Code gezeigt, wird setState zwar direkt in componentDidMount aufgerufen, der Wert von count wird jedoch in der Rückruffunktion von setState gedruckt und der neueste Wert 1 abgerufen. Da die Rückruffunktion nach der Aktualisierung des Status aufgerufen wird, kann natürlich die neueste Anzahl abgerufen werden.

Zustand = {Anzahl: 0};
componentDidMount() {
    this.setState({ Anzahl: this.state.count + 1 }, () => {
        konsole.log(dieser.zustand.anzahl); // 1
    });
}
rendern() {
    zurückkehren (
        <>
            <div>Aktueller Zähler: {this.state.count}</div>
            <button>Hinzufügen</button>
        </>
    );
}

Dies ist das Ende dieses Artikels zum Verständnis des synchronen oder asynchronen Problems von setState in React. Weitere relevante Inhalte zum synchronen oder asynchronen setState in React 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!