pubsub-js 实现RN组件间通信
来源:互联网 发布:剑三冷艳花姐捏脸数据 编辑:程序博客网 时间:2024/06/12 21:05
1.简介:
这是一个能够在不同组件间传递消息的库,类似android开发中的EvenBus。它支持同步和异步方式发布消息。它被设计为在单进程中使用,在多进程中时不建议使用它。
2.使用方式:
1>安装:npm install pubsub-js
2>引入:import {PubSub} from “pubsub-js”;
3>在需要的组件中订阅和取消订阅:
componentDidMount(){ //下面这行代码订阅事件 token = PubSub.subscribe("DATA", changeData);}componentWillUnmount(){ //取消订阅,一定要记住取消订阅,不然可能会异常 PubSub.unsubscribe(token);}//上面为取消订阅特定的订阅者,另外可取消订阅一个函数的所有订阅者//PubSub.unsubscribe(changeData);//取消某种事件的订阅者//PubSub.subscribe('a', myFunc1);//PubSub.subscribe('a.b', myFunc2);//PubSub.subscribe('a.b.c', myFunc3);//PubSub.unsubscribe('a.b');//'a.b' and 'a.b.c' 的事件将不再传播// 'a'的事件将得到传播//取消所有的订阅者//PubSub.clearAllSubscriptions();
4>发送事件:
//发送一个异步消息PubSub.publish("firstevent");//发送一个同步消息PubSub.publishSync("firstevent");
3.分层寻址:
var myToplevelSubscriber = function( msg, data ){ console.log( 'top level: ', msg, data );}// 订阅myToplevelSubscriber接收所有'car'层事件PubSub.subscribe( 'car', myToplevelSubscriber );var mySpecificSubscriber = function( msg, data ){ console.log('specific: ', msg, data );}// 订阅mySpecificSubscriber只接受'car.drive'事件PubSub.subscribe( 'car.drive', mySpecificSubscriber );// 发布以下事件PubSub.publish( 'car.purchase', { name : 'my new car' } );PubSub.publish( 'car.drive', { speed : '14' } );PubSub.publish( 'car.sell', { newOwner : 'someone else' } );// 在上面脚本中, myToplevelSubscriber 接受所有的事件,共接受三次// mySpecificSubscriber 只接受一次事件,这次事件为'car.drive'
4.事件名的管理
事件名要统一管理。
// 坏的方式PubSub.subscribe("hello", function( msg, data ){ console.log( data )});PubSub.publish("helo", "world");// 好的方式var MY_TOPIC = "hello";PubSub.subscribe(MY_TOPIC, function( msg, data ){ console.log( data )});PubSub.publish(MY_TOPIC, "world");
官方文档:https://github.com/mroderick/PubSubJS
虽然上面文档已经很详细,但也可参照:http://www.jianshu.com/p/9b0d5a3d0518
阅读全文
0 0
- pubsub-js 实现RN组件间通信
- 《React-Native系列》30、 RN组件间通信
- 《React-Native系列》30、 RN组件间通信
- RN之React组件通信(五)
- 通过事件通知 实现react.js组件间通信
- PubSub模式简单实现
- PubSub
- tigase的pubsub组件的使用
- RN自定义倒计时组件
- RN组件 - Image图片
- rn 组件和项目
- React+Reflux 实现组件间通信
- 使用bus实现Vue组件间通信
- 使用EventBus轻松实现组件间通信
- js实现网页间通信
- 父子组件通信vue.js
- Vue.js 组件和组件通信
- 聊聊Vue.js组件间通信的几种姿势
- LeetCode-93. Restore IP Addresses
- 多字节、宽字节、兼容字节(TEXT) 相关操作汇总
- mybatis学习之路----动态sql之trim标签源码详解,附带where标签解析
- Docker中使用CentOS7镜像
- bean的最后一次
- pubsub-js 实现RN组件间通信
- 使用swagger2生成RESTful客户端
- 我的python学习笔记.用户输入.函数input()的工作原理
- 简单协程
- 第一次作业
- 多线程--上下文切换
- 泛型 泛型的约束
- 关于jquery,mysql的一些小知识
- 杂记(查漏补缺)