useEventEmitter

基础的事件触发器

useEventEmitter 创建一个限定在组件范围内的轻量级发布/订阅事件系统。它返回一个包含三个项目的元组：注册监听器的 event 函数（每个返回一个可释放对象）、向所有监听器广播值的 fire 函数，以及一次移除所有监听器的 dispose 函数。监听器引用存储在 ref 中，因此发射器标识在渲染之间是稳定的。

使用场景

  • 在兄弟组件或解耦模块之间协调通信，无需提升状态
  • 在 React 树内构建自定义通知或消息系统
  • 实现撤销/重做或命令模式，多个订阅者对派发的事件做出反应

注意事项

  • 可释放模式：每次调用 event 函数都返回一个带有 dispose() 方法的对象，允许你在不影响其他监听器的情况下移除单个监听器。
  • 无自动清理：监听器不会在卸载时自动移除。在 useEffect 清理中调用 dispose() 或使用 useUnmount 防止内存泄漏。
  • 发射器支持事件负载和可选第二参数的泛型类型。

Usage

Live Editor

function Demo() {
  const [state, setState] = useState(0);
  const [event, fire, dispose] = useEventEmitter<number>();

  const event1 = useRef<IDisposable>();
  useEffect(() => {
    event((val) => {
      setState(s => s + val);
    });
    event1.current = event(val => setState(s => s + val + 10));
  }, [event]);

  return (
    <div>
      <div>状态: {state}</div>
      <button onClick={() => fire(1)}>触发</button>
      <button onClick={() => dispose()}>清除所有</button>
      <button onClick={() => event1.current?.dispose()}>清除单个</button>
    </div>
  );
};

render(<Demo/>)
Result

API

useEventEmitter

Returns

readonly [UseEventEmitterEvent<T, U>, (arg1: T, arg2: U) => void, () => void]: 包含以下元素的元组：

  • 添加监听器的函数。
  • 触发函数。
  • 停止函数。

Arguments