在 React 中建立自訂 Hook 的最佳技巧

React 的自訂 Hooks 是從元件中移除可重複使用功能的有效工具。它們支援程式碼中的 DRY（不要重複）、可維護性和整潔性。但開發有用的自訂鉤子需要牢牢掌握 React 的基本想法和推薦程式。在這篇文章中，我們將討論在 React 中開發自訂鉤子的一些最佳策略，並舉例說明如何有效地應用它們。

1。了解 Hooks 的用途

在深入建立自訂掛鉤之前，了解什麼是掛鉤以及它們存在的原因至關重要。 Hooks 可讓您在功能元件中使用狀態和其他 React 功能。自訂掛鉤可讓您將元件邏輯提取到可重複使用的函數中，這些函數可以在多個元件之間共用。

範例：基本自訂 Hook

這是管理計數器的自訂掛鉤的簡單範例：

import { useState } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(prevCount => prevCount + 1);
  const decrement = () => setCount(prevCount => prevCount - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

// Usage in a component
// const { count, increment, decrement, reset } = useCounter(10);

2。遵循命名約定

React 有一個約定，自訂掛鉤應以「use」一詞開頭。這不僅僅是一種風格選擇——React 依賴這個約定來自動套用鉤子規則（例如不有條件地呼叫它們）。

提示：始終使用 use 來啟動自訂鉤子，以確保 React 知道它是一個鉤子。

3。保持鉤子純淨

自訂鉤子應該是純函數，這意味著它們不應該有修改全域變數或直接與外部系統互動等副作用。如果需要副作用，例如進行 API 調用，則應使用內建 React 鉤子（如 useEffect）在鉤子內處理它們。

範例：具有副作用的 Hook

import { useState, useEffect } from 'react';

function useFetchData(url) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, error, loading };
}

// Usage in a component
// const { data, error, loading } = useFetchData('https://api.example.com/data');

4。利用現有的 Hook
在建立自訂掛鉤時，請確保利用現有的 React 掛鉤，例如 useState、useEffect、useContext 等。這確保您的自訂鉤子是可組合的，並且可以與 React 的內建功能無縫協作。

範例：組合 Hook

這是一個結合 useState 和 useEffect 來管理本地儲存的自訂鉤子：

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.error(error);
    }
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
}

// Usage in a component
// const [name, setName] = useLocalStorage('name', 'John Doe');

5。可重複使用性和組合

建立自訂掛鉤的主要原因之一是提高可重複使用性。一個好的自訂鉤子應該能夠跨多個組件使用，而不需要進行大量修改。此外，鉤子可以組合在一起以建立更複雜的邏輯。

提示：專注於提取可能在多個元件之間重用的邏輯。

6。記錄你的 Hook

像任何程式碼一樣，您的自訂掛鉤應該有詳細的文件記錄。包括解釋該鉤子的作用、它接受什麼參數、它返回什麼以及它可能產生的任何副作用的註釋。這使其他開發人員（以及未來的您）更容易正確理解和使用您的鉤子。

範例：記錄 Hook

/**
 * useCounter
 * 
 * A custom hook to manage a counter.
 *
 * @param {number} initialValue - Initial value of the counter.
 * @returns {object} { count, increment, decrement, reset } - Current count and functions to modify it.
 */
function useCounter(initialValue = 0) {
  // Implementation
}

7。測試你的 Hook

測試對於確保您的自訂掛鉤如預期運作至關重要。使用 React-hooks-testing-library 或 Jest 等測試庫為您的鉤子編寫單元測試。

範例：Hook 的基本檢定

import { renderHook, act } from '@testing-library/react-hooks';
import useCounter from './useCounter';

test('should increment and decrement counter', () => {
  const { result } = renderHook(() => useCounter(0));

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);

  act(() => {
    result.current.decrement();
  });

  expect(result.current.count).toBe(0);
});

在整個應用程式中抽象化和重複使用功能的有效技術是在 React 中使用自訂掛鉤。您可以建立可靠且可維護的鉤子，透過理解鉤子的用途、遵守命名約定、保持鉤子純淨、利用現有鉤子、保證可重用性、文件化和測試來改進您的 React 開發過程。

以上是在 React 中建立自訂 Hook 的最佳技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！