React FaceBook EventEmitter

Trong react việc liên kết giữa 2 component được thực hiện thông qua EventEmiter, việc hiểu rõ thêm gíup bạn sử dụng nó chủ động hơn.

Ta có EventEmitter của NodeJS và của FaceBook.

EventEmitter của NodeJS: https://nodejs.org/api/events.html EventEmitter của FaceBook: https://github.com/facebook/emitter

NodeJS EventEmitter bao gồm khá nhiều method:

  Event: 'newListener'
  Event: 'removeListener'
  EventEmitter.listenerCount(emitter, eventName)
  EventEmitter.defaultMaxListeners
  emitter.addListener(eventName, listener)
  emitter.emit(eventName[, ...args])
  emitter.eventNames()
  emitter.getMaxListeners()
  emitter.listenerCount(eventName)
  emitter.listeners(eventName)
  emitter.on(eventName, listener)
  emitter.once(eventName, listener)
  emitter.prependListener(eventName, listener)
  emitter.prependOnceListener(eventName, listener)
  emitter.removeAllListeners([eventName])
  emitter.removeListener(eventName, listener)
  emitter.setMaxListeners(n)

Facebook EventEmitter đơn gỉan và dễ sử dụng hơn.

Để tạo ra 1 listener ta có method addListener:

var emitter = new EventEmitter();
emitter.addListener('event', function(x, y) { console.log(x, y); });

method addListener được định nghĩa trong class BaseEventEmitter :

addListener(
    eventType: string, listener, context: ?Object): EmitterSubscription {
    return this._subscriber.addSubscription(
      eventType,
      new EmitterSubscription(this._subscriber, listener, context));
  }

event là key của 1 Event được catch lại, mỗi khi muốn gọi function được add cùng Event có key là event ta có method emit:

emitter.emit('event', 5, 10);  // Listener prints "5 10".

Gỉa sử ta có 1 OrderStore extends EventEmitter:

class OrderStore extends EventEmitter {
  constructor(Dispatcher) {
    super()
    ...
  }
  
  addListener(callback) {
    this.on("ChangeEvent")
  }

Khi console.log OrderStore ta sẽ thấy :

OrderStore
  events: Object
    ChangeEvent: ()arguments: 
  ...

Nghĩa la 1 listener đã được lưu trong EventEmitter với tên gọi chính là type ta truyền vào.

Muốn remove các listener ta có hàm removeAllListeners:

emitter.removeAllListeners();

Muốn lấy ra các listeners đã được add vào ta có method listeners:

emitter.listeners();

Trong class BaseEventEmitter có định nghĩa method __emitToSubscription:

__emitToSubscription(subscription, eventType) {
  var args = Array.prototype.slice.call(arguments, 2);
  subscription.listener.apply(subscription.context, args);
}

Khi ta muốn custom callback gắn liền với emit của EventEmitter, ta có thể extends EventEmitter rồi overide lại method trên:

class MyEventEmitter extends EventEmitter {
  __emitToSubscription(subscription, eventType) {
    var args = Array.prototype.slice.call(arguments, 2);
    var start = Date.now();
    subscription.listener.apply(subscription.context, args);
    var time = Date.now() - start;
    MyLoggingUtility.log('callback-time', {eventType, time});
  }
}

Cảm ơn và hi vọng bài viết có ích trong công việc của bạn.