Wie kommunizieren ReactJS-Komponenten effektiv miteinander?

Wie können Komponenten in ReactJS miteinander interagieren?

Beim Erstellen von Anwendungen in ReactJS kommt es häufig vor, dass Sie auf Szenarien stoßen, in denen Sie mehrere Komponenten benötigen um Daten oder Ereignisse zu interagieren und zu kommunizieren. Dies kann zu der Frage führen, wie diese Interaktionen am besten erleichtert werden können.

Ansätze für die Komponentenkommunikation

Die Wahl des Ansatzes hängt von der Beziehung und Hierarchie Ihrer Komponenten ab:

• Szenario 1: Filter -> Liste

  In diesem Szenario ist die Filterkomponente ein untergeordnetes Element der Listenkomponente. Die List-Komponente kann eine Handlerfunktion an die Filters-Komponente übergeben. Wenn sich die Filtereingabe ändert, kann der Handler aufgerufen werden, um den Status der Liste mit dem neuen Filterwert zu aktualisieren.

• Szenario 2: Übergeordnet -> Filter und Liste

  Wenn sowohl Filter als auch Liste untergeordnete Elemente eines gemeinsamen übergeordneten Elements sind, kann das übergeordnete Element die Kommunikation übernehmen. Es kann den Status des Filters beibehalten und den neuesten Wert sowohl an Filter als auch an die Liste übergeben.

• Szenario 3: Unabhängige Komponenten

  Für Komponenten, die Da keine Eltern-Kind-Beziehung besteht, empfiehlt React die Verwendung eines globalen Ereignissystems. Dies kann erreicht werden, indem die Methode „componentDidMount()“ zum Hinzufügen von Ereignis-Listenern und „componentWillUnmount()“ zum Entfernen dieser verwendet wird.

Codebeispiele

Szenario 1 (Filter -> 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} />

Szenario 2 (Übergeordnet -> Filter & 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>;
}

Szenario 3 (Globales Ereignissystem)

// 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 }));
}

Das obige ist der detaillierte Inhalt vonWie kommunizieren ReactJS-Komponenten effektiv miteinander?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!