verzögerte Statusaktualisierungen in React: Asynchronous setState

Wenn Sie mit React -Komponenten arbeiten, ist es entscheidend, die Natur der SetState -Methode zu verstehen. Im Gegensatz zu imperativen Programmierungen, bei denen staatliche Updates sofort auftreten, ist Reacts SetState asynchron. Dies bedeutet, dass die Aktualisierung des Staates keine sofortige Reflexion im internen Zustand der Komponente garantiert. Snippet, das eine Boardadd -Komponente in React implementiert:

Class BoardAdd erweitert React.comPonent { Konstruktor (Requisiten) { Super (Requisiten); this.state = { BoardAddModalshow: Falsch }; this.openaddboardmodal = this.openaddboardModal.bind (this); } openaddboardmodal () { this.setState ({boardAddModalshow: true}); console.log (this.state.boardaddmodalshow); } } Wenn die OpenAddboardModal -Methode aufgerufen wird, wird das BoardAddModalshow -Flag auf True festgelegt und druckt ihren Wert für die Konsole. Die Konsolenausgabe zeigt jedoch, dass der Wert trotz des SetState -Anrufs falsch bleibt.

Warum?

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);
    }
}

setState ist asynchron. Nachdem es aufgerufen wurde, bleibt die Benutzeroberfläche unberührt, bis React einen Neurender plant. Die Anweisung console.log wird vor dem Eintritt des Re-Renders ausgeführt, was dazu führt, dass der veraltete Zustandswert gedruckt wird.

Lösung: Verwenden eines Callback

, um dieses Problem zu beheben, Wir können eine Rückruffunktion als Argument zum SetState verwenden. Der Rückruf wird ausgeführt, nachdem der Staat aktualisiert wurde und der Neurender aufgetreten ist:

openAddboardModal () { this.setState ({boardAddModalshow: true}, function () { console.log (this.state.boardaddmodalshow); }); } In diesem Fall wird die Anweisung console.log ausgeführt, nachdem der Staat aktualisiert wurde, wodurch der neue Wert von BoardAddModalshow als wahr angezeigt wird.

Diese asynchrone Natur von SetState dient einem Leistungserhalt. Da staatliche Updates erneut zu Rendern führen und sie synchron machen können, kann es zu einer Nichtresponsivität von Browser führen. Batching-SetState-Anrufe verbessert die Leistung, indem unnötige Wiederholer minimiert und die Benutzererfahrung verbessert werden.