组件通信之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('主题','内容'）

取消订阅

一般在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.statereturn(<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)}>)}
}