如何有效管理React中元件間的通訊？

React 中的元件間通訊

在 React 中，跨多個元件維護狀態可能具有挑戰性。以下是如何促進相關組件之間的通訊：

場景＃1：過濾器作為列表的子級

將處理程序從父級（列表）傳遞給子級（過濾器）。當過濾器變更時，Filters 中的處理程序會呼叫父級的方法來更新狀態並觸發 List 中的重新渲染。

場景 #2：Filters 和 List 的公共父級

引入一個委託通信的父組件。父級將處理程序傳遞給過濾器，並在過濾器更改時更新過濾器和清單的狀態。

場景 #3：全域事件系統

對於沒有父子關係，考慮使用全域事件系統。定義事件名稱，例如“filterUpdated”，並在 Filters 和 List 元件中訂閱它。過濾器變更時，觸發事件，該事件將通知任何訂閱的元件相應地更新其狀態。

範例：

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

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