ReactJS 元件如何有效地相互通訊？

ReactJS 中的元件如何相互互動？

在 ReactJS 中建立應用程式時，經常會遇到需要多個元件的場景互動和傳達資料或事件。這可能會導致如何最好地促進這些互動的問題。

組件通訊方法

方法的選擇取決於組件的關係和層次結構：

• 場景1111 ：過濾器-> List

  在此場景中，Filters元件是 List 元件的子元件。 List 元件可以將處理函數傳遞給 Filters 元件。當過濾器輸入變更時，可以呼叫處理程序以使用新的過濾器值更新清單的狀態。

• 場景2：父級->過濾器和列表

  當過濾器和列表都是共同父級的子級時，父級可以處理通信。它可以維護過濾器的狀態並將最新值傳遞給過濾器和清單。

• 場景 3：獨立元件

  對於下列元件：由於缺乏父子關係，React 建議使用全域事件系統。這可以透過使用 componentDidMount() 方法新增事件監聽器和使用 componentWillUnmount() 方法刪除事件監聽器來實現。

程式碼範例

場景1（濾網-> 清單）

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

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

場景2（父級->過濾器和列表）

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

場景3（全域事件系統）

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

以上是ReactJS 元件如何有效地相互通訊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！