React自定义Hook：复用异步与错误处理

本文深入探讨了React自定义Hook在复用异步操作和错误处理逻辑中的应用。在React应用开发中，管理异步操作的加载状态、错误信息以及定时清除等重复模式是常见的挑战。通过识别这些模式，并将其封装成可重用的自定义Hook，例如`useAsyncOperationState`，能够显著提升代码的可读性、可维护性和开发效率。文章详细分析了如何使用`useState`、`useRef`和`useCallback`等Hook组合实现异步状态管理，并展示了如何通过自定义Hook来避免代码冗余，实现UI逻辑与状态管理的清晰分离，最终构建出更健壮、可扩展的React应用。掌握自定义Hook的使用是React进阶的关键，也是提升前端开发效率的重要手段。

本文将探讨如何在React应用中，通过自定义Hook有效抽象和复用重复的异步操作及错误处理模式。我们将分析常见的加载状态、错误信息及定时清除逻辑，并展示如何将其封装成一个可重用的Hook，从而提升代码的可读性、可维护性与开发效率。

在构建复杂的React应用时，开发者经常会遇到管理异步操作（如数据加载、表单提交）及其伴随状态（如加载中、错误信息）的重复模式。这些模式通常涉及useState、useRef和useCallback等Hook的组合使用。当这些逻辑在多个组件或同一组件的不同部分重复出现时，代码会变得冗长、难以维护且容易出错。

识别重复模式

让我们先回顾一个典型的重复代码模式，它用于管理一个异步操作的加载状态和错误信息，并实现错误信息的定时自动清除：

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

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

// 搜索部件
const [searching, setSearching] = useState<boolean>(false);
const searchErrorTimeout = useRef<NodeJS.Timeout|null>(null);
const [searchError, setSearchError] = useState<string|null>(null);
const handleSearchError = (error: string|null) => {
  if (error) console.error(error);
  setSearchError(error);
};
const searchErrorTime: number = 6;
const timedSearchError = useCallback((error: string, seconds: number) => {
  handleSearchError(error);
  if (searchErrorTimeout.current) clearTimeout(searchErrorTimeout.current);
  searchErrorTimeout.current = setTimeout(() => {
    setSearchError(null);
  }, seconds * 1000);
}, []);

上述代码段中，每个逻辑块都包含了以下六个相似的模式：

1. 一个表示加载状态的boolean类型useState。
2. 一个用于存储定时器ID的NodeJS.Timeout | null类型useRef。
3. 一个表示错误信息的string | null类型useState。
4. 一个处理错误信息并更新状态的函数。
5. 一个默认的错误显示时间常量。
6. 一个接收错误信息和持续时间，并实现定时清除错误信息的useCallback函数。

这种重复性是使用自定义Hook进行抽象的绝佳信号。

自定义Hook的解决方案

自定义Hook是React中一种强大的机制，允许开发者将组件逻辑提取到可重用的函数中。通过将上述重复的加载和错误处理逻辑封装到一个自定义Hook中，我们可以显著提高代码的复用性、可读性和可维护性。

我们将创建一个名为useAsyncOperationState的自定义Hook，它将封装加载状态、错误状态及其相关的处理逻辑。

实现 useAsyncOperationState Hook

这个Hook需要管理加载布尔值、错误字符串以及定时清除错误的逻辑。它将接收初始加载状态和默认的错误显示时间作为参数，并返回所有相关的状态和函数。

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

/**
 * 异步操作状态管理Hook的返回接口。
 */
interface AsyncOperationState {
  isLoading: boolean;
  error: string | null;
  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
  handleError: (error: string | null) => void;
  timedError: (error: string, seconds?: number) => void;
  clearError: () => void;
}

/**
 * useAsyncOperationState
 *
 * 一个自定义Hook，用于抽象和管理异步操作的加载状态、错误状态及定时清除错误逻辑。
 *
 * @param initialLoading 初始加载状态，默认为 false。
 * @param defaultErrorTime 错误信息默认显示时间（秒），默认为 6 秒。
 * @returns 包含加载状态、错误信息及其处理函数的对象。
 */
function useAsyncOperationState(
  initialLoading: boolean = false,
  defaultErrorTime: number = 6
): AsyncOperationState {
  const [isLoading, setIsLoading] = useState<boolean>(initialLoading);
  const [error, setError] = useState<string | null>(null);
  const errorTimeoutRef = useRef<NodeJS.Timeout | null>(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(err);
    }
    setError(err);
  }, []);

  // 设置定时清除错误信息的函数
  const timedError = useCallback((err: string, seconds?: number) => {
    handleError(err); // 首先设置错误信息
    const duration = seconds !== undefined ? seconds : defaultErrorTime;

    // 如果存在旧的定时器，先清除
    if (errorTimeoutRef.current) {
      clearTimeout(errorTimeoutRef.current);
    }

    // 设置新的定时器
    errorTimeoutRef.current = setTimeout(() => {
      setError(null);
      errorTimeoutRef.current = null; // 清除后将引用置空
    }, duration * 1000);
  }, [handleError, defaultErrorTime]); // 依赖 handleError 和 defaultErrorTime

  // 组件卸载时清除任何未完成的定时器，防止内存泄漏
  useEffect(() => {
    return () => {
      if (errorTimeoutRef.current) {
        clearTimeout(errorTimeoutRef.current);
      }
    };
  }, []);

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

export default useAsyncOperationState;

使用自定义Hook重构代码

现在，我们可以使用useAsyncOperationState Hook来替换原先重复的逻辑。

import React from 'react';
import useAsyncOperationState from './useAsyncOperationState'; // 假设 Hook 文件名为 useAsyncOperationState.ts

