React事件监听器循环内带参函数清理失效问题排查

你的应用崩溃是典型的事件监听器内存泄漏导致，核心问题如下：

• removeEventListener完全不生效。DOM事件的绑定和移除要求传入完全相同的函数引用才能匹配，你在绑定和移除时都写了内联箭头函数()=>{doTri(e)}，这两个函数是每次代码执行时单独创建的独立实例，内存地址不一致，移除操作根本找不到之前绑定的监听器，属于无效代码。
• 监听器无限堆叠。你的useEffect依赖项是[tri, order]，每次点击按钮触发setTri/setOrder都会导致组件重渲染、effect重新执行，每次执行都会给所有.headerBtn按钮新增一个点击监听器，旧的监听器永远不会被清除。点击次数越多，每个按钮上挂载的监听器数量线性增长，内存占用快速超过阈值，自然会出现点击数次后崩溃的现象。
• 额外隐患：你在React逻辑里直接操作DOM修改id、绑定原生事件，绕过了React的虚拟DOM状态同步机制，很容易出现DOM实际状态和React内部状态不一致的问题，触发其他不可预期的报错。

最小修复（保留原生事件写法） #

把事件处理函数抽成固定引用，保证移除时能匹配到同一个函数实例：

const handlerRef = useRef(new Map());

const doTri = (e) => {
  if(e.id === "active"){
    setOrder(!order);
  }
  else {
    document.getElementById("active")?.removeAttribute("id");
    e.setAttribute('id', 'active');
    setTri(e.classList[1]);
    setOrder(true)
  }
}

useEffect(() => {
  const buttons = Array.from(document.getElementsByClassName("headerBtn"));
  buttons.forEach((btn)=>{
    // 为每个按钮创建固定引用的处理函数，存入ref暂存
    const handler = () => doTri(btn);
    handlerRef.current.set(btn, handler);
    btn.addEventListener('click', handler);
  })

  return () => {
    const buttons = Array.from(document.getElementsByClassName("headerBtn"));
    buttons.forEach((btn)=>{
      // 取出之前存的同一函数引用完成移除
      const handler = handlerRef.current.get(btn);
      if(handler) {
        btn.removeEventListener('click', handler);
        handlerRef.current.delete(btn);
      }
    })
  }
}, [tri,order])

注意：该方案仅修复监听器泄漏问题，直接操作DOM的反模式隐患依然存在，更推荐使用下面的React标准写法。

推荐重构（React标准范式，从根源避免问题） #

完全抛弃原生DOM操作，用React状态驱动视图、用JSX自带的合成事件绑定逻辑，React会自动处理事件的绑定和卸载，不会出现监听器泄漏：

// 用状态存当前激活按钮的标识，不要直接改DOM的id
const [activeBtnId, setActiveBtnId] = useState('');

const handleHeaderBtnClick = (btnClass, btnId) => {
  if(activeBtnId === btnId) {
    setOrder(prev => !prev);
  } else {
    setActiveBtnId(btnId);
    setTri(btnClass);
    setOrder(true);
  }
}

// 组件渲染时直接在JSX上绑定onClick，不需要手动操作DOM
return (
  <div className="header">
    {/* 按钮按数据循环渲染示例 */}
    {headerBtnConfig.map(btn => (
      <button
        key={btn.id}
        className={`headerBtn ${btn.className}`}
        id={activeBtnId === btn.id ? 'active' : ''}
        onClick={() => handleHeaderBtnClick(btn.className, btn.id)}
      >
        {btn.text}
      </button>
    ))}
  </div>
)

• 遇到事件相关的内存泄漏，先打开浏览器DevTools的Elements面板，选中目标元素，查看底部Event Listeners栏的事件数量，重复操作后如果事件数只增不减，就可以确定是监听器没有被正确移除。
• 只要使用addEventListener，就不要传入内联匿名函数，要把处理函数明确定义为固定引用，保证移除时能拿到同一个函数实例。
• React项目优先使用JSX自带的合成事件（即写在标签上的onClick等属性），非必要不要手动操作原生DOM绑定事件，90%的监听器泄漏问题都来自手动绑定时传了错误的函数引用。

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