如何有效管理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中文网其他相关文章！