Pourquoi « setState » de React semble-t-il asynchrone et comment puis-je m'assurer que l'état mis à jour est immédiatement reflété ?

Mises à jour d'état retardées 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 d'état se produisent immédiatement, setState 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.

Le cas en question : Delayed BoardAdd Modal Show Flag

Considérez le code suivant 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, elle définit l'indicateur boardAddModalShow sur true et imprime sa valeur sur la console. Cependant, la sortie de la console montre que la valeur reste fausse malgré l'appel setState.

Pourquoi ?

setState est asynchrone. Après son appel, l'interface utilisateur reste inchangée jusqu'à ce que React planifie un nouveau rendu. L'instruction console.log s'exécute avant le nouveau rendu, ce qui entraîne l'impression de la valeur d'état obsolète.

Solution : utilisation d'un rappel

Pour résoudre ce problème, nous pouvons utiliser une fonction de rappel comme argument pour setState. Le rappel est exécuté après la mise à jour de l'état et le nouveau rendu :

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 le nouveau valeur de boardAddModalShow comme true.

Pourquoi rendre setState asynchrone ?

Cette nature asynchrone de setState sert à améliorer les performances. Étant donné que les mises à jour d'état déclenchent de nouveaux rendus, les rendre synchrones pourrait entraîner une inactivité du navigateur. Le traitement par lots des appels setState améliore les performances en minimisant les rendus inutiles et en améliorant l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!