[ahooks] useEventEmitter源码阅读

在React项目中如果涉及到在多个组件中进行通信,可以使用这个hooks

使用方式

tsx 复制代码
// 初始化
const event = useEventEmitter();

// 发送一个事件
event.emit("hello");

// 订阅通知, 当调用emit函数时,所有订阅的位置都会收到通知
event.useSubscription(val => {
  console.log(val);
});

源码

源码的核心是一个发布订阅类EventEmitter,里面包括一个订阅的Set集合subscriptions,发送方法emit和订阅方法useSubscription,底部是一个封装好的初始化hooksuseEventEmitter:

tsx 复制代码
import { useRef, useEffect } from 'react';

type Subscription<T> = (val: T) => void;

export class EventEmitter<T> {
  private subscriptions = new Set<Subscription<T>>();
  
  emit = (val: T) => {
    for (const subscription of this.subscriptions) {
      subscription(val);
    }
  };

  useSubscription = (callback: Subscription<T>) => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const callbackRef = useRef<Subscription<T>>(undefined);
    callbackRef.current = callback;
    // eslint-disable-next-line react-hooks/rules-of-hooks
    useEffect(() => {
      function subscription(val: T) {
        if (callbackRef.current) {
          callbackRef.current(val);
        }
      }
      this.subscriptions.add(subscription);
      return () => {
        this.subscriptions.delete(subscription);
      };
    }, []);
  };
}

function useEventEmitter<T = void>() {
  const ref = useRef<EventEmitter<T>>(undefined);
  if (!ref.current) {
    ref.current = new EventEmitter();
  }
  return ref.current;
}

export default useEventEmitter;

subscriptions

用于保存所有已被订阅的事件,使用Set集合可以保证所有方法在全局只被注册一次

emit

用于发送事件通知,当调用emit方法时,会遍历subscriptions集合,通知所有已订阅的事件

useSubscription

用于订阅事件的hooks,内部使用useRef接收一个传入的事件,目的是为了保证每次在useEffect中调用的callback是最新的,避免闭包陷进

内部使用useEffect的原因是为了保证每个订阅的事件只在组件首次挂载时订阅一次,在组件卸载时取消订阅,这样获得更好的性能

useEventEmitter

最后是底部的useEventEmitter,它的作用是初始化EventEmitter类且返回一个该类的实例,使用useRef的目的是为了保证在调用该hooks的组件中,EventEmitter类只实例化一次

相关推荐
一块plus1 分钟前
一门原本只是“试试水”的课程,没想到炸出了一群真诚的开发者
javascript·面试·github
亿万托福2 分钟前
数字世界的构筑之艺:前端技术栈的浅描与远瞻
前端
用户40812812003813 分钟前
JWT 和 token 区别
前端
yvvvy3 分钟前
🚀React + Vite 实战:打造智能单词学习应用
javascript
盏茶作酒293 分钟前
打造自己的组件库(三)打包及发布
前端·vue.js
单休好_好就好在比双休少一天4 分钟前
Vite打包从12.17M -> 7.95M,速度提升≈51.85%
前端·javascript
yinke小琪4 分钟前
JavaScript DOM内容操作常用方法和XSS注入攻击
前端·javascript
归于尽4 分钟前
从 TodoList 看自定义 Hook 的设计思想
前端
G等你下课5 分钟前
如何优雅地组织业务逻辑?自定义 Hook 全解析
前端·react.js
刘坤155 分钟前
封装axios二方包
前端·http