useEventEmitter

基礎的事件觸發器

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

使用場景

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

注意事項

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

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