ReactJS 组件如何有效地相互通信？

ReactJS 中的组件如何相互交互？

在 ReactJS 中构建应用程序时，经常会遇到需要多个组件的场景交互和传达数据或事件。这可能会导致如何最好地促进这些交互的问题。

组件通信方法

方法的选择取决于组件的关系和层次结构：

• 场景 1：过滤器 -> 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中文网其他相关文章！