如何在React中创建自定义Hooks

在React中创建自定义Hooks非常简单。自定义Hooks是一种让你在组件之间复用状态逻辑的代码片段，而不会增加额外的渲染开销或破坏组件的封装性。

以下是如何创建自定义Hooks的步骤：

1. 命名约定：自定义Hooks的名称应该以use开头，这是一个约定俗成的命名规则，以便让其他人更容易地识别出这是一个Hook。

2. 编写Hook：在你的代码中创建一个函数，该函数接受参数并返回React组件可以使用的状态、副作用等。你可以在这个函数内部使用React的其他Hooks，如useState、useEffect等。

3. 使用Hook：在你的React组件中，像使用其他Hooks一样使用你的自定义Hook。将Hook的返回值用于你的组件逻辑中。

下面是一个简单的自定义Hook示例，它用于追踪鼠标的位置：

import { useState, useEffect } from 'react';

// 自定义Hook: useMousePosition
function useMousePosition() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

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

    document.addEventListener('mousemove&