Pourquoi « setState » ne met-il pas immédiatement à jour l'état du composant React ?

Pourquoi l'appel de la méthode setState ne mute-t-il pas immédiatement l'état ?

Dans React, la méthode setState est une fonction asynchrone utilisée pour définir l'état du composant. Cela signifie que l'état n'est pas mis à jour immédiatement après l'appel de setState. En effet, setState déclenche un nouveau rendu du composant, ce qui peut être une opération coûteuse. Pour éviter que le navigateur ne réponde, les appels setState sont regroupés et exécutés ultérieurement.

Nature asynchrone de setState

Selon la documentation React : "setState() ne mute pas immédiatement this.state, mais crée une transition d'état en attente. Ainsi, accéder à this.state après avoir appelé setState peut toujours renvoyer la valeur existante.

Appels setState par lots

Pour l'optimisation des performances, plusieurs appels setState peuvent être regroupés et exécutés en un seul rendu. . Cela évite les nouveaux rendus inutiles et améliore la réactivité de l'interface utilisateur.

Utilisation d'un rappel

Pour accéder à la valeur d'état mise à jour après setState, vous pouvez utiliser une fonction de rappel comme deuxième argument. Ce rappel sera exécuté après la mise à jour de l'état :

setState({ key: value }, () => {
    console.log('updated state value', this.state.key)
});

Exemple

Considérons l'exemple suivant :

class NightlifeTypes extends React.Component {
   handleOnChange = (event) => {
      let value = event.target.checked;

      if(event.target.className == "barClubLounge") {
         this.setState({ barClubLounge: value}, () => { 
             console.log(value);
             console.log(this.state.barClubLounge);
             //both will print same value
         });        
      }
   }
}

Dans cet exemple, la fonction handleOnChange définit la propriété d'état barClubLounge à l'argument valeur. La fonction de rappel dans l'appel setState garantit que les journaux de la console afficheront la valeur d'état mise à jour.

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!