pubsub.publish触发一次pubsub.subscribe调用多次解决

   日期:2020-07-09     浏览:261    评论:0    
核心提示:发布订阅模式发布订阅模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象。这个主题对象在自身状态变化时,会通知所有订阅者对象,使它们能够自动更新自己的状态。有时候,你想监听一种状态,当在某种情况下,触发它,然后做一些相应的事,有点儿类似我们的自定义事件。订阅发布,也是解决这一类问题的利器。我一般用到发布订阅者模式的时候,是在比如,父子传值,兄弟传值没办法满足我的需求,我需要在这个页面操作,要改变另一个不相关的页面里面的数据,这时候就用到发布订阅模式。用法pubsub-jspubl

发布订阅模式

发布订阅模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象。这个主题对象在自身状态变化时,会通知所有订阅者对象,使它们能够自动更新自己的状态。有时候,你想监听一种状态,当在某种情况下,触发它,然后做一些相应的事,有点儿类似我们的自定义事件。订阅发布,也是解决这一类问题的利器。
我一般用到发布订阅者模式的时候,是在比如,父子传值,兄弟传值没办法满足我的需求,我需要在这个页面操作,要改变另一个不相关的页面里面的数据,这时候就用到发布订阅模式。

用法

pubsub-js
publish:发布
subscribe:订阅
1、下载,要依赖于pubsub-js模块
    cnpm install pubsub-js --save
2import pubSub from "pubsub-js"
使用:发布
    pubSub.publish("消息名称",“消息的内容”);
订阅者:订阅
    pubSub.subscribe("消息名称"function(name,context){})
例子:
one组件中
<input type="button" value={"发布订阅者模式"} onClick={this.sendMsg}/>
sendMsg(){
    pubSub.publish("haha","我是发布消息的内容","hkhj")
    pubSub.publish("two","我是第二个发布者")
}
componentDidMount(){
    pubSub.subscribe("two",(name,context)=>{
        console.log("asfa",context)
    })
    pubSub.unsubscribe("two");//取消订阅者接收two的消息
}
two组件中
componentWillMount(){
    //发布-订阅者的模式是一对多的模式,一个发布者,多个订阅者可以接收,一个订阅者,接收一个发布者
    //订阅者,pubSub.subscribe第一个参数是消息名称要和发布消息名称一致才可以接受,第二个是接受参数时候收到的回调函数,接受数据时候回触发
    //函数的第一个参数是消息名称,第二个是消息内容,没有第三个参数,第三参数是undefined,相传多个参数用对象在第二个参数传
    pubSub.subscribe("haha",(name,context,aaa)=>{
        console.log("订阅者",name,context,aaa);
    })
}

pubsub多次调用解决

publish("消息名称",“消息的内容”);
//发布一个自定义的事件

subscribe(eventName, callback);
//接收一个自定义的事件,在接收的时候eventName要和发布的名称保持一致才能接收到。

unsubscribe(eventName, callback);
//解除一个自定义的事件

subscribeOne(eventName, callback);
//发布一个只触发一次的自定义事件

notify(eventName, callback);
//触发已经发布的自定义事件

上面是关于pubsub的API,我们需要在我们每次接受数据pubsub.subscribe的时候,先执行pubsub.unsubscribe操作就好了,就完美解决了,这样你接收以后的callback只执行一次。

pubsub.unsubscribe('aa');
pubSub.subscribe("aa",(name,context,aaa)=>{
        console.log("订阅者",name,context,aaa);
    })
 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服