React 中的自定义 Hook：跨组件重用逻辑-js教程-PHP中文网

Custom Hooks in React: Reusing Logic Across Components

React 中的自定义 Hook

自定义 Hook 是一个 JavaScript 函数，允许您在 React 应用程序中的多个组件之间重用有状态逻辑。自定义钩子是一个强大的工具，用于封装可在组件之间共享的逻辑，保持组件清洁并提高代码可重用性。

自定义钩子以 use 为前缀，遵循 React 的约定，并且可以在其中使用其他钩子（例如 useState、useEffect、useContext 等）。

为什么使用自定义 Hook？

自定义挂钩有几个好处：

代码可重用性：它们允许您从组件中提取可重用的逻辑。如果您有需要在多个组件之间共享的逻辑，您可以将其提取到自定义挂钩中。
关注点分离：通过将复杂的逻辑从组件中移出，自定义挂钩可以帮助组件更加专注于渲染 UI，从而提高可读性和可维护性。
抽象：它们提供了一种抽象复杂逻辑的方法，使您的组件更清晰、更易于理解。

如何创建自定义挂钩

要创建自定义挂钩，请按照以下步骤操作：

编写一个函数：该函数应包含您要重用的逻辑。
使用内置钩子：在函数内部，您可以使用其他 React 钩子，例如 useState、useEffect 或任何其他钩子来管理状态或副作用。
返回值：从要在组件中使用的自定义挂钩返回必要的状态、函数或值。

自定义 Hook 的基本示例

这是管理鼠标位置的自定义挂钩的简单示例：

import { useState, useEffect } from 'react';

// Custom Hook to track mouse position
const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

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

    // Add event listener for mouse movement
    window.addEventListener('mousemove', updatePosition);

    // Clean up the event listener
    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []);

  return position;
};

export default useMousePosition;

登录后复制

说明：

自定义钩子 useMousePosition 跟踪鼠标在屏幕上的位置。
它使用 useState 来管理鼠标坐标（x 和 y）的状态。
它使用 useEffect 为 mousemove 事件添加事件监听器，并在卸载组件或重新运行效果时清理它。
钩子返回鼠标位置（x和y），任何导入并调用useMousePosition的组件都可以使用该位置。

在组件中使用自定义 Hook

现在，您可以在任何组件中使用此自定义钩子来访问鼠标位置：

import { useState, useEffect } from 'react';

// Custom Hook to track mouse position
const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

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

    // Add event listener for mouse movement
    window.addEventListener('mousemove', updatePosition);

    // Clean up the event listener
    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []);

  return position;
};

export default useMousePosition;

登录后复制

说明：

MouseTracker 组件使用 useMousePosition 自定义挂钩来访问鼠标位置。
每当鼠标移动时，位置都会更新，并且组件会重新渲染以显示新坐标。

高级示例：用于表单处理的自定义挂钩

您可以为更复杂的逻辑创建自定义挂钩，例如表单处理。

import React from 'react';
import useMousePosition from './useMousePosition';

const MouseTracker = () => {
  const position = useMousePosition();  // Using the custom hook

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

export default MouseTracker;

登录后复制

说明：

useFormInput 钩子接受一个初始值并返回输入值和一个handleChange 函数。
该钩子可以在任何表单组件中使用来管理表单输入状态。

在组件中使用 Form Hook

现在，您可以在表单组件中使用 useFormInput：

import { useState } from 'react';

// Custom Hook to handle form input
const useFormInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return {
    value,
    onChange: handleChange,
  };
};

export default useFormInput;

登录后复制

说明：

useFormInput 挂钩用于处理姓名和电子邮件输入的状态和更改事件。
handleSubmit 函数在提交表单时记录表单值。

自定义 Hook 规则

自定义钩子遵循与 React 钩子相同的规则：

仅在顶层调用钩子：不要有条件或在循环内调用钩子。
仅从 React 函数调用钩子：自定义钩子只能从 React 功能组件或其他自定义钩子调用。
以 use 开头：自定义挂钩必须以 use 前缀开头，以区别于常规 JavaScript 函数。

使用自定义 Hook 来产生副作用

自定义挂钩也可用于处理副作用，例如获取数据。

import React from 'react';
import useFormInput from './useFormInput';

const MyForm = () => {
  const nameInput = useFormInput('');
  const emailInput = useFormInput('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Name:', nameInput.value);
    console.log('Email:', emailInput.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input type="text" {...nameInput} />
      </div>
      <div>
        <label>Email:</label>
        <input type="email" {...emailInput} />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

登录后复制

说明：

useFetchData 是一个从 API 获取数据的自定义钩子。
它管理数据、isLoading 和错误状态。
该钩子可在任何需要从 API 获取数据的组件中重用。

在组件中使用获取数据钩子

以下是如何在组件中使用 useFetchData 挂钩：

import { useState, useEffect } from 'react';

// Custom Hook to track mouse position
const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

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

    // Add event listener for mouse movement
    window.addEventListener('mousemove', updatePosition);

    // Clean up the event listener
    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []);

  return position;
};

export default useMousePosition;

登录后复制