React 中的自訂 Hook 是一項強大的功能，可讓您跨多個元件提取和重複使用邏輯。它們使您能夠封裝複雜的狀態邏輯，使您的元件更乾淨且更易於維護。以下是如何建立和使用自訂掛鉤的快速概述和範例。

建立自訂鉤子

自訂鉤子本質上是一個 JavaScript 函數，其名稱以 use 開頭，並且可以呼叫其中的其他鉤子。這是管理計數器的自訂掛鉤的簡單範例：

import { useState } from 'react';

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

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

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

export default useCounter;

使用自訂掛鉤

您可以在任何功能元件中使用 useCounter 鉤子：

import React from 'react';
import useCounter from './useCounter';

function CounterComponent() {
    const { count, increment, decrement, reset } = useCounter(0);

    return (
        

            
Count: {count}
            Increment
            Decrement
            Reset
        
    );
}

export default CounterComponent;

重點

1. 命名約定：自訂鉤子的名稱始終以 use 開頭，以遵循 React 的約定。
2. 可重複使用性：自訂掛鉤可以在多個元件中重複使用，促進 DRY（不要重複自己）程式碼。
3. 狀態管理：您可以管理狀態、執行副作用以及利用自訂掛鉤中的其他掛鉤。

進階範例：取得數據

這是用於獲取資料的更高級的自訂掛鉤：

import { useState, useEffect } from 'react';

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

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(url);
                if (!response.ok) throw new Error('Network response was not ok');
                const result = await response.json();
                setData(result);
            } catch (error) {
                setError(error);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, [url]);

    return { data, loading, error };
}

export default useFetch;

用法

您可以在元件中使用useFetch鉤子來取得資料：

import React from 'react';
import useFetch from './useFetch';

function DataFetchingComponent() {
    const { data, loading, error } = useFetch('https://api.example.com/data');

    if (loading) return 
Loading...
;
    if (error) return 
Error: {error.message}
;

    return (
        

            
Data:
            
{JSON.stringify(data, null, 2)}
        
    );
}

export default DataFetchingComponent;

自訂掛鉤是以乾淨且可維護的方式封裝邏輯並在元件之間共用功能的好方法。