自定义hook

一个自定义 Hook 是一个普通的 JavaScript 函数，以 use 开头命名（符合约定）。它可以使用其他的 Hook，也可以包含自己的状态、副作用等。

自定义 Hook 将组件中与特定逻辑相关的代码进行抽离，使这些逻辑能够独立存在并可以在多个组件中重复使用。

以下是一个自定义 Hook，用于追踪页面上的鼠标位置

index.tsx

import { useState, useEffect } from 'react';

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

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

    window.addEventListener('mousemove', handleMouseMove);

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

  return position;
}