本文旨在探讨并解决react应用中常见的重复性代码模式，特别是针对异步操作的加载状态和错误处理逻辑。通过引入自定义hooks，我们可以有效地抽象这些通用逻辑，显著减少代码冗余，提升组件的可读性、可维护性及复用性，从而构建更清晰、更专业的react应用架构。

在构建复杂的React应用程序时，开发者经常会遇到需要管理异步操作状态的场景，例如数据加载、表单提交或搜索功能。这些操作通常伴随着加载指示器、错误消息显示以及错误消息的自动清除等逻辑。当这些模式在多个组件或同一组件内不同功能中重复出现时，会导致代码冗余、难以维护，并降低开发效率。

识别重复模式

让我们观察一个典型的重复模式，它通常包含以下几个核心要素：

1. 加载状态 (useState): 表示当前操作是否正在进行。
2. 错误消息 (useState): 存储操作失败时显示的错误信息。
3. 错误计时器引用 (useRef): 用于管理错误消息自动清除的定时器。
4. 错误处理函数 ((error: string|null) => void): 负责设置错误消息，并可能进行日志记录。
5. 默认错误显示时长 (number): 定义错误消息自动清除的时间。
6. 定时错误设置函数 ((error: string, seconds: number) => void): 设置错误消息并在指定时间后自动清除。

在实际开发中，这些模式会针对不同的业务逻辑（如加载供应商、加载制造商、搜索部件）被复制粘贴，仅改变变量前缀，如下图所示：

// 加载所有供应商
const [loadingAllVendors, setLoadingAllVendors] = useState(true);
const loadAllVendorsErrorTimeout = useRef(null);
const [loadAllVendorsError, setLoadAllVendorsError] = useState(null);
const handleLoadAllVendorsError = (error: string|null) => { /* ... */ };
const loadAllVendorsErrorTime: number = 6;
const timedLoadAllVendorsError = useCallback((error: string, seconds: number) => { /* ... */ }, []);

// 加载所有制造商
const [loadingAllManufacturers, setLoadingAllManufacturers] = useState(true);
const loadAllManufacturersErrorTimeout = useRef(null);
const [loadAllManufacturersError, setLoadAllManufacturersError] = useState(null);
const handleLoadAllManufacturersError = (error: string|null) => { /* ... */ };
const loadAllManufacturersErrorTime: number = 6;
const timedLoadAllManufacturersError = useCallback((error: string, seconds: number) => { /* ... */ }, []);

// 搜索部件
const [searching, setSearching] = useState(false);
const searchErrorTimeout = useRef(null);
const [searchError, setSearchError] = useState(null);
const handleSearchError = (error: string|null) => { /* ... */ };
const searchErrorTime: number = 6;
const timedSearchError = useCallback((error: string, seconds: number) => { /* ... */ }, []);

这种重复的代码结构正是自定义Hooks的用武之地。

解决方案：自定义Hooks

自定义Hooks是React提供的一种强大的机制，允许我们将组件逻辑（如状态管理和副作用）封装起来并在多个组件之间共享。通过创建一个自定义Hook，我们可以将上述重复的加载和错误处理逻辑抽象为一个可重用的单元。

设计自定义Hook

我们的自定义Hook需要实现以下功能：

• 管理一个布尔类型的加载状态。
• 管理一个字符串类型的错误消息。
• 提供一个设置错误消息的函数。
• 提供一个设置错误消息并在指定时间后自动清除的函数。

我们将这个Hook命名为 useAsyncOperationState。

实现 useAsyncOperationState Hook

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

interface AsyncOperationState {
  isLoading: boolean;
  error: string | null;
  setIsLoading: (loading: boolean) => void;
  handleError: (error: string | null) => void;
  setErrorWithTimeout: (error: string, seconds?: number) => void;
  clearError: () => void;
}

/**
 * 抽象异步操作的加载状态和错误处理逻辑。
 * @param initialLoadingState 初始加载状态，默认为 false。
 * @param defaultErrorDisplaySeconds 错误消息默认显示时长，默认为 5 秒。
 * @returns 包含加载状态、错误信息及相关操作函数的对象。
 */
