Benutzerdefinierte Hooks in React

Benutzerdefinierte Hooks in React sind eine leistungsstarke Funktion, mit der Sie Logik über mehrere Komponenten hinweg extrahieren und wiederverwenden können. Sie ermöglichen es Ihnen, komplexe Zustandslogik zu kapseln, wodurch Ihre Komponenten sauberer und einfacher zu warten sind. Hier finden Sie einen kurzen Überblick und ein Beispiel für die Erstellung und Verwendung benutzerdefinierter Hooks.

Erstellen eines benutzerdefinierten Hooks

Ein benutzerdefinierter Hook ist im Wesentlichen eine JavaScript-Funktion, deren Name mit „use“ beginnt und die möglicherweise andere darin enthaltene Hooks aufruft. Hier ist ein einfaches Beispiel für einen benutzerdefinierten Hook, der einen Zähler verwaltet:

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;

Verwenden des benutzerdefinierten Hooks

Sie können den useCounter-Hook in jeder Funktionskomponente verwenden:

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

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

    return (
        <div>
            <h1>Count: {count}</h1>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>Decrement</button>
            <button onClick={reset}>Reset</button>
        </div>
    );
}

export default CounterComponent;

Wichtige Punkte

1. Namenskonvention: Beginnen Sie den Namen des benutzerdefinierten Hooks immer mit „use“, um der React-Konvention zu folgen.
2. Wiederverwendbarkeit: Benutzerdefinierte Hooks können über mehrere Komponenten hinweg wiederverwendet werden, wodurch DRY-Code (Don't Repeat Yourself) gefördert wird.
3. Statusverwaltung: Sie können den Status verwalten, Nebenwirkungen ausführen und andere Hooks innerhalb eines benutzerdefinierten Hooks nutzen.

Erweitertes Beispiel: Daten abrufen

Hier ist ein erweiterter benutzerdefinierter Hook zum Abrufen von Daten:

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;

Verwendung

Sie können den useFetch-Hook in einer Komponente verwenden, um Daten abzurufen:

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

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

    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error: {error.message}</p>;

    return (
        <div>
            <h1>Data:</h1>
            <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}