Pourquoi « setState » de React ne met-il pas à jour l'état instantanément ?

Asynchronie setState : pourquoi ne met-elle pas à jour instantanément l'état ?

Dans les applications React, la méthode setState déclenche une mise à jour asynchrone de l'état, ce qui entraîne à confusion si l'état mis à jour est attendu immédiatement. Comprendre ce comportement est crucial pour une gestion efficace de l'état.

Raison de l'asynchronie :

setState est asynchrone car il initie un processus de re-rendu qui peut être gourmand en ressources. Pour garantir une expérience utilisateur fluide, React regroupe ces mises à jour pour optimiser les performances. Ce comportement de traitement par lots empêche l'interface utilisateur de ne plus répondre lors de mises à jour d'état importantes.

Conséquence :

Lors de l'appel de setState, l'état n'est pas mis à jour instantanément. L'accès à this.state après un appel setState peut renvoyer la valeur d'état précédente jusqu'à ce que la mise à jour soit terminée. Ce comportement peut entraîner immédiatement des résultats inattendus dans le code qui repose sur l'état mis à jour.

Utilisation des méthodes de rappel :

Pour accéder à l'état mis à jour après un appel setState, React recommande en utilisant une fonction de rappel comme deuxième argument. Ce rappel ne sera exécuté qu'une fois la mise à jour de l'état entièrement traitée, garantissant l'accès à la dernière valeur de l'état.

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

Exemple :

Considérez le code suivant :

class NightlifeTypes extends React.Component {
  handleOnChange = (event) => {  // Arrow function binds `this`
    const value = event.target.checked;

    if (event.target.className === "barClubLounge") {
      this.setState({ barClubLounge: value });
      // Console log will still print the old state value here

      // Use a callback to log the updated state value
      this.setState({ barClubLounge: value }, () => {
        console.log(value);
        console.log(this.state.barClubLounge);
      });
    }
  };
  render() {
    return (
      <input
        className="barClubLounge"
        type="checkbox"
        onChange={this.handleOnChange}
        checked={this.state.barClubLounge}
      />
    );
  }
}

ReactDOM.render(<NightlifeTypes />, document.getElementById("app"));

Dans cet exemple, les journaux de la console dans la méthode handleOnChange démontreront la différence entre accéder à l'état immédiatement après setState et utiliser un rappel. Le rappel garantit que la console imprime correctement la valeur d'état mise à jour.

Comprendre la nature asynchrone de setState est essentiel pour gérer efficacement l'état dans les applications React. En tirant parti des méthodes de rappel, vous pouvez éviter tout comportement inattendu et garantir un accès approprié aux dernières valeurs d'état.

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!