1. 程式人生 > >pubsub-js 實現RN元件間通訊

pubsub-js 實現RN元件間通訊

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");