React集成Web Components：自定义事件派发与监听异常问题

你遇到的问题其实挺典型的——React的合成事件系统和原生DOM事件的机制差异，再加上事件实例的复用问题，导致React组件内部监听不到自定义事件。咱们先拆解下你代码里的核心问题，再给出可行的解决方案。

问题根源分析 #

1. 事件实例不可复用：你提前创建了一个全局的customEvent实例，而原生Event对象被dispatchEvent调用后，内部状态会被标记为已触发，后续再调用dispatchEvent这个实例就失效了，相当于白派发。
2. useEffect缺少依赖与清理：你的两个组件里的useEffect都没有设置依赖数组，会导致组件每次渲染都重复添加监听、重复派发事件，不仅冗余，还可能引发内存泄漏。
3. React合成事件的局限性：React的合成事件系统只支持标准DOM事件，自定义事件无法通过onCustom这类合成事件监听，必须用原生addEventListener绑定到真实DOM元素上。

修复后的代码示例 #

1. 重构事件创建逻辑 #

把全局事件实例改成一个创建函数，每次派发都生成新的事件对象：

// events.ts
export function createCustomEvent() {
  return new Event('custom', { 
    bubbles: true, 
    cancelable: true 
  });
}

2. 调整Dispatcher组件 #

只在组件挂载时派发一次事件，并确保使用新的事件实例：

// Dispatcher.tsx
import React, { useEffect, useRef } from "react";
import { createCustomEvent } from "./events";

export default function Dispatcher() {
  const pRef = useRef<HTMLParagraphElement>(null);

  useEffect(() => {
    // 确保DOM元素存在再派发
    if (pRef.current) {
      pRef.current.dispatchEvent(createCustomEvent());
    }
  }, []); // 空依赖数组，仅组件挂载时执行

  return (
    <div>
      <p ref={pRef}>Some Text</p>
    </div>
  );
}

3. 优化Listener组件 #

只在挂载时添加一次监听，并且添加清理函数移除监听，避免内存泄漏：

// Listener.tsx
import React, { useEffect, useRef } from "react";
import Dispatcher from "./Dispatcher";

export default function Listener() {
  const divRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const divElement = divRef.current;
    if (!divElement) return;

    const handleCustomEvent = (ev: Event) => {
      console.log("react received custom event");
    };

    divElement.addEventListener("custom", handleCustomEvent);

    // 组件卸载时移除监听
    return () => {
      divElement.removeEventListener("custom", handleCustomEvent);
    };
  }, []); // 空依赖数组，仅组件挂载时执行

  return (
    <div ref={divRef}>
      <Dispatcher />
    </div>
  );
}

额外注意事项 #

• 事件冒泡配置：一定要确保事件的bubbles设为true，这样事件才能从派发它的子元素（<p>）冒泡到父元素（Listener组件的<div>），被监听函数捕获。
• Web Components场景适配：如果是真实的Web Components（而非你示例里的React组件派发事件），监听逻辑完全一致——通过useRef获取Web Components的DOM实例，添加原生事件监听即可。
• 避免滥用全局事件：如果需要跨多个React组件传递事件，除了自定义事件，也可以考虑用React的上下文（Context）或者状态管理库（如Redux），这样更符合React的数据流模式。

内容的提问来源于stack exchange，提问作者lhk