如何使用useState更新鼠标位置

import React, { useState } from 'react';

const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

const handleMouseMove = (event) => {
  const { clientX, clientY } = event;
  setMousePosition({ x: clientX, y: clientY });
};

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

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

const MousePosition = () => {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    const { clientX, clientY } = event;
    setMousePosition({ x: clientX, y: clientY });
  };

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

  return (
    <div>
      <p>鼠标位置：{mousePosition.x}, {mousePosition.y}</p>
    </div>
  );
};

export default MousePosition;