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

相关推荐
慧一居士26 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead28 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_8 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js