React中抽象重复逻辑：利用自定义Hook实现异步操作与错误处理的复用

本文将探讨如何在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>}
<input type="text" placeholder="输入搜索词" />
<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代码的关键一步。