Pourquoi `setState()` ne met-il pas immédiatement à jour l'état du composant de React ?

Gestion de l'état dans React : Comprendre la nature asynchrone de setState()

Dans React, la méthode setState() est utilisée pour mettre à jour l'état d'un composant. Cependant, une idée fausse courante est que setState() modifie immédiatement l’état. Ce n'est pas le cas.

Comprendre la nature asynchrone de setState()

La documentation de React indique clairement : "setState() ne mute pas immédiatement this.state mais crée une transition d'état en attente." Cela signifie qu'après avoir appelé setState(), l'accès à this.state peut toujours renvoyer la valeur existante. React autorise ce comportement pour l'optimisation des performances, car il peut regrouper plusieurs appels setState() pour plus d'efficacité.

Observation du comportement asynchrone

Considérez l'extrait de code suivant de la section Formulaires de la documentation de React :

handleChange: function(event) {
    console.log(this.state.value);
    this.setState({value: event.target.value});
    console.log(this.state.value);
},

Si vous mettez à jour la valeur d'entrée dans le navigateur, vous remarquerez que les deux instructions console.log génèrent la même valeur. Ce comportement démontre la nature asynchrone de setState(). Le premier console.log affiche la valeur de l'état initial, tandis que le second affiche toujours la même valeur, même si nous l'avons mis à jour à l'aide de setState().

Exécuter le code après un changement d'état

Si vous en avez besoin pour exécuter du code après le changement d'état, React propose une solution :

this.setState({value: event.target.value}, function() {
    console.log(this.state.value);
});

Dans ce cas, le rappel passé à setState() sera exécuté une fois la mise à jour de l'état terminée. terminé, en veillant à ce que console.log imprime 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!