佩恩的技术栈

React消息订阅发布机制

前端开发2026-04-08阅读 14

消息订阅也就是实现 兄弟组件通信,而无需之前的模式要逐层通过父子模式传递。同时也摒弃了之前的props传递的模式。

工具库PubSubJS

下载npm install pubsub-js --saveyarn add pubsub-js

使用

在需要接收数据的组件里订阅消息,可以首先实现订阅消息,在来发布消息。

import Pubsub from 'pubsub-js'

componentDidMount(){
	// 订阅消息,token用来取消订阅
	var token = PubSub.subscribe('endpain',(_,data)=>{
	console.log(data)

  })
}

// 发布消息  消息名,数据
PubSub.publish('endpain',{name:'tome'})

取消订阅

要在组件的componentWillUnmount中取消订阅

PubSub.unsubscribe(token)
React消息订阅发布机制 · 佩恩的技术栈