React 发布-订阅机制实现组件间信息通信 3

布满荆棘的人生 2022-11-20 10:54 176阅读 0赞

在上一篇文章里介绍了PubSubJs的使用，其核心思想是发布-订阅模式。本篇继续介绍React中可以使用此模式的另一个案例 EventEmitter。EventEmitter 的核心就是事件触发与事件监听器功能的封装。

EventEmitter 的每个事件由**一个事件名和若干个参数**组成，事件名是一个字符串，通常表达一定的语义。对于每个事件，EventEmitter 支持若干个事件监听器。当事件触发时，注册到这个事件的事件监听器被**依次调用**，事件参数作为回调函数参数传递。

1. 安装

> npm install events

2. 从React项目中引入

>   import \{EventEmitter\} from 'events'

3. 核心方法

> 1. **addListener(event, listener)**  
> 为指定事件添加一个监听器到监听器数组的尾部。
> 
> 2. **on(event, listener)**  
> 为指定事件注册一个监听器，接受一个字符串 event 和一个回调函数。
> 
> 3. **once(event, listener)**  
> 为指定事件注册一个单次监听器，**即监听器最多只会触发一次**，触发后立刻解除该监听器。
> 
> 4. **emit(event, \[arg1\], \[arg2\], \[...\])**  
> 按监听器的顺序执行执行每个监听器，如果事件有注册监听返回 true，否则返回 false。
> 
> 5. **removeListener(event, listener)**
> 
> 移除指定事件的某个监听器，监听器必须是该事件已经注册过的监听器。
> 
> 它接受两个参数，第一个是事件名称，第二个是回调函数名称。

注意： **这里 addListener 和 on 效果和作用是一模一样，没有区别。**

4. 案例

// 监听器 #1
    var listener1 = function listener1() {
       console.log('监听器 listener1 执行。');
    }
    
    // 监听器 #2
    var listener2 = function listener2() {
      console.log('监听器 listener2 执行。');
    }
    
    // 绑定 connection 事件，处理函数为 listener1 
    eventEmitter.addListener('connection', listener1);
    
    // 绑定 connection 事件，处理函数为 listener2
    eventEmitter.on('connection', listener2);
    
    var eventListeners = eventEmitter.listenerCount('connection');
    console.log(eventListeners + " 个监听器监听连接事件。");
    
    // 处理 connection 事件 
    eventEmitter.emit('connection');
    
    // 移除监绑定的 listener1 函数
    eventEmitter.removeListener('connection', listener1);
    console.log("listener1 不再受监听。");
    
    // 触发连接事件
    eventEmitter.emit('connection');
    
    eventListeners = eventEmitter.listenerCount('connection');
    console.log(eventListeners + " 个监听器监听连接事件。");
    
    console.log("程序执行完毕。");

运行结果如下所示：

2 个监听器监听连接事件。
    监听器 listener1 执行。
    监听器 listener2 执行。
    listener1 不再受监听。
    监听器 listener2 执行。
    1 个监听器监听连接事件。
    程序执行完毕。

用的比较多的就是on( )和emit( )两个函数，用于监听订阅和发布消息。

参考资料：

1. [https://www.runoob.com/nodejs/nodejs-event.html][https_www.runoob.com_nodejs_nodejs-event.html]

[https_www.runoob.com_nodejs_nodejs-event.html]: https://www.runoob.com/nodejs/nodejs-event.html