export function useAsyncOperationState(
  initialLoadingState: boolean = false,
  defaultErrorDisplaySeconds: number = 5
): AsyncOperationState {
  const [isLoading, setIsLoading] = useState(initialLoadingState);
  const [error, setError] = useState(null);
  const errorTimeoutRef = useRef(null);

  // 清除错误消息
  const clearError = useCallback(() => {
    setError(null);
    if (errorTimeoutRef.current) {
      clearTimeout(errorTimeoutRef.current);
      errorTimeoutRef.current = null;
    }
  }, []);

  // 处理错误：设置错误消息并可选地记录
  const handleError = useCallback((err: string | null) => {
    if (err) {
      console.error("Operation Error:", err); // 可以在此处集成日志服务
      setError(err);
    } else {
      clearError();
    }
  }, [clearError]);

  // 设置错误消息并在指定时间后自动清除
  const setErrorWithTimeout = useCallback((
    err: string,
    seconds: number = defaultErrorDisplaySeconds
  ) => {
    handleError(err); // 先设置错误消息
    if (errorTimeoutRef.current) {
      clearTimeout(errorTimeoutRef.current); // 清除之前的定时器
    }
    errorTimeoutRef.current = setTimeout(() => {
      clearError(); // 指定时间后清除错误
    }, seconds * 1000);
  }, [handleError, clearError, defaultErrorDisplaySeconds]);

  // 组件卸载时清除任何待处理的定时器
  useEffect(() => {
    return () => {
      if (errorTimeoutRef.current) {
        clearTimeout(errorTimeoutRef.current);
      }
    };
  }, []);

  return {
    isLoading,
    error,
    setIsLoading,
    handleError,
    setErrorWithTimeout,
    clearError,
  };
}

Hook实现详解：

Peachly AI

Peachly AI是一个一体化的AI广告解决方案，帮助企业创建、定位和优化他们的广告活动。

下载

• useState: 用于管理 isLoading 和 error 这两个可变状态。
• useRef: errorTimeoutRef 用于存储 setTimeout 返回的定时器ID。useRef 的值在组件的整个生命周期中保持不变，并且更新它不会触发组件重新渲染，非常适合存储定时器ID等不影响渲染的值。
• useCallback: 包裹 clearError, handleError 和 setErrorWithTimeout 函数，确保这些函数在依赖项不变的情况下引用稳定，避免不必要的重新创建，这对于性能优化，特别是当这些函数作为子组件的依赖项时非常重要。
• useEffect: 在Hook返回的清理函数中，我们确保组件卸载时清除任何可能存在的定时器，防止内存泄漏。

使用自定义Hook

现在，我们可以用 useAsyncOperationState Hook 来替换组件中那些重复的逻辑。

import React from 'react';
import { useAsyncOperationState } from './useAsyncOperationState'; // 假设Hook文件路径

