pubsub
释:消息订阅与发布
消息订阅与发布机制
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)}> ) } }