React重渲染时如何确保仅存在一个鼠标事件监听器？

问题核心 #

你的问题根源在于：每次组件因props变化重渲染时，都会执行addEventListener创建新的监听器函数实例，而之前的监听器因为函数引用不一致，无法被removeEventListener正确移除，导致多个监听器同时存在。另外，组件内顶层声明的twoDArray会在重渲染时被重新初始化，数据无法持久化。

解决方案 #

要确保始终只有一个活跃的事件监听器，需要通过React的useRef和useEffect规范监听器的生命周期，同时正确维护数据状态：

1. 用useRef存储监听器函数引用 #

确保监听器函数的引用在组件生命周期内保持一致，这样移除时能匹配到正确的实例。

2. 用useEffect管理监听的添加与移除 #

将监听逻辑放在useEffect中，依赖项包含控制监听状态的变量和相关props，这样状态或props变化时，会先清理旧的监听器，再根据新状态决定是否添加新监听器。

3. 用useState或useRef持久化存储位置数组 #

避免重渲染时数组被重置，同时保证数据更新能触发组件正确响应。

修正后的代码示例 #

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

function YourComponent(props) {
  // 控制是否收集鼠标位置的状态
  const [isCollecting, setIsCollecting] = useState(false);
  // 存储鼠标位置数组，用useState保证数据持久化并触发更新
  const [positionArray, setPositionArray] = useState([]);
  // 存储监听器函数引用，确保重渲染时引用不变
  const mouseDownHandlerRef = useRef(null);
  // 用ref获取目标DOM元素
  const targetElementRef = useRef(null);

  // 定义监听器函数，存在ref中
  mouseDownHandlerRef.current = (e) => {
    if (isCollecting && positionArray.length < 64) {
      // 不可直接修改原数组，通过状态更新方法追加数据
      setPositionArray(prev => [...prev, [e.clientX, e.clientY]]);
    } else if (!isCollecting && positionArray.length > 0) {
      // 打印数组并重置
      console.log(positionArray);
      setPositionArray([]);
    }
  };

  useEffect(() => {
    const element = targetElementRef.current;
    const handler = mouseDownHandlerRef.current;

    // 根据收集状态添加/移除监听器
    if (isCollecting && element) {
      element.addEventListener('mousedown', handler);
    } else if (element) {
      element.removeEventListener('mousedown', handler);
    }

    // 清理函数：组件卸载或依赖变化时强制移除监听器
    return () => {
      if (element) {
        element.removeEventListener('mousedown', handler);
      }
    };
  }, [isCollecting, props.prop1, props.prop2]); // 加入需要监听变化的props

  // 按钮切换逻辑
  const toggleCollect = () => {
    setIsCollecting(prev => !prev);
  };

  return (
    <div>
      <button onClick={toggleCollect}>
        {isCollecting ? '停止收集' : '开始收集'}
      </button>
      {/* 目标元素绑定ref */}
      <div ref={targetElementRef}>点击此处收集鼠标位置</div>
    </div>
  );
}

关键说明 #

• 监听器引用稳定：通过useRef存储监听器函数，避免每次重渲染创建新函数，保证removeEventListener能找到正确的实例。
• useEffect生命周期管理：每次依赖项（isCollecting或props）变化时，先执行清理函数移除旧监听器，再根据新状态添加新监听器，从根源避免重复绑定。
• 数据持久化：用useState存储位置数组，既保证重渲染时数据不丢失，又能通过状态更新触发组件视图同步。

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