RN 中使用pubsubjs 实现兄弟组件之间传值

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

     
     
1
     
     
2
     
     
3
     
     
4
     
     
5
     
     
6
     
     
7
     
     
8
     
     
9
     
     
10
     
     
11
     
     
12
     
     
13
     
     
14
     
     
15
     
     
16
     
     
17
     
     
18
     
     
19
     
     
20
     
     
21
     
     
22
     
     
23
    
    

4>发送事件：

//发送一个异步消息
PubSub.publish("firstevent");

//发送一个同步消息
PubSub.publishSync("firstevent");

    
    

     
     
1
     
     
2
     
     
3
     
     
4
     
     
5
     
     
6
    
    

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'


    
    

     
     
1
     
     
2
     
     
3
     
     
4
     
     
5
     
     
6
     
     
7
     
     
8
     
     
9
     
     
10
     
     
11
     
     
12
     
     
13
     
     
14
     
     
15
     
     
16
     
     
17
     
     
18
     
     
19
     
     
20
     
     
21
     
     
22
     
     
23
     
     
24
    
    

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

     
     
1
     
     
2
     
     
3
     
     
4
     
     
5
     
     
6
     
     
7
     
     
8
     
     
9
     
     
10
     
     
11
     
     
12
     
     
13
     
     
14
    
    

官方文档：https://github.com/mroderick/PubSubJS

虽然上面文档已经很详细，但也可参照：http://www.jianshu.com/p/9b0d5a3d0518

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

   
   
1
   
   
2
   
   
3
   
   
4
   
   
5
   
   
6
   
   
7
   
   
8
   
   
9
   
   
10
   
   
11
   
   
12
   
   
13
   
   
14
   
   
15
   
   
16
   
   
17
   
   
18
   
   
19
   
   
20
   
   
21
   
   
22
   
   
23
  
  

4>发送事件：

//发送一个异步消息
PubSub.publish("firstevent");

//发送一个同步消息
PubSub.publishSync("firstevent");

  
  

   
   
1
   
   
2
   
   
3
   
   
4
   
   
5
   
   
6
  
  

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'


  
  

   
   
1
   
   
2
   
   
3
   
   
4
   
   
5
   
   
6
   
   
7
   
   
8
   
   
9
   
   
10
   
   
11
   
   
12
   
   
13
   
   
14
   
   
15
   
   
16
   
   
17
   
   
18
   
   
19
   
   
20
   
   
21
   
   
22
   
   
23
   
   
24
  
  

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

   
   
1
   
   
2
   
   
3
   
   
4
   
   
5
   
   
6
   
   
7
   
   
8
   
   
9
   
   
10
   
   
11
   
   
12
   
   
13
   
   
14
  
  

官方文档：https://github.com/mroderick/PubSubJS

虽然上面文档已经很详细，但也可参照：http://www.jianshu.com/p/9b0d5a3d0518