react没有嵌套关系的组件之间通信方法详解

最新推荐文章于 2025-07-03 11:43:17 发布

原创

最新推荐文章于 2025-07-03 11:43:17 发布 · 5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#事件发布订阅模式 #自定义事件机制 #react非嵌套组件之间通信 #events

本文详细介绍了React中没有嵌套关系的组件如何通信，主要聚焦于事件发布订阅模式。通过实例说明了如何使用事件监听、触发和删除，以及在组件中引入events包实现这一机制。组件1负责订阅，组件2负责发布，以此实现数据交换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、在react中，没有嵌套关系的组件之间的通信方式主要有2种：

a、拥有共同父组件的兄弟组件之间可以使用context。

具体使用方法可以参考：https://www.jianshu.com/p/a8717edadb18

b、非兄弟组件之间利用事件的发布订阅模式。

1）事件的发布订阅模式是什么？首先需要一个发布者，和一个或多个订阅者。假如我家有一个水果店，张三来我家买苹果，正好我家苹果卖完了，我就告诉他一个电话号码，让他回去等电话，苹果一到货，我就通知他（但是他可以选择再去买或者不去买，只是我一定会通知他），同样李四也是同样的需求，我给出了同样的解决方案，以此类推。。。等苹果到货了，我会按照先后顺序挨个给所有的预订者打电话通知。在这个事件当中，张三和李四就是订阅者，而我就是发布者，我打电话通知他们的动作就是发布者对订阅事件的处理函数。所以在react组件之间的通信场景里，只要组件1负责订阅（监听事件），组件2负责发布（触发事件）就可以进行数据交流。

2）如何实现？核心代码如下：

//组件1（负责订阅事件和取消订阅事件）

import emitter from './events';

componentDidMount () { //在组件挂载完成后声明一个自定义事件
	emitter.addListener('callMe', (msg) => {
		this.setState({
			msg: msg
		})
	})
}}

componentWillUnmount () { //组件销毁前移除事件监听
	emitter.removeListener('callMe', (msg) => {