react 中 EventEmitter 事件总线机制

react 中 EventEmitter 事件总线机制

一：创建事件总线

//添加事件总线
import {EventEmitter} from 'events';
export default new EventEmitter();

二：监听事件并移除事件总线

//监听事件总线
import eventBus from '../common/events';
 React.useEffect(() => {
    eventBus.on(EventName.titleChange, titleChange);//监听事件总线
    return () => {
      eventBus.removeListener(EventName.titleChange, titleChange);//移出事件总线
    }
  }, []);

function titleChange(title: string) {
    seTitle(title);
  }

三：EventEmitter对象常用API

1.添加事件监听

• addListener(event, listener)
  为指定事件添加一个监听器到监听器数组的尾部。
• on(event, listener)
  为指定事件注册一个监听器，接受一个字符串 event 和一个回调函数。
• once(event, listener)
  为指定事件注册一个单次监听器，即 监听器最多只会触发一次，触发后立刻解除该监听器。
• removeListener(event, listener)
  移除指定事件的某个监听器，监听器 必须是该事件已经注册过的监听器。

2.移除事件监听

removeListener(event, listener)
移除指定事件的某个监听器，监听器 必须是该事件已经注册过的监听器。
removeAllListeners([event])
移除所有事件的所有监听器， 如果指定事件，则移除指定事件的所有监听器。

3. 手动触发事件

emit(event, [arg1], [arg2], […])按参数的顺序执行每个监听器，如果事件有注册监听返回 true，否则返回 false。

四：参数代表含义

• event - 字符串，事件名称
• listener - 处理事件函数