中文字幕亚洲无线码在线一区,99热这里只有精品免费播放

React自定義Hook：優(yōu)雅管理組件中的異步操作與錯誤狀態(tài)

在react 應(yīng)用開發(fā)中，管理異步操作的加載狀態(tài)和錯誤信息是常見且重復(fù)的任務(wù)。本文將深入探討如何利用自定義hook來抽象和封裝這類重復(fù)邏輯，例如加載狀態(tài)、錯誤提示及其定時(shí)清除機(jī)制，從而顯著提升代碼的可復(fù)用性、可維護(hù)性與組件的整潔度。通過實(shí)例演示，我們將學(xué)習(xí)如何設(shè)計(jì)和實(shí)現(xiàn)一個通用的自定義hook，以簡化組件內(nèi)部的復(fù)雜狀態(tài)管理。

一、理解重復(fù)模式與挑戰(zhàn)

在React組件中，處理數(shù)據(jù)加載、表單提交或任何異步操作時(shí)，我們通常需要維護(hù)以下幾種狀態(tài)：

加載狀態(tài) (Loading State)：一個布爾值，指示操作是否正在進(jìn)行。
錯誤狀態(tài) (Error State)：一個字符串或null，用于存儲操作失敗時(shí)的錯誤信息。
錯誤定時(shí)清除機(jī)制 (Timed Error Clearing)：在顯示錯誤信息一段時(shí)間后自動清除，提升用戶體驗(yàn)。

原始代碼示例清晰地展示了這種重復(fù)模式：

// LOADING ALL VENDORS
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) => { /* ... */ };
const loadAllVendorsErrorTime: number = 6;
const timedLoadAllVendorsError = useCallback((error: string, seconds: number) => { /* ... */ }, []);

// LOADING ALL MANUFACTURERS
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) => { /* ... */ };
const loadAllManufacturersErrorTime: number = 6;
const timedLoadAllManufacturersError = useCallback((error: string, seconds: number) => { /* ... */ }, []);

// SEARCHING PARTS
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) => { /* ... */ };
const searchErrorTime: number = 6;
const timedSearchError = useCallback((error: string, seconds: number) => { /* ... */ }, []);

登錄后復(fù)制

可以看到，每個異步操作都重復(fù)定義了以下六個相似的邏輯塊：

一個 useState 布爾值，如 loadingSomething。
一個 useRef 用于存儲定時(shí)器ID，如 loadSomethingErrorTimeout。
一個 useState 字符串或 null，用于存儲錯誤信息，如 loadSomethingError。
一個處理錯誤的回調(diào)函數(shù)，如 handleSomethingError。
一個表示錯誤顯示時(shí)長的數(shù)字，如 somethingErrorTime。
一個帶有定時(shí)清除功能的錯誤處理函數(shù)，如 timedSomethingError。

這種重復(fù)代碼不僅增加了維護(hù)成本，也使得組件邏輯變得臃腫。

二、自定義Hook：解決方案

React的自定義Hook是解決這類問題的理想方案。自定義Hook本質(zhì)上是一個JavaScript函數(shù)，其名稱以use開頭，并且可以在其中調(diào)用其他Hook（如useState、useEffect、useCallback等）。它允許我們將組件邏輯（特別是狀態(tài)管理邏輯）從組件中提取出來，實(shí)現(xiàn)復(fù)用。

通過自定義Hook，我們可以將上述重復(fù)的加載狀態(tài)、錯誤狀態(tài)及其定時(shí)清除邏輯封裝成一個獨(dú)立的、可復(fù)用的單元。

三、設(shè)計(jì)與實(shí)現(xiàn) useAsyncOperationState Hook

我們將創(chuàng)建一個名為 useAsyncOperationState 的自定義Hook，它將負(fù)責(zé)管理異步操作的加載狀態(tài)、錯誤狀態(tài)以及錯誤信息的定時(shí)清除。

YOYA優(yōu)雅

多模態(tài)AI內(nèi)容創(chuàng)作平臺

106

查看詳情

1. Hook的接口設(shè)計(jì)

useAsyncOperationState Hook將提供以下功能：

isLoading: 當(dāng)前操作是否處于加載狀態(tài)。
error: 當(dāng)前操作的錯誤信息。
setIsLoading(boolean): 設(shè)置加載狀態(tài)的函數(shù)。
setError(string | null): 直接設(shè)置錯誤信息的函數(shù)（提供更多靈活性）。
handleError(string | null): 封裝了 console.error 和 setError 的錯誤處理函數(shù)。
displayTimedError(string, seconds?: number): 在指定時(shí)長后自動清除錯誤信息的函數(shù)。

它還可以接受一個配置對象，用于設(shè)置初始加載狀態(tài)和默認(rèn)的錯誤顯示時(shí)長。

2. Hook的實(shí)現(xiàn)代碼

創(chuàng)建一個名為 useAsyncOperationState.ts (或 .js) 的文件：

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

