Mises à jour de l'état retardé dans React: Comprendre le setState asynchrone

Lorsque vous travaillez avec des composants React, il est crucial de comprendre la nature de la méthode Setstate. Contrairement à la programmation impérative, où les mises à jour de l'État se produisent immédiatement, le state de React est asynchrone. Cela signifie que la mise à jour de l'état ne garantit pas une réflexion immédiate dans l'état interne du composant.

L'affaire en question: considérer le modal show flage

Extrait qui implémente un composant BoardAdd dans React:

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

Lorsque la méthode OpenAddboardModal est invoquée, il définit l'indicateur BoardAddDmodalShow à True et imprime sa valeur à la console. Cependant, la sortie de la console montre que la valeur reste fausse malgré l'appel setState.

Pourquoi?

setState est asynchrone. Une fois qu'il s'appelle, l'interface utilisateur n'est pas affectée jusqu'à ce que React planifie une renforcement. L'instruction Console.log s'exécute avant que le rendement ne se produise, ce qui résulte de l'impression de la valeur d'état obsolète. Nous pouvons utiliser une fonction de rappel comme un argument pour SetState. Le rappel est exécuté après la mise à jour de l'état et que le rendement s'est produit:

openaddboardModal () { this.setState ({BoardAddModalShow: true}, function () { console.log (this.state.boardAddModalShow); }); } Dans ce cas, l'instruction Console.log sera exécutée après la mise à jour de l'état, affichant correctement la nouvelle valeur de BoardAdddmodalShow comme vrai.

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

Cette nature asynchrone de SetState sert un objectif améliorant les performances. Étant donné que les mises à jour de l'État déclenchent des redevances, les rendre synchrones pourrait conduire à la non-respect du navigateur. Les appels SetState par lots améliorent les performances en minimisant les rediffrents inutiles et en améliorant l'expérience utilisateur.