function MyComponent() {
  // 加载所有供应商
  const {
    isLoading: loadingAllVendors,
    error: loadAllVendorsError,
    setIsLoading: setLoadingAllVendors,
    handleError: handleLoadAllVendorsError,
    timedError: timedLoadAllVendorsError,
  } = useAsyncOperationState(true); // 初始加载状态为 true

  // 加载所有制造商
  const {
    isLoading: loadingAllManufacturers,
    error: loadAllManufacturersError,
    setIsLoading: setLoadingAllManufacturers,
    handleError: handleLoadAllManufacturersError,
    timedError: timedLoadAllManufacturersError,
  } = useAsyncOperationState(true); // 初始加载状态为 true

  // 搜索部件
  const {
    isLoading: searching,
    error: searchError,
    setIsLoading: setSearching,
    handleError: handleSearchError,
    timedError: timedSearchError,
  } = useAsyncOperationState(false); // 初始加载状态为 false

  // 示例：模拟加载供应商数据
  const fetchVendors = async () => {
    setLoadingAllVendors(true);
    try {
      // 模拟 API 调用
      await new Promise(resolve => setTimeout(resolve, 1500));
      // 假设这里发生了错误
      if (Math.random() > 0.5) {
        throw new Error('Failed to load vendors!');
      }
      console.log('Vendors loaded successfully!');
      handleLoadAllVendorsError(null); // 清除错误
    } catch (err: any) {
      timedLoadAllVendorsError(err.message || '未知错误', 5); // 错误显示 5 秒
    } finally {
      setLoadingAllVendors(false);
    }
  };

  // 示例：模拟搜索部件
  const performSearch = async (query: string) => {
    setSearching(true);
    try {
      await new Promise(resolve => setTimeout(resolve, 1000));
      if (query === 'error') {
        throw new Error('Search failed for "error" query!');
      }
      console.log(`Searching for "${query}" successful!`);
      handleSearchError(null);
    } catch (err: any) {
      timedSearchError(err.message || '搜索失败');
    } finally {
      setSearching(false);
    }
  };

  return (
    <div>
      <h1>异步操作状态管理示例</h1>

      <section>
        <h2>供应商数据</h2>
        {loadingAllVendors && <p>正在加载供应商...</p>}
        {loadAllVendorsError && <p style={{ color: 'red' }}>错误: {loadAllVendorsError}</p>}
        <button onClick={fetchVendors} disabled={loadingAllVendors}>
          {loadingAllVendors ? '加载中...' : '加载供应商'}
        </button>
      </section>

      <section>
        <h2>制造商数据</h2>
        {loadingAllManufacturers && <p>正在加载制造商...</p>}
        {loadAllManufacturersError && <p style={{ color: 'red' }}>错误: {loadAllManufacturersError}</p>}
        <button onClick={() => { /* 模拟加载制造商 */ }} disabled={loadingAllManufacturers}>
          {loadingAllManufacturers ? '加载中...' : '加载制造商'}
        </button>
      </section>

      <section>
        <h2>部件搜索</h2>
        {searching && <p>正在搜索...</p>}
        {searchError && <p style={{ color: 'red' }}>错误: {searchError}</p>}
        &lt;input type=&quot;text&quot; placeholder=&quot;输入搜索词&quot; /&gt;
        <button onClick={() => performSearch('example')} disabled={searching}>
          {searching ? '搜索中...' : '搜索部件'}
        </button>
        <button onClick={() => performSearch('error')} disabled={searching}>
          {searching ? '搜索中...' : '模拟搜索错误'}
        </button>
      </section>
    </div>
  );
}

export default MyComponent;

通过使用useAsyncOperationState，我们成功地将重复的逻辑抽象出来，使得MyComponent中的代码变得更加简洁和专注于业务逻辑。

优势与注意事项

优势

• 代码复用性： 将公共逻辑提取到单个Hook中，避免了在多个地方复制代码。
• 可读性： 组件内部的代码更加简洁，易于理解其核心功能，而无需关注状态管理的细节。
• 可维护性： 当需要修改或优化异步操作的状态管理逻辑时，只需在一个地方（自定义Hook内部）进行更改。
• 分离关注点： 将UI逻辑和状态管理逻辑清晰地分离，提升了代码的组织结构。
• 测试性： 自定义Hook可以独立于组件进行测试，简化了测试过程。

注意事项

• Hook命名约定： 自定义Hook的名称必须以use开头（例如useAsyncOperationState），这是React Hook的命名约定，也是ESLint等工具识别Hook的依据。
• Hook的规则： 只能在React函数组件的顶层或自定义Hook中调用Hook，不能在循环、条件语句或嵌套函数中调用。
• 依赖数组： 在useCallback和useEffect中使用正确的依赖数组至关重要，以避免不必要的重新渲染或过期闭包问题。在timedError中，handleError和defaultErrorTime是其依赖项。
• 内存泄漏： 对于涉及定时器或订阅的Hook，务必在组件卸载时进行清理（使用useEffect的返回函数），以防止内存泄漏。

总结

自定义Hook是React中一个非常强大的特性，它使得抽象和复用组件逻辑变得前所未有的简单。通过将重复的异步操作和错误处理模式封装到useAsyncOperationState这样的自定义Hook中，我们不仅减少了代码量，还极大地提升了应用的可维护性和可扩展性。掌握自定义Hook的使用，是编写高效、整洁React代码的关键一步。

以上就是《React自定义Hook：复用异步与错误处理》的详细内容，更多关于的资料请关注golang学习网公众号！