React组件中如何向外部正确注册与注销HTML元素？

我正尝试将HTML元素注册/注销到组件外部的对象中，但难以找到正确的实现方式。我的第一想法是获取HTML元素的ref，再通过effect将该元素与外部源同步。

以下是我尝试实现的简化示例：

import { useEffect, useRef } from "react";
import "./styles.css";

const registeredElements = [];

window.addEventListener("click", (event) => {
  if (registeredElements.some((element) => element.contains(event.target))) {
    console.log("clicked inside");
  } else {
    console.log("clicked outside");
  }
});

function registerElement(element) {
  registeredElements.push(element);
}

function unregisterElement(element) {
  const index = registeredElements.indexOf(element);
  if (index !== -1) {
    registeredElements.splice(index, 1);
  }
}

export default function App() {
  const divRef = useRef();

  useEffect(
    () => {
      const div = divRef.current;
      if (div) {
        registerElement(div);
        return () => {
          unregisterElement(div);
        };
      }
    },
    // What happens if the DIV element changes?
    []
  );

  return (
    <div ref={divRef} className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

当前实现的问题在于：若div元素发生更新（比如key变化导致DOM元素替换），空依赖数组的effect无法重新执行，导致旧元素未注销、新元素未注册。想把div元素加入依赖数组，但react-hooks/exhaustive-deps lint规则指出不应依赖ref。

我还考虑过另外两种方案但有疑问：

• 使用回调式ref，但不确定如何在组件卸载时注销元素；
• 将ref存入state，但我不希望注册ref时触发组件重渲染，仅需将ref与外部源同步。

请问在此场景下，正确注册/注销HTML元素的方式是什么？

正确实现方式：回调式ref + 内部状态存储当前元素 #

回调式ref是最适合这个场景的方案，它能直接在元素挂载、更新、卸载时触发逻辑，完美适配注册/注销的需求，且不会触发不必要的组件重渲染。

以下是优化后的代码：

import { useCallback, useRef } from "react";
import "./styles.css";

const registeredElements = [];

window.addEventListener("click", (event) => {
  if (registeredElements.some((element) => element.contains(event.target))) {
    console.log("clicked inside");
  } else {
    console.log("clicked outside");
  }
});

// 优化注册逻辑：避免重复添加同一元素
function registerElement(element) {
  if (!registeredElements.includes(element)) {
    registeredElements.push(element);
  }
}

function unregisterElement(element) {
  const index = registeredElements.indexOf(element);
  if (index !== -1) {
    registeredElements.splice(index, 1);
  }
}

export default function App() {
  // 用ref存储当前已注册的DOM元素，用于更新/卸载时注销
  const currentElementRef = useRef(null);

  // 用useCallback包裹回调，避免每次渲染创建新函数导致不必要的ref触发
  const handleRef = useCallback((element) => {
    // 第一步：注销之前的元素（如果存在）
    if (currentElementRef.current) {
      unregisterElement(currentElementRef.current);
    }

    if (element) {
      // 第二步：注册新元素并更新引用
      registerElement(element);
      currentElementRef.current = element;
    } else {
      // 第三步：元素为null时（组件卸载），清空存储的引用
      currentElementRef.current = null;
    }
  }, []);

  return (
    <div ref={handleRef} className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

方案说明： #

1. 回调式ref的触发时机：

   • 元素挂载时：React调用handleRef并传入DOM元素，执行注册逻辑；
   • 元素更新时（比如key变化导致DOM替换）：React先调用handleRef传入null（旧元素卸载），再传入新DOM元素，此时我们会先注销旧元素，再注册新元素；
   • 组件卸载时：React调用handleRef传入null，此时旧元素已经被注销，只需清空引用即可。

2. useCallback的作用：
   包裹回调函数后，除非依赖项变化（这里依赖为空数组），否则每次渲染都会复用同一个函数，避免因回调函数更新导致React频繁触发ref逻辑。

3. currentElementRef的作用：
   存储当前已注册的DOM元素，确保在元素更新或组件卸载时，能准确找到需要注销的旧元素。

其他方案分析： #

• 将ref存入state：此方案会触发组件重渲染，不符合你“仅同步ref与外部源”的需求，因此不推荐；
• 原effect方案：空依赖数组无法处理元素更新的情况，添加ref到依赖数组又会违反lint规则（且ref.current的变化不会触发effect重新执行），因此不可行。

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