React使用 event-bus-hooks发布-订阅

React中的Event Bus Hooks通常是指使用`useEffect`、`useState`等Hook来实现事件总线的设计模式，而不是直接依赖于传统的event bus库，如Redux或MobX。这种设计允许组件之间通过传递函数引用或者状态值来进行通信，而无需耦合到特定的全局状态管理工具。

在React中，你可以这样做：

1. **创建EventEmitter**:
使用自定义Hook，比如`createEventBus`，定义一个可以发布和订阅事件的对象，它维护一个事件列表和回调数组。

import { useState } from 'react';

const createEventBus = () => {
  const [events, setEvents] = useState({});

  // 发布事件
  const emit = (eventName, data) => {
    events[eventName] = [...(events[eventName] || []), data];
  };

  // 订阅事件
  const subscribe = (eventName, callback) => {
    if (!events[eventName]) {
      setEvents((prevEvents) => ({ ...prevEvents, [eventName]: [] }));
    }
    events[eventName].push(callback);
  };

  return { emit, subscribe };
};

2. **使用EventEmitter**:
在需要发送或接收事件的地方，你可以订阅感兴趣的事件，并在事件触发时执行相应操作。

const EventBus = useEventBus();

// 发布事件
const handleClick = () => EventBus.emit('myEvent', { someData });

// 订阅事件
useEffect(() => {
  EventBus.subscribe('myEvent', (data) => {
    console.log('Received data:', data);
  });
}, [EventBus]);