// 配置接口，用于定制Hook的行為
interface UseAsyncOperationStateConfig {
  initialLoading?: boolean; // 初始加載狀態(tài)，默認(rèn)為 false
  defaultErrorDisplaySeconds?: number; // 默認(rèn)錯誤顯示時(shí)長，默認(rèn)為 6 秒
}

// Hook返回值的接口
interface UseAsyncOperationState {
  isLoading: boolean;
  error: string | null;
  setIsLoading: (loading: boolean) => void;
  setError: (errorMessage: string | null) => void;
  handleError: (errorMessage: string | null) => void;
  displayTimedError: (errorMessage: string, seconds?: number) => void;
}

function useAsyncOperationState(config?: UseAsyncOperationStateConfig): UseAsyncOperationState {
  const {
    initialLoading = false,
    defaultErrorDisplaySeconds = 6,
  } = config || {};

  const [isLoading, setIsLoading] = useState<boolean>(initialLoading);
  const [error, setError] = useState<string | null>(null);
  const errorTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  // 在組件卸載時(shí)清除任何未完成的定時(shí)器，避免內(nèi)存泄漏
  useEffect(() => {
    return () => {
      if (errorTimeoutRef.current) {
        clearTimeout(errorTimeoutRef.current);
      }
    };
  }, []);

  // 通用的錯誤處理函數(shù)，負(fù)責(zé)日志記錄和設(shè)置錯誤狀態(tài)
  const handleError = useCallback((errorMessage: string | null) => {
    if (errorMessage) {
      console.error(errorMessage); // 在控制臺輸出錯誤信息
    }
    setError(errorMessage); // 更新錯誤狀態(tài)
  }, []);

  // 帶有定時(shí)清除功能的錯誤顯示函數(shù)
  const displayTimedError = useCallback((errorMessage: string, seconds?: number) => {
    const displayDuration = seconds ?? defaultErrorDisplaySeconds; // 使用傳入時(shí)長或默認(rèn)時(shí)長
    handleError(errorMessage); // 立即設(shè)置錯誤信息

    // 清除之前的定時(shí)器，確保只有一個定時(shí)器在運(yùn)行
    if (errorTimeoutRef.current) {
      clearTimeout(errorTimeoutRef.current);
    }
    // 設(shè)置新的定時(shí)器，在指定時(shí)間后清除錯誤
    errorTimeoutRef.current = setTimeout(() => {
      setError(null);
    }, displayDuration * 1000);
  }, [handleError, defaultErrorDisplaySeconds]); // 依賴項(xiàng)包括 handleError 和 defaultErrorDisplaySeconds

  return {
    isLoading,
    error,
    setIsLoading,
    setError, // 暴露直接設(shè)置 error 的方法
    handleError,
    displayTimedError,
  };
}

export default useAsyncOperationState;

登錄后復(fù)制

3. 代碼解析

useState: 用于管理 isLoading 和 error 這兩個狀態(tài)。
useRef: errorTimeoutRef 用于存儲 setTimeout 返回的定時(shí)器ID。useRef 在組件重新渲染時(shí)保持引用不變，適合存儲可變值，且不會觸發(fā)組件更新。
useEffect: 在組件卸載時(shí)（return 函數(shù)）清除定時(shí)器，防止內(nèi)存泄漏。
useCallback: 優(yōu)化 handleError 和 displayTimedError 函數(shù)。它們只在依賴項(xiàng)改變時(shí)重新創(chuàng)建，避免不必要的子組件渲染。
配置對象: 允許調(diào)用者通過 initialLoading 和 defaultErrorDisplaySeconds 定制Hook的初始行為。

四、在組件中使用自定義Hook

現(xiàn)在，我們可以將組件中重復(fù)的邏輯替換為對 useAsyncOperationState Hook的調(diào)用。

import React, { useEffect } from 'react';
import useAsyncOperationState from './useAsyncOperationState'; // 假設(shè)Hook文件路徑

