---
title: "useEventEmitter 用法與示例"
description: "基礎的事件觸發器。"
canonical: https://reactuse.com/zh-Hant/effect/useeventemitter/
---

# useEventEmitter

基礎的事件觸發器

`useEventEmitter` 提供了一個輕量級的事件發射器，用於在元件之間通訊。它回傳一個帶有 `emit`、`on` 和 `useSubscription` 方法的發射器物件。發射器可以跨元件共享以實現發布/訂閱模式。

### 使用場景

- 在沒有父子關係的元件之間傳遞訊息
- 建構事件驅動的架構，元件透過事件解耦
- 實作全域事件匯流排用於跨元件通訊

### 注意事項

- **自動清理**：使用 `useSubscription` 在元件中訂閱事件會在元件卸載時自動取消訂閱。
- **型別安全**：支援 TypeScript 泛型以確保事件酬載的型別安全。
- **相關 hooks**：另請參閱 `useEventListener` 用於訂閱 DOM 事件，以及 `useBroadcastChannel` 用於跨分頁通訊。

## 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%%