Bagaimana Mengurus Komunikasi Antara Komponen dalam React dengan Berkesan?

Komunikasi Antara Komponen dalam React

Dalam React, mengekalkan keadaan merentas berbilang komponen boleh menjadi mencabar. Begini cara untuk memudahkan komunikasi antara komponen yang berkaitan:

Senario #1: Penapis sebagai Anak Senarai

Lepaskan pengendali daripada ibu bapa (Senarai) kepada anak ( Penapis). Apabila penapis berubah, pengendali dalam Penapis memanggil kaedah induk untuk mengemas kini keadaan dan mencetuskan pemaparan semula dalam Senarai.

Senario #2: Induk Biasa untuk Penapis dan Senarai

Perkenalkan komponen induk yang mewakilkan komunikasi. Ibu bapa menghantar pengendali kepada Penapis dan mengemas kini keadaan kedua-dua Penapis dan Senarai apabila penapis berubah.

Senario #3: Sistem Acara Global

Untuk komponen tanpa hubungan ibu bapa-anak, pertimbangkan untuk menggunakan sistem acara global. Tentukan nama acara, seperti 'filterUpdated' dan langgannya dalam kedua-dua komponen Penapis dan Senarai. Pada perubahan penapis, cetuskan acara, yang akan memberitahu mana-mana komponen yang dilanggan untuk mengemas kini keadaannya dengan sewajarnya.

Contoh:

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

Atas ialah kandungan terperinci Bagaimana Mengurus Komunikasi Antara Komponen dalam React dengan Berkesan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!