Warum erscheint „setState' von React asynchron und wie kann ich sicherstellen, dass der aktualisierte Status sofort wiedergegeben wird?

Verzögerte Statusaktualisierungen in React: Asynchrones setState verstehen

Bei der Arbeit mit React-Komponenten ist es wichtig, die Natur der setState-Methode zu verstehen. Im Gegensatz zur imperativen Programmierung, bei der Zustandsaktualisierungen sofort erfolgen, ist setState von React asynchron. Dies bedeutet, dass die Aktualisierung des Zustands keine sofortige Widerspiegelung im internen Zustand der Komponente garantiert.

Der fragliche Fall: Delayed BoardAdd Modal Show Flag

Bedenken Sie den folgenden Code Snippet, das eine BoardAdd-Komponente in React implementiert:

class BoardAdd extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            boardAddModalShow: false
        };
        this.openAddBoardModal = this.openAddBoardModal.bind(this);
    }

    openAddBoardModal() {
        this.setState({ boardAddModalShow: true });
        console.log(this.state.boardAddModalShow);
    }
}

Wenn die openAddBoardModal-Methode aufgerufen wird, wird sie Setzt das Flag „boardAddModalShow“ auf „true“ und gibt seinen Wert auf der Konsole aus. Die Konsolenausgabe zeigt jedoch, dass der Wert trotz des setState-Aufrufs falsch bleibt.

Warum?

setState ist asynchron. Nach dem Aufruf bleibt die Benutzeroberfläche unberührt, bis React ein erneutes Rendern plant. Die console.log-Anweisung wird ausgeführt, bevor das erneute Rendern erfolgt, was dazu führt, dass der veraltete Statuswert gedruckt wird.

Lösung: Verwenden eines Rückrufs

Um dieses Problem zu beheben, Wir können eine Callback-Funktion als Argument für setState verwenden. Der Rückruf wird ausgeführt, nachdem der Status aktualisiert wurde und das erneute Rendern erfolgt ist:

openAddBoardModal() {
    this.setState({ boardAddModalShow: true }, function () {
        console.log(this.state.boardAddModalShow);
    });
}

In diesem Fall wird die console.log-Anweisung ausgeführt, nachdem der Status aktualisiert wurde, und zeigt den neuen korrekt an Wert von boardAddModalShow als wahr.

Warum setState asynchron machen?

Diese asynchrone Natur von setState dient einem leistungssteigernden Zweck. Da Zustandsaktualisierungen ein erneutes Rendern auslösen, kann die Synchronisierung dazu führen, dass der Browser nicht mehr reagiert. Das Stapeln von setState-Aufrufen verbessert die Leistung, indem es unnötige erneute Renderings minimiert und die Benutzererfahrung verbessert.

Das obige ist der detaillierte Inhalt vonWarum erscheint „setState' von React asynchron und wie kann ich sicherstellen, dass der aktualisierte Status sofort wiedergegeben wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!