React兄弟组件通信:消息订阅-发布机制

在React中,父子组件通信使用props即可实现,而且这是相对方便的。兄弟组件通信虽然也可以使用props通信,但是就麻烦一点,需要多次传
递,因此我们学习消息订阅与发布机制来实现兄弟组件的通信。

所谓消息订阅-发布机制可以使用生活中的例子来理解:

比如:小时候我们经常可以看到有邮递员开着小摩托送报纸,那为什么邮递员会给你送报纸呢?这就需要你去订阅报纸,比如说你要订阅“南方日报”,这就相当于消息订阅,那么每天当有新的“南方日报”的报纸,那么邮递员就会送达你的住处,而邮递员给你送报纸就相当于发布。

下面开始学习在React中如何实现订阅-发布:

订阅-发布机制我们使用现在比较常用的库:pubsub-js 官方学习地址.

使用示例:

1.项目安装:

yarn add pubsub-js

2.在需要用到消息订阅-发布机制的组件引入该库:

import PubSub from 'pubsub-js'

3.订阅消息

正如上面所说的订阅报纸、发布报纸。用户想看报纸就需要先去订阅报纸,然后才有邮递员每天给你送报纸。那么在兄弟组件中通信也是如此,哪个组件想要接收什么消息,那就先得订阅该消息。那么订阅消息的最好时机是什么时候呢?组件完成挂载时:即在componentDidMount生命周期函数中开始订阅消息,这就确保了不会错过什么消息。

componentDidMount(){
    
    
	let mySub = PubSub.subscribe("subscribeName",(msg,data)=>{
    
    
		console.log(msg,data)
	})
}

subscribe()第一个参数是“订阅消息的名称”,对应信息发布的名称,即用户要订阅的报纸是"南方日报",第二个参数是接收到消息后的回调函数。

回调函数参数:

  • msg:这是信息的名称,即subscribe()的第一个参数。感觉这个参数是多此一举。
  • data:这是此次订阅到的消息,即南方日报收到了。
  • 返回值:返回该订阅的id,类似于setInterval()返回的id,用于在组件销毁时取消订阅,这就可以优化了性能。

4.发布消息

既然有人订阅了消息,那么就会有人在适当的时期发布消息。

PubSub.publish("对应于订阅的名称",{
    
    '鸭绒',age:20})

猜你喜欢

转载自blog.csdn.net/weixin_43334673/article/details/113679656