Wie verwaltet man die Kommunikation zwischen Komponenten in React effektiv?

Kommunikation zwischen Komponenten in React

In React kann die Aufrechterhaltung des Zustands über mehrere Komponenten hinweg eine Herausforderung sein. So erleichtern Sie die Kommunikation zwischen verwandten Komponenten:

Szenario Nr. 1: Filter als untergeordnetes Element der Liste

Übergeben Sie einen Handler vom übergeordneten Element (Liste) an das untergeordnete Element ( Filter). Wenn sich der Filter ändert, ruft der Handler in Filter die Methode des übergeordneten Elements auf, um den Status zu aktualisieren und ein erneutes Rendern in der Liste auszulösen.

Szenario Nr. 2: Gemeinsames übergeordnetes Element für Filter und Liste

Führen Sie eine übergeordnete Komponente ein, die die Kommunikation delegiert. Das übergeordnete Element übergibt einen Handler an Filter und aktualisiert den Status von Filter und Liste, wenn sich der Filter ändert.

Szenario Nr. 3: Globales Ereignissystem

Für Komponenten ohne a Wenn Sie eine Eltern-Kind-Beziehung benötigen, sollten Sie die Verwendung eines globalen Ereignissystems in Betracht ziehen. Definieren Sie einen Ereignisnamen, z. B. „filterUpdated“, und abonnieren Sie ihn sowohl in der Filter- als auch in der Listenkomponente. Lösen Sie bei Filteränderungen das Ereignis aus, das alle abonnierten Komponenten benachrichtigt, ihren Status entsprechend zu aktualisieren.

Beispiel:

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

Das obige ist der detaillierte Inhalt vonWie verwaltet man die Kommunikation zwischen Komponenten in React effektiv?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!