react中使用Event

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

当react组件嵌套较深或者兄弟组件传参，使用Event来传参非常方便。

自己封装event类

1、创建Event类

/**
 * 发布订阅模式(观察者模式)
 * handles: 事件处理函数集合
 * on: 订阅事件
 * emit: 发布事件
 * off: 删除事件
 **/

class Event {
  constructor() {
    this.handles = {};
  }

  // 订阅事件
  on(eventType, handle) {
    if (!this.handles.hasOwnProperty(eventType)) {
      this.handles[eventType] = [];
    }
    if (typeof handle == 'function') {
      this.handles[eventType].push(handle);
    } else {
      throw new Error('缺少回调函数');
    }
    return this;
  }

  // 发布事件
  emit(eventType, ...args) {
    if (this.handles.hasOwnProperty(eventType)) {
      this.handles[eventType].forEach((item, key, arr) => {
        item.apply(null, args);
      });
    } else {
      // throw new Error(`"${eventType}"事件未注册`);
      console.log(`"${eventType}"事件未注册`);
    }
    return this;
  }

  // 删除事件
  off(eventType, handle) {
    if (!this.handles.hasOwnProperty(eventType)) {
      throw new Error(`"${eventType}"事件未注册`);
    } else if (typeof handle != 'function') {
      throw new Error('缺少回调函数');
    } else {
      this.handles[eventType].forEach((item, key, arr) => {
        if (item == handle) {
          arr.splice(key, 1);
        }
      });
    }
    return this; // 实现链式操作
  }
}

export default Event;

Event类使用发布订阅模式

handles对象中的键名为事件名，键值为数组，数组用来存储注册事件的回调函数。

on方法订阅事件：接收事件名和回调函数，作用是把回调函数存起来。

emit方法发布事件：接收事件名和参数。此时通过apply执行存在handles里面的回调函数，并把参数传入回调函数。

off方法删除事件：当组件销毁，当前组件不需要订阅事件时，删除handles该事件回调数组中的回调。

2、类创建好后，进行实例化。为了避免协同开发时事件名重复，约定把事件名放在pubEventName。

import Event from './event';

const pubEvent = new Event();
const pubEventName = {
  updateDevInfo: 'updateDevInfo', 
};
export { pubEvent, pubEventName };

3、最后在项目中使用：

file1.js

import { pubEvent, pubEventName } from '@/utils/pubEvent';
...
componentDidMount(){
  pubEvent.on(pubEventName.updateDevInfo, this.httpGetResponst);
}
componentWillUnmount() {
  pubEvent.off(pubEventName.updateDevInfo, this.httpGetResponst);
}
...

file2.js

import { pubEvent, pubEventName } from '@/utils/pubEvent';
...
onClick=()=>{
  pubEvent.emit(pubEventName.updateDevInfo);
}

使用插件 events

1. 下载依赖：npm i events --save
2. 创建events.js 文件，进行示例化

import { EventEmitter } from 'events';
export default new EventEmitter()

3. 在需要通知执行事件的文件中，进行事件派发

emit(name,arg) 第一个参数name为事件名称，arg是传参（可选）

import emitter from './events'

...

// 点击后执行事件
onClick=()=>{
  emitter.emit('myEventName',true)
}

4. 在需要执行事件的文件内，写上事件监听

import emitter from './events'
...
componentDidMount(){
  emitter.addListener("myEventName", (arg) => {
     // TODO:这里写要做的事情
  });
}

5. 组件销毁时移除监听

import emitter from './events'
...
componentWillUnmount() {
  emitter.removeListener("myEventName")
}

欢迎评论交流

❤️ 更多前端知识欢迎关注公众号交流

❤️ 这里有你想知道的web前端知识