react实现鼠标定位

实现鼠标位置追踪

在React中获取鼠标位置可以通过监听mousemove事件实现。需要创建一个状态来存储坐标，并在组件挂载时添加事件监听器。

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

function MouseTracker() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMouseMove = (e) => {
      setPosition({ x: e.clientX, y: e.clientY });
    };

    window.addEventListener('mousemove', handleMouseMove);
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);

  return (
    <div>
      <p>X: {position.x}, Y: {position.y}</p>
    </div>
  );
}

自定义钩子封装

将鼠标追踪逻辑封装成自定义钩子可以提高代码复用性。创建一个返回鼠标位置的钩子。

function useMousePosition() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const updatePosition = (e) => {
      setPosition({ x: e.clientX, y: e.clientY });
    };

    window.addEventListener('mousemove', updatePosition);
    return () => window.removeEventListener('mousemove', updatePosition);
  }, []);

  return position;
}

// 使用示例
function App() {
  const { x, y } = useMousePosition();
  return <div>Mouse X: {x}, Y: {y}</div>;
}

性能优化版本

对于高频触发的事件，可以使用防抖(debounce)或节流(throttle)技术优化性能。

function useDebouncedMousePosition(delay = 100) {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const timerRef = useRef();

  useEffect(() => {
    const updatePosition = (e) => {
      clearTimeout(timerRef.current);
      timerRef.current = setTimeout(() => {
        setPosition({ x: e.clientX, y: e.clientY });
      }, delay);
    };

    window.addEventListener('mousemove', updatePosition);
    return () => {
      clearTimeout(timerRef.current);
      window.removeEventListener('mousemove', updatePosition);
    };
  }, [delay]);

  return position;
}

元素相对位置计算

如果需要获取鼠标相对于某个元素的坐标，可以使用getBoundingClientRect()方法。

function ElementMouseTracker() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const elementRef = useRef();

  useEffect(() => {
    const handleMouseMove = (e) => {
      const rect = elementRef.current.getBoundingClientRect();
      setPosition({
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
      });
    };

    const element = elementRef.current;
    element.addEventListener('mousemove', handleMouseMove);

    return () => {
      element.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);

  return (
    <div ref={elementRef} style={{ width: '300px', height: '300px', border: '1px solid black' }}>
      <p>Relative X: {position.x}, Y: {position.y}</p>
    </div>
  );
}

鼠标进入/离开检测

结合mouseenter和mouseleave事件可以实现鼠标进出检测功能。

function HoverTracker() {
  const [isHovering, setIsHovering] = useState(false);

  return (
    <div
      onMouseEnter={() => setIsHovering(true)}
      onMouseLeave={() => setIsHovering(false)}
      style={{ padding: '20px', backgroundColor: isHovering ? 'lightblue' : 'white' }}
    >
      {isHovering ? 'Mouse is inside' : 'Mouse is outside'}
    </div>
  );
}