React FaceBook EventEmitter
This post hasn't been updated for 7 years
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.
All Rights Reserved