React中如何准确判定鼠标是否位于元素边界范围内

代码存在3个核心问题，直接导致快速移动鼠标时判定不准：

• useEffect的清理函数逻辑错误：当前卸载/重渲染时执行的是window.addEventListener("mousemove", mouseMove)，会重复注册事件监听，而非移除旧监听，运行时间越长注册的回调越多，主线程阻塞越严重，状态更新越慢。
• 用React状态存储高频更新的鼠标位置存在天然延迟：mousemove事件每秒最高可触发上百次，每次触发都调用setState会走React异步批量调度、组件重渲染流程，更新速度跟不上鼠标真实移动速度，快速移动时状态必然滞后。
• 边界判断逻辑不全：目前仅校验了x轴坐标范围，没有判断y轴，垂直方向移出元素时也会误判。
• 冗余实现：已经给div绑定了原生onMouseEnter、onMouseLeave事件，浏览器原生的元素命中检测精度远高于手动计算坐标，完全不需要额外监听全局mousemove自己做判断。

方案1（推荐，零延迟） #

直接使用原生的鼠标进入/离开事件，不需要手动计算坐标，浏览器原生判定不会因为鼠标移动过快漏判：

const handleMouseEnter = () => {
  console.log(true);
};
const handleMouseLeave = () => {
  console.log(false);
};

// 直接绑定到目标div即可
<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} />

方案2（需要实时获取鼠标位置时使用） #

如果你除了边界判断外，还需要拿鼠标位置做跟随动画等其他效果，做3处修改即可：

1. 修正事件监听清理逻辑，组件卸载时移除已注册的mousemove监听
2. 用useRef代替useState存储鼠标位置，ref更新是同步的，不会触发高频重渲染，没有调度延迟
3. 边界判断同时校验x、y轴范围
   完整实现代码：

import { useRef, useEffect } from 'react';

export default function App() {
  // 用ref存鼠标位置，同步更新无延迟
  const mousePosition = useRef({ x: 0, y: 0 });
  const targetDivRef = useRef(null);

  useEffect(() => {
    const checkIsInBound = () => {
      if (!targetDivRef.current) return false;
      const rect = targetDivRef.current.getBoundingClientRect();
      const { x, y } = mousePosition.current;
      // 同时判断x、y轴是否在范围内
      return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
    };

    const handleMouseMove = (e) => {
      // 直接更新ref，不触发重渲染
      mousePosition.current = {
        x: e.clientX,
        y: e.clientY
      };
      // 实时判定，无需等待状态更新
      console.log(checkIsInBound());
    };

    window.addEventListener('mousemove', handleMouseMove);
    return () => {
      // 修复：移除监听而非重复添加
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);

  return <div ref={targetDivRef} style={{ width: 300, height: 300, background: 'red' }} />;
}

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