抽象React重复代码模式为可复用 Hook-js教程-PHP中文网

抽象React重复代码模式为可复用 Hook

DDD

发布： 2025-10-17 11:54:01

原创

768人浏览过

抽象react重复代码模式为可复用 hook

本文旨在介绍如何将 React 代码中常见的、具有重复模式的状态管理和错误处理逻辑抽象成一个可复用的自定义 Hook。通过自定义 Hook，可以显著减少代码冗余，提高代码的可维护性和可读性，从而提升开发效率。

React 开发中，经常会遇到一些具有相似逻辑的代码块，例如：加载状态管理、错误状态管理以及定时清除错误信息等。如果这些逻辑在多个组件中重复出现，会导致代码冗余，难以维护。为了解决这个问题，我们可以将这些重复的逻辑抽象成一个可复用的自定义 Hook。

自定义 Hook 的优势

使用自定义 Hook 可以带来以下优势：

代码复用： 将重复的逻辑封装成 Hook，可以在多个组件中复用，减少代码冗余。
提高可读性： 将复杂的逻辑封装在 Hook 内部，使组件代码更加简洁易懂。
易于维护： 当需要修改或优化 Hook 的逻辑时，只需要修改 Hook 本身，而不需要修改所有使用该 Hook 的组件。

实现可复用状态管理和错误处理 Hook

观察问题中提供的代码片段，可以发现以下几个共同的模式：

一个 boolean 类型的 useState 用于表示加载状态（例如 loadingAllVendors）。
一个 useRef 用于存储定时器 ID（例如 loadAllVendorsErrorTimeout）。
一个 string 或 null 类型的 useState 用于存储错误信息（例如 loadAllVendorsError）。
一个处理错误信息的函数（例如 handleLoadAllVendorsError）。
一个数值常量，表示错误信息显示的时间（例如 loadAllVendorsErrorTime）。
一个 useCallback 函数，用于设置错误信息并启动定时器清除错误信息（例如 timedLoadAllVendorsError）。

基于这些模式，我们可以创建一个名为 useLoadingError 的自定义 Hook，该 Hook 接收一个默认的超时时间作为参数，并返回状态、处理函数和更新函数。

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

113

查看详情

import { useState, useRef, useCallback } from 'react';

interface UseLoadingErrorResult {
  isLoading: boolean;
  error: string | null;
  handleError: (error: string | null) => void;
  timedError: (error: string, seconds: number) => void;
  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
}

function useLoadingError(defaultTimeout: number = 6): UseLoadingErrorResult {
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const errorTimeout = useRef<NodeJS.Timeout | null>(null);
  const [error, setError] = useState<string | null>(null);

  const handleError = useCallback((error: string | null) => {
    if (error) console.error(error);
    setError(error);
  }, []);

  const timedError = useCallback((error: string, seconds: number) => {
    handleError(error);
    if (errorTimeout.current) clearTimeout(errorTimeout.current);
    errorTimeout.current = setTimeout(() => {
      setError(null);
    }, seconds * 1000);
  }, [handleError]);

  return { isLoading, error, handleError, timedError, setIsLoading };
}

export default useLoadingError;

登录后复制

如何使用 Hook

使用 useLoadingError Hook 非常简单，只需在组件中调用它，并传入适当的超时时间即可。

import React, { useEffect } from 'react';
import useLoadingError from './useLoadingError';

function MyComponent() {
  const { isLoading: loadingAllVendors, error: loadAllVendorsError, timedError: timedLoadAllVendorsError, setIsLoading: setLoadingAllVendors } = useLoadingError();

  useEffect(() => {
    // 模拟异步加载数据
    setTimeout(() => {
      setLoadingAllVendors(false);
      // 模拟加载失败
      timedLoadAllVendorsError('Failed to load vendors', 6);
    }, 2000);
  }, [timedLoadAllVendorsError, setLoadingAllVendors]);

  return (
    <div>
      {loadingAllVendors && <p>Loading vendors...</p>}
      {loadAllVendorsError && <p style={{ color: 'red' }}>Error: {loadAllVendorsError}</p>}
    </div>
  );
}

export default MyComponent;

登录后复制