function MyComponent() {
  // 针对加载所有供应商
  const {
    isLoading: loadingAllVendors,
    error: loadAllVendorsError,
    setIsLoading: setLoadingAllVendors,
    setErrorWithTimeout: setTimedLoadAllVendorsError,
    handleError: handleLoadAllVendorsError // 如果需要即时设置错误且不带定时器
  } = useAsyncOperationState(true, 6); // 初始加载状态为true，默认错误显示6秒

  // 针对加载所有制造商
  const {
    isLoading: loadingAllManufacturers,
    error: loadAllManufacturersError,
    setIsLoading: setLoadingAllManufacturers,
    setErrorWithTimeout: setTimedLoadAllManufacturersError,
    handleError: handleLoadAllManufacturersError
  } = useAsyncOperationState(true, 6); // 初始加载状态为true，默认错误显示6秒

  // 针对搜索部件
  const {
    isLoading: searching,
    error: searchError,
    setIsLoading: setSearching,
    setErrorWithTimeout: setTimedSearchError,
    handleError: handleSearchError
  } = useAsyncOperationState(false, 6); // 初始加载状态为false，默认错误显示6秒

  // 模拟异步操作
  const fetchData = async (operationType: string) => {
    let setIsLoading, setTimedError;
    switch (operationType) {
      case 'vendors':
        setIsLoading = setLoadingAllVendors;
        setTimedError = setTimedLoadAllVendorsError;
        break;
      case 'manufacturers':
        setIsLoading = setLoadingAllManufacturers;
        setTimedError = setTimedLoadAllManufacturersError;
        break;
      case 'search':
        setIsLoading = setSearching;
        setTimedError = setTimedSearchError;
        break;
      default:
        return;
    }

    setIsLoading(true);
    try {
      // 模拟网络请求
      await new Promise(resolve => setTimeout(resolve, 1500));
      if (Math.random() > 0.7) { // 模拟请求失败
        throw new Error(`Failed to load ${operationType}`);
      }
      console.log(`${operationType} loaded successfully.`);
    } catch (err: any) {
      setTimedError(err.message, 10); // 错误消息显示10秒
    } finally {
      setIsLoading(false);
    }
  };

  return (
    

      
异步操作状态管理

      

        
供应商数据
        {loadingAllVendors && 
正在加载供应商...
}
        {loadAllVendorsError && 
错误: {loadAllVendorsError}
}
         fetchData('vendors')} disabled={loadingAllVendors}>
          {loadingAllVendors ? '加载中...' : '加载供应商'}
        
      

      

        
制造商数据
        {loadingAllManufacturers && 
正在加载制造商...
}
        {loadAllManufacturersError && 
错误: {loadAllManufacturersError}
}
         fetchData('manufacturers')} disabled={loadingAllManufacturers}>
          {loadingAllManufacturers ? '加载中...' : '加载制造商'}
        
      

      

        
搜索部件
        {searching && 
正在搜索...
}
        {searchError && 
错误: {searchError}
}
         fetchData('search')} disabled={searching}>
          {searching ? '搜索中...' : '搜索部件'}
        
      
    
  );
}

export default MyComponent;

通过上述示例，可以看到组件内部的代码变得更加简洁和专注于业务逻辑。每个异步操作都通过调用 useAsyncOperationState Hook 来获取其独立的加载和错误管理能力。

自定义Hooks的优势

1. 代码复用性: 彻底消除了重复的加载和错误处理逻辑，使代码更DRY (Don't Repeat Yourself)。
2. 可读性与简洁性: 组件内部的代码更清晰，专注于渲染UI和调用业务逻辑，而不是管理低层状态。
3. 可维护性: 如果需要修改加载或错误处理的逻辑（例如，改变错误消息显示方式或日志记录），只需修改一处（即自定义Hook内部），所有使用该Hook的地方都会自动更新。
4. 逻辑分离: 将状态逻辑从UI组件中分离出来，使得组件更易于理解和测试。
5. 灵活性: 可以根据需要为Hook添加更多参数或返回更多功能，以适应不同的场景。

注意事项与最佳实践

• 命名约定: 自定义Hooks的名称必须以 use 开头（例如 useAsyncOperationState），这是React Hooks的约定，也是Linter识别Hooks的关键。
• 依赖项列表: 在 useCallback 和 useEffect 中正确指定依赖项至关重要，以避免闭包问题和不必要的重新渲染或副作用。
• 过度抽象: 并非所有重复模式都适合抽象为Hook。如果某个模式只在少数几个地方使用且逻辑非常简单，直接编写可能更清晰。过度抽象可能导致代码难以理解。
• 错误处理策略: 示例中的错误处理较为基础，实际应用中可能需要更复杂的策略，如错误边界 (Error Boundaries)、重试机制、全局错误通知等。自定义Hook可以作为这些更高级策略的起点。
• 类型安全: 使用TypeScript可以为Hooks提供强大的类型检查，确保参数和返回值符合预期，增强代码健壮性。

总结

自定义Hooks是React中解决代码复用和逻辑抽象问题的强大工具。通过将常见的异步操作状态管理模式封装到 useAsyncOperationState 这样的Hook中，我们不仅减少了代码冗余，还显著提升了React应用程序的模块化、可读性和可维护性。这使得开发者能够构建更健壮、更专业的React应用，同时保持代码库的整洁和高效。