17. React消息订阅与发布 pubsub-js

1.React脚手架引入pubsub-js

yarn add pubsub-js

2. pubsub-js的使用

2.1 消息的订阅方和消息的发布方

• 消息发布方
  定义消息名，和要发布的消息数据

• 消息订阅方
  接受消息名，和消息数据

2.2 pubsub-js代码实现

2.2.1 发布消息(发布方)

• 代码格式如下：
  PubSub.publish(消息名,消息数据)

import PubSub from "pubsub-js"

//在需要传递数据给其他组件的js方法中发布消息
pubsub_func(){
	PubSub.publish(“message_name”,{name:"zhangsan",age:18,id:1212})
}

2.2.2 订阅消息(订阅方)

• 代码格式如下：
  PubSub.subscribe(消息名,(_,消息数据)=>{}) 形参
• 订阅消息应该放在组件已经挂载页面的周期函数中componentDIdMount(){}
• 把通过消息订阅获取的数据放入state中

import PubSub from "pubsub-js"

//接收消息的组件方
componentDidMount(){
	this.token = PubSub.subscribe("message_name",(msg,msg_obj)=>{
		this.setState(msg_obj)
	})
}

2.2.3 取消订阅(订阅方)

• 在组件即将被卸载的时候，取消订阅

componentWillUnmount(){
	//组件即将被卸载
	PubSub.unsubscribe(this.token)
}