无法在组件卸载时的 React useEffect 返回函数中访问 DOM 进行清理

Question

我有以下组件，并通过 DOM 操作将事件监听器附加到其中的按钮。我可以确认事件监听器已附加，因为单击按钮时我可以在开发工具中看到控制台日志。这里的问题是我无法像下面所做的那样删除返回函数中的事件监听器。大多数博客和指南都建议使用 useRef 挂钩。我熟悉 useRef 钩子，是的，它确实有效。

但是由于一些特定的要求，我在我的项目中提供了一个纯 JS 文件，并尝试使用 dom 操作向其附加 HTML 节点，这对我来说工作得很好。

但是当我继续提供清理功能并尝试在清理功能中删除EventListener时，我无法访问DOM元素，并且它正在添加到DevTools中网页的分离节点计数中。此问题将增加页面上的负载以及网页的潜在内存泄漏。为什么react文档建议当我们甚至无法访问其中的dom时，可以在返回函数中执行任何清理。

import React, { useEffect } from 'react';

function MyCustomComponent() {

  useEffect(() => {
    // Define the event handler
    function handleClick() {
      console.log('Button was clicked!');
    }
    
    document.getElementById("uniqueId").addEventListener('click', handleClick);

    // Cleanup: remove the event listener from the button
    return () => {
      document.getElementById("uniqueId").removeEventListener('click', handleClick);
    };
  }, []); // The empty dependency array means this useEffect will run once after the component is mounted

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

export default MyCustomComponent;

有关该问题的任何进一步说明，请发表评论。