---
title: "useEventEmitter 用法与示例"
description: "基础的事件触发器。"
canonical: https://reactuse.com/zh-Hans/effect/useeventemitter/
---

# useEventEmitter

基础的事件触发器

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

### 使用场景

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

### 注意事项

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

## Usage

```tsx live noInline

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/>)
```

%%API%%