React组件卸载时useEffect清理函数无法访问DOM移除事件监听疑问

问题描述 #

我通过DOM操作给组件中的按钮绑定了事件监听器，点击能正常打印日志，确认监听器已绑定。但在useEffect的清理函数中无法移除该监听器，因为找不到对应的DOM元素，导致DevTools中孤立节点数增加，可能引发内存泄漏。

简化代码示例：

import React, { useEffect } from 'react';

function MyCustomComponent() {

  useEffect(() => {
    // 定义事件处理函数
    function handleClick() {
      console.log('Button was clicked!');
    }
    
    document.getElementById("uniqueId").addEventListener('click', handleClick);

    // 清理函数：尝试移除事件监听器
    return () => {
      document.getElementById("uniqueId").removeEventListener('click', handleClick);
    };
  }, []); // 空依赖数组，仅在组件挂载后执行一次

  return (
    <div>
      <button id="uniqueId">Click Me!</button>
    </div>
  );
}

export default MyCustomComponent;

实际场景是通过外部纯JS文件向组件追加HTML节点（比如上述button#uniqueId），节点追加正常，但清理时无法访问到该DOM元素。疑惑的是，React文档称清理函数可执行清理操作，为何此处无法访问DOM？

原因分析 #

核心问题是清理函数执行时，目标DOM节点已经不在当前文档的DOM树中，主要有几种可能：

• 若节点被追加到React组件的DOM树外部（比如直接append到document.body），后续可能有其他逻辑在组件卸载前就把这个节点移除了；
• 若节点是追加在React组件的DOM树内部，可能因为父组件的快速条件渲染、强制更新等情况，React在执行清理函数前已经把组件的DOM节点整体移除了；
• 用全局getElementById查找节点本身存在不确定性——如果页面中存在重复ID的节点，或者原节点被覆盖、移除，都会导致查找失败。

至于React文档提到的清理函数可以执行清理，是针对React自身渲染的节点而言：组件卸载时，清理函数会在React移除DOM节点前执行，此时节点还存在，能正常进行监听器移除等操作。但手动追加的节点不在React的管理流程里，React无法保证它在清理时的存在状态。

解决办法 #

1. 保存节点引用，避免全局查找 #

在创建/追加节点时，直接把节点引用存在变量或useRef中，清理时直接使用这个引用，不用再去DOM中查找：

import React, { useEffect, useRef } from 'react';

function MyCustomComponent() {
  const buttonRef = useRef(null);

  useEffect(() => {
    // 纯JS创建并追加按钮
    const btn = document.createElement('button');
    btn.id = 'uniqueId';
    btn.textContent = 'Click Me!';
    // 追加到组件的根容器
    const container = document.getElementById('component-container');
    container.appendChild(btn);
    buttonRef.current = btn; // 保存节点引用

    function handleClick() {
      console.log('Button was clicked!');
    }
    btn.addEventListener('click', handleClick);

    return () => {
      // 直接用保存的引用操作
      if (buttonRef.current) {
        buttonRef.current.removeEventListener('click', handleClick);
        // 按需移除节点
        buttonRef.current.remove();
        buttonRef.current = null;
      }
    };
  }, []);

  return <div id="component-container"></div>;
}

export default MyCustomComponent;

2. 让外部JS提供清理方法 #

如果节点是在外部纯JS文件中创建的，让该JS文件暴露一个清理函数，在React组件的useEffect清理逻辑中调用这个方法，由外部JS自己负责移除监听器和节点，避免跨上下文的DOM查找问题。

3. 确保节点生命周期和组件绑定 #

不管节点怎么创建，都要让它的创建、绑定监听器、清理逻辑在同一个effect中完成，保证逻辑的连贯性，避免出现“监听器绑定了，但清理时找不到节点”的脱节情况。

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