Пользовательские хуки в React — это мощная функция, позволяющая извлекать и повторно использовать логику в нескольких компонентах. Они позволяют инкапсулировать сложную логику с отслеживанием состояния, делая ваши компоненты более чистыми и простыми в обслуживании. Вот краткий обзор и пример того, как создавать и использовать собственные перехватчики.

Создание пользовательского хука

Пользовательский хук — это, по сути, функция 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;

Пользовательские перехватчики — отличный способ инкапсулировать логику и совместно использовать функциональность между вашими компонентами простым и удобным в обслуживании способом.