Bagaimanakah Komponen ReactJS Berkomunikasi Secara Berkesan Antara Satu Sama Lain?

Bagaimanakah komponen dalam ReactJS boleh berinteraksi antara satu sama lain?

Apabila membina aplikasi dalam ReactJS, adalah perkara biasa untuk menghadapi senario di mana anda memerlukan berbilang komponen untuk berinteraksi dan menyampaikan data atau peristiwa. Ini boleh membawa kepada persoalan tentang cara terbaik untuk memudahkan interaksi ini.

Pendekatan untuk Komunikasi Komponen

Pilihan pendekatan bergantung pada hubungan dan hierarki komponen anda:

• Senario 1: Penapis -> Senarai

  Dalam senario ini, komponen Penapis ialah anak kepada komponen Senarai. Komponen Senarai boleh menghantar fungsi pengendali kepada komponen Penapis. Apabila input penapis berubah, pengendali boleh dipanggil untuk mengemas kini keadaan Senarai dengan nilai penapis baharu.

• Senario 2: Ibu Bapa -> Penapis & Senarai

  Apabila kedua-dua Penapis dan Senarai adalah anak kepada ibu bapa yang sama, ibu bapa boleh mengendalikan komunikasi. Ia boleh mengekalkan keadaan penapis dan menghantar nilai terkini kepada Penapis dan Senarai.

• Senario 3: Komponen Bebas

  Untuk komponen yang kekurangan hubungan ibu bapa-anak, React mengesyorkan menggunakan sistem acara global. Ini boleh dicapai menggunakan kaedah componentDidMount() untuk menambah pendengar acara dan componentWillUnmount() untuk mengalih keluarnya.

Contoh Kod

Senario 1 (Penapis -> Senarai)

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

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

Senario 2 (Induk -> Penapis & Senarai)

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

Senario 3 (Sistem Acara 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 }));
}

Atas ialah kandungan terperinci Bagaimanakah Komponen ReactJS Berkomunikasi Secara Berkesan Antara Satu Sama Lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!