function MyDataComponent() {
  // 使用Hook管理加載所有供應(yīng)商的狀態(tài)和錯誤
  const {
    isLoading: loadingAllVendors,
    error: loadAllVendorsError,
    setIsLoading: setLoadingAllVendors,
    displayTimedError: displayTimedLoadAllVendorsError,
  } = useAsyncOperationState({ initialLoading: true, defaultErrorDisplaySeconds: 6 });

  // 使用Hook管理加載所有制造商的狀態(tài)和錯誤
  const {
    isLoading: loadingAllManufacturers,
    error: loadAllManufacturersError,
    setIsLoading: setLoadingAllManufacturers,
    displayTimedError: displayTimedLoadAllManufacturersError,
  } = useAsyncOperationState({ initialLoading: true, defaultErrorDisplaySeconds: 6 });

  // 使用Hook管理部件搜索的狀態(tài)和錯誤
  const {
    isLoading: searching,
    error: searchError,
    setIsLoading: setSearching,
    displayTimedError: displayTimedSearchError,
  } = useAsyncOperationState({ initialLoading: false, defaultErrorDisplaySeconds: 6 });

  // 示例：加載供應(yīng)商數(shù)據(jù)
  useEffect(() => {
    const fetchVendors = async () => {
      setLoadingAllVendors(true); // 設(shè)置加載狀態(tài)
      try {
        // 模擬API調(diào)用
        await new Promise(resolve => setTimeout(resolve, 1500));
        // 模擬成功
        console.log("Vendors loaded successfully.");
        // 如果之前有錯誤，這里可以清除
        displayTimedLoadAllVendorsError(null);
      } catch (err: any) {
        // 模擬錯誤，并顯示5秒
        displayTimedLoadAllVendorsError(`Failed to load vendors: ${err.message}`, 5);
      } finally {
        setLoadingAllVendors(false); // 結(jié)束加載狀態(tài)
      }
    };
    fetchVendors();
  }, [setLoadingAllVendors, displayTimedLoadAllVendorsError]); // 依賴項(xiàng)

  // 示例：加載制造商數(shù)據(jù) (類似邏輯)
  useEffect(() => {
    const fetchManufacturers = async () => {
      setLoadingAllManufacturers(true);
      try {
        await new Promise(resolve => setTimeout(resolve, 2000));
        console.log("Manufacturers loaded successfully.");
        displayTimedLoadAllManufacturersError(null);
      } catch (err: any) {
        displayTimedLoadAllManufacturersError(`Failed to load manufacturers: ${err.message}`);
      } finally {
        setLoadingAllManufacturers(false);
      }
    };
    fetchManufacturers();
  }, [setLoadingAllManufacturers, displayTimedLoadAllManufacturersError]);

  // 示例：搜索部件 (類似邏輯)
  const handleSearch = 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.`);
      displayTimedSearchError(null);
    } catch (err: any) {
      displayTimedSearchError(`Search error: ${err.message}`, 7);
    } finally {
      setSearching(false);
    }
  };

  return (
    <div>
      <h1>數(shù)據(jù)管理示例</h1>

      <section>
        <h2>供應(yīng)商數(shù)據(jù)</h2>
        {loadingAllVendors && <p>正在加載供應(yīng)商...</p>}
        {loadAllVendorsError && <p style={{ color: 'red' }}>錯誤: {loadAllVendorsError}</p>}
        {!loadingAllVendors && !loadAllVendorsError && <p>供應(yīng)商數(shù)據(jù)已加載。</p>}
      </section>

      <section>
        <h2>制造商數(shù)據(jù)</h2>
        {loadingAllManufacturers && <p>正在加載制造商...</p>}
        {loadAllManufacturersError && <p style={{ color: 'red' }}>錯誤: {loadAllManufacturersError}</p>}
        {!loadingAllManufacturers && !loadAllManufacturersError && <p>制造商數(shù)據(jù)已加載。</p>}
      </section>

      <section>
        <h2>部件搜索</h2>
        <input type="text" placeholder="輸入搜索內(nèi)容" onChange={(e) => handleSearch(e.target.value)} />
        <button onClick={() => handleSearch("test")}>搜索</button>
        <button onClick={() => handleSearch("error")}>模擬搜索錯誤</button>
        {searching && <p>正在搜索...</p>}
        {searchError && <p style={{ color: 'red' }}>搜索錯誤: {searchError}</p>}
        {!searching && !searchError && <p>等待搜索。</p>}
      </section>
    </div>
  );
}

export default MyDataComponent;

登錄后復(fù)制

通過上述改造，原始組件中大量的重復(fù)狀態(tài)和邏輯被抽象到了 useAsyncOperationState Hook中。組件內(nèi)部現(xiàn)在只關(guān)注如何使用這些狀態(tài)和函數(shù)，而不再關(guān)心它們的具體實(shí)現(xiàn)細(xì)節(jié)。

五、注意事項(xiàng)與最佳實(shí)踐

命名約定: 自定義Hook必須以 use 開頭，這是React識別Hook的關(guān)鍵。
依賴項(xiàng)管理: 在 useCallback 和 useEffect 中正確指定依賴項(xiàng)至關(guān)重要，以避免不必要的函數(shù)重新創(chuàng)建或效果重復(fù)執(zhí)行，同時(shí)防止閉包陷阱。
通用性與靈活性: 設(shè)計(jì)Hook時(shí)，應(yīng)考慮其通用性。通過配置對象 (config) 或參數(shù)，可以使Hook適應(yīng)不同的使用場景，例如不同的初始狀態(tài)或默認(rèn)時(shí)長。
TypeScript支持: 使用TypeScript可以為Hook提供類型定義，增強(qiáng)代碼的可讀性和健壯性，減少潛在的類型錯誤。
避免過度抽象: 并非所有重復(fù)代碼都適合抽象為Hook。如果邏輯過于簡單或特定，抽象可能會增加不必要的復(fù)雜性。
測試: 為自定義Hook編寫單元測試，確保其行為符合