react兄弟组件之间通信

兄弟组件之间通信

1、 Event Emitter/Target/Dispatcher

特点：需要一个指定的订阅源

// to subscribe
otherObject.addEventListener(‘click’, function() { alert(‘click!’); });
// to dispatch
this.dispatchEvent(‘click’);

2、 Publish / Subscribe

特点：触发事件的时候，你不需要指定一个特定的源，因为它是使用一个全局对象来处理事件（其实就是一个全局广播的方式来处理事件）

// to subscribe
globalBroadcaster.subscribe(‘click’, function() { alert(‘click!’); });
// to dispatch
globalBroadcaster.publish(‘click’);

3、 Signals

特点：与Event Emitter/Target/Dispatcher相似，不要使用随机的字符串作为事件触发的引用。触发事件的每一个对象都需要一个确切的名字（就是类似硬编码类的去写事件名字），并且在触发的时候，也必须要指定确切的事件。

// to subscribe
otherObject.clicked.add(function() { alert(‘click’); });
// to dispatch
this.clicked.dispatch();

基于 Signals 模式（react团队使用）

//custom object that dispatch a `started` signal
var myObject = {
  started : new signals.Signal()
};
function onStarted(param1, param2){
  alert(param1 + param2);
}
myObject.started.add(onStarted); //add listener
myObject.started.dispatch('foo', 'bar'); //dispatch signal passing custom parameters
myObject.started.remove(onStarted); //remove a single listener

Publish/Subscribe模式

var pubsub = require('pubsubjs').create();
// Define the global subscriber use of pubsubjs 
pubsub.subscribe('mail.arrived', function (context, mailId) {
    mailer.display(mailId);
});

pubsub.subscribe('mail.arrived', function (context, mailId) {
    desktop.notice('a mail has arrived');
});

mailer.polling({
    onArrived: function (mailId) {
        pubsub.publish('mail.arrived', null, mailId);
    },
    …
});