React状态变更时如何避免添加无限事件监听器？

我有两个状态集合：

• items：包含ID和指向HTMLDivElement的ref字段的集合对象
• attachments：包含opacity字段的集合，当拖拽元素靠近时，会修改该字段的数值（从0变为1）

核心逻辑是：当item.ref触发mousedown后，在mousemove事件中检测元素是否靠近attachment，若靠近则调用updateAttachment将对应attachment的opacity设为1。

现有实现代码如下：

const items = getFromStore('items');
const attachments = getFromStore('attachments');

useEffect(() => {
  for(const id in items) {
    const element = items[id].ref;
    element.addEventListener('mousedown', (e) => handleMouseDown(e, element));
  }
}, [items, attachments]);

handleMouseDown函数代码：

const handleMouseDown = useCallback((e, element) => {
  // 省略其他逻辑
  const mouseMove = (e) => {
    // 省略距离检测逻辑
    updateAttachment(id, { opacity: 1 })
  };

  window.addEventListener('mousemove', mouseMove);
}, [attachments] /* notice the dependency */);

现在遇到的问题是：每次拖拽调用updateAttachment更新attachments后，useEffect都会重新执行，给元素添加大量重复的mousedown事件监听器。

1. useEffect依赖冗余且未清理监听：useEffect把attachments列为依赖，但attachments的变化并不需要重新绑定mousedown监听；同时每次useEffect执行时都直接添加新监听，没有移除旧的，导致监听器叠加。
2. handleMouseDown依赖不合理：把整个attachments作为useCallback的依赖，只要attachments变化就会生成新的回调函数，进一步加剧了不必要的更新。

1. 给useEffect添加清理函数，移除旧监听器 #

每次useEffect重新执行前，先移除之前绑定的mousedown事件，避免重复绑定：

useEffect(() => {
  const handleListeners = [];

  for(const id in items) {
    const element = items[id].ref;
    const handler = (e) => handleMouseDown(e, element);
    element.addEventListener('mousedown', handler);
    handleListeners.push({ element, handler });
  }

  // 清理函数：移除所有绑定的监听器
  return () => {
    handleListeners.forEach(({ element, handler }) => {
      element.removeEventListener('mousedown', handler);
    });
  };
}, [items, handleMouseDown]); // 仅保留items和稳定的handleMouseDown作为依赖

2. 移除useEffect中不必要的attachments依赖 #

attachments的变化不会影响mousedown监听器的绑定逻辑，所以不需要把它加入useEffect的依赖数组。

3. 调整handleMouseDown的依赖 #

不需要把整个attachments作为依赖，只需要依赖updateAttachment函数（如果updateAttachment是通过useDispatch获取或者本身是稳定引用的函数）：

const handleMouseDown = useCallback((e, element) => {
  // 省略其他逻辑
  const mouseMove = (e) => {
    // 省略距离检测逻辑
    updateAttachment(id, { opacity: 1 })
  };

  window.addEventListener('mousemove', mouseMove);

  // 清理window的mousemove监听，避免内存泄漏
  return () => {
    window.removeEventListener('mousemove', mouseMove);
  };
}, [updateAttachment]); // 仅依赖updateAttachment，而非整个attachments

额外提醒 #

在handleMouseDown中添加mousemove监听后，建议配合mouseup事件触发清理，确保拖拽结束后停止监听mousemove，避免不必要的性能消耗。

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