Comment gérer efficacement la communication inter-composants dans React ?

Communication inter-composants dans React

Dans React, maintenir l'état de plusieurs composants peut être difficile. Voici comment faciliter la communication entre les composants associés :

Scénario n°1 : Filtres en tant qu'enfant de la liste

Passer un gestionnaire du parent (Liste) à l'enfant ( Filtres). Lorsque le filtre change, le gestionnaire dans Filters appelle la méthode du parent pour mettre à jour l'état et déclencher un nouveau rendu dans List.

Scénario n°2 : parent commun pour les filtres et la liste

Introduire un composant parent qui délègue la communication. Le parent transmet un gestionnaire aux filtres et met à jour l'état des filtres et de la liste lorsque le filtre change.

Scénario n°3 : système d'événements global

Pour les composants sans relation parent-enfant, envisagez d'utiliser un système d'événements global. Définissez un nom d'événement, tel que « filterUpdated », et abonnez-vous à celui-ci dans les composants Filtres et Liste. Lors des changements de filtre, déclenchez l'événement, qui informera tous les composants abonnés de mettre à jour leur état en conséquence.

Exemple :

// Global events file
export const myEmitter = new EventEmitter();

// Filters component
componentDidMount() {
  myEmitter.on('filterUpdated', this.handleFilterUpdate);
}

handleFilterChange() {
  // Emit event and pass new filter value
  myEmitter.emit('filterUpdated', newFilterValue);
}

// List component
componentDidMount() {
  myEmitter.on('filterUpdated', this.handleFilterUpdate);
}

handleFilterUpdate(newFilterValue) {
  // Update state
  this.setState({ filterValue: newFilterValue });
}

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!