Comment les composants ReactJS communiquent-ils efficacement entre eux ?

Comment les composants de ReactJS peuvent-ils interagir les uns avec les autres ?

Lors de la création d'applications dans ReactJS, il est courant de rencontrer des scénarios dans lesquels vous avez besoin de plusieurs composants pour interagir et communiquer des données ou des événements. Cela peut conduire à la question de savoir comment faciliter au mieux ces interactions.

Approches pour la communication entre les composants

Le choix de l'approche dépend de la relation et de la hiérarchie de vos composants :

• Scénario 1 : Filtres -> List

  Dans ce scénario, le composant Filters est un enfant du composant List. Le composant List peut transmettre une fonction de gestionnaire au composant Filters. Lorsque l'entrée du filtre change, le gestionnaire peut être invoqué pour mettre à jour l'état de la liste avec la nouvelle valeur du filtre.

• Scénario 2 : Parent -> Filtres et liste

  Lorsque les filtres et la liste sont les enfants d'un parent commun, le parent peut gérer la communication. Il peut conserver l'état du filtre et transmettre la dernière valeur aux filtres et à la liste.

• Scénario 3 : composants indépendants

  Pour les composants qui n'ayant pas de relation parent-enfant, React recommande d'utiliser un système d'événements global. Ceci peut être réalisé en utilisant la méthode ComponentDidMount() pour ajouter des écouteurs d'événements et ComponentWillUnmount() pour les supprimer.

Exemples de code

Scénario 1 (Filtres -> Liste)

// Filters.js
handleChange = () => {
  const value = this.input.value;
  this.props.updateFilter(value);
};

// List.js
handleFilterChange = (value) => this.setState({ filter: value });
<Filters onChange={this.handleFilterChange} />

Scénario 2 (Parent -> Filtres et liste)

// Parent.js
filterChange = (value) => this.setState({ filter: value });

// Filters.js
render() {
  const { filter, updateFilter } = this.props;
  return <input value={filter} onChange={updateFilter} />;
}

// List.js
render() {
  const { filter, items } = this.props;
  return <ul>{items.filter(item => item.includes(filter)).map(...)}</ul>;
}

Scénario 3 (Système d'événements global)

// GlobalEventEmitter.js
events = {};
on = (event, cb) => events[event] ? events[event].push(cb) : events[event] = [cb];
emit = (event, ...args) => events[event] ? events[event].forEach(cb => cb(...args)) : null;

// ComponentA.js
emit("customEvent", { ... });
componentDidMount() {
  on("customEvent", (payload) => this.setState({ ...payload }));
}

// ComponentB.js
emit("customEvent", { ... });
componentDidMount() {
  on("customEvent", (payload) => this.setState({ ...payload }));
}

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!