组件通信之pubsub

pubsub

释：消息订阅与发布
点击进入gitee

消息订阅与发布机制

1,先订阅,在发布
2,使用于任意组件间通信
3,要在组件的componentWillUnmount中取消订阅

作用

使用于任意组件间通信

安装

yarn add pubsub-js

引入(每个组件使用时都需要)

使用es6引入：import PubSub from 'pubsub-js;
使用CommonJS：const PubSub = require('pubsub-js');

语法

发布

//异步发布主题
PubSub.publish('主题','内容'）
//同步发布主题，这在某些环境中更快
//但是当一个主题在相同的执行链,小心使用
PubSub.publishSync('主题','内容'）

订阅

// token:保留返回的令牌，以便能够取消订阅
token = PubSub.subscribe('主题',(titleName,data)=>{
	//titleName 主题名称
	//data 返还的数据
})

取消订阅

一般在componentWillUnmount中取消订阅

//取消单个订阅,放入令牌即可
PubSub.unsubscribe(token);
//取消函数的所有订阅（这里说的函数就是PubSub.subscribe的第二个参数——回调函数）
PubSub.unsubscribe(fnName);
//清除所有订阅
PubSub.clearAllSubscriptions();

react做的一个小例子

场景：组件a和组件b之间的通信，兄弟关系

//组件a
class A extends Component{
	state = {
		obj:{},
	}
	componentDidMount() {
		//订阅
		this.token = PubSub.subscribe('TEXT', (msg, data) => {
		  this.setState({obj:data})
		});
	}
	componentWillUnmount(){
		//取消订阅
		PubSub.unsubscribe(this.token)
	}
	
	render(){
		let {obj:{text}}=this.state
		return(
			<div>{`这里时接收到的内容——————`${text}}</div>
		)
	}
}

//组件b
class B extends Component{
	state={
		obj:{
			text:''
		}
	}

	onSettext(e){
		let value = e.target.value;
	    let { obj } = this.state;
	    obj.text = value;
	    this.setState({ obj })
	    // 发送
	    PubSub.publish('TEXT', this.state.obj);
	}
	render(){
		return(
			<input type="text" onChange={(e)=>{this.onSettext(e)}>
		)
	}
}