[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类只实例化一次

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_4 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js