Best Practices für benutzerdefinierte React-Hooks: Mit Beispielanwendungsfällen

Schauen Sie sich den Originalbeitrag https://devaradise.com/react-custom-hooks-best-practices/ an, um ihn mit dem Inhaltsverzeichnis zu lesen

Wenn Sie ein React-Entwickler sind, sind Sie wahrscheinlich auf eine Situation gestoßen, in der Sie Logik komponentenübergreifend teilen müssen. In diesem Beitrag untersuchen wir, was benutzerdefinierte Hooks sind, wann man sie verwendet, bewährte Methoden zum Schreiben und einige häufige Anwendungsfälle, die Ihre React-Anwendungen sauberer und wartbarer machen.

Ähnliche Beiträge zu React

1. So starten und richten Sie ein React-Projekt im Jahr 2024 ein
2. Funktionskomponente mit Haken reagieren
3. Best Practices für bedingtes React-Rendering (falls sonst)

Was ist ein benutzerdefinierter Hook in React?

Ein benutzerdefinierter Hook ist eine wiederverwendbare Funktion mit zustandsbehafteter Logik, die von allen React-Komponenten gemeinsam genutzt werden kann. Sie beginnen mit der Verwendung des Präfixes und können andere darin enthaltene Hooks aufrufen, wodurch es möglich wird, komplexe Zustands- und Effektlogik in einfache, wiederverwendbare Funktionen zu abstrahieren.

Benutzerdefinierte React-Hooks eignen sich perfekt für Situationen, in denen Sie Logik zwischen verschiedenen Teilen Ihrer Anwendung teilen müssen, ohne Code zu duplizieren. Dies hält nicht nur Ihre Komponenten sauberer, sondern fördert auch eine modularere Codebasis.

Beachten Sie, dass sich ein benutzerdefinierter Hook von einer regulären wiederverwendbaren Javascript-Funktion unterscheidet. Der benutzerdefinierte Hook ist zustandsbehaftet, was bedeutet, dass Sie den React State mit dem useState-Hook oder anderen integrierten Hooks verwenden sollten.

Wann man benutzerdefinierte Hooks in React verwendet

Benutzerdefinierte Hooks eignen sich hervorragend, wenn Sie zustandsbehaftete Logik komponentenübergreifend wiederverwenden müssen, insbesondere für komplexe Aufgaben wie Datenabruf, Formularverarbeitung und Authentifizierung. Sie vereinfachen Ihren Komponentencode, verbessern die Lesbarkeit und erleichtern Tests und Wartung.

Ein weiterer Hauptanwendungsfall für benutzerdefinierte Hooks besteht darin, dass Sie denselben Code an mehreren Stellen schreiben. Anstatt dieselbe Logik zu kopieren und einzufügen, können Sie sie in einen benutzerdefinierten Hook extrahieren und bei Bedarf wiederverwenden. Dies fördert das DRY-Prinzip (Don't Repeat Yourself) und macht Ihre Codebasis effizienter und weniger fehleranfällig.

Best Practices zum Schreiben benutzerdefinierter Hooks

Beim Erstellen benutzerdefinierter Hooks sind mehrere Best Practices zu beachten, um sicherzustellen, dass sie effektiv und wartbar sind. Hier sind einige wichtige Richtlinien:

1. Beginnen Sie mit der Verwendung

Beginnen Sie den Namen Ihres benutzerdefinierten Hooks immer mit „use“. Dies ist eine Konvention, die anderen React-Entwicklern hilft, diese Funktionen als Hooks zu identifizieren und sicherzustellen, dass die Hook-Regeln korrekt angewendet werden.

2. Halten Sie Haken rein

Stellen Sie sicher, dass Ihre Hooks reine Funktionen sind. Vermeiden Sie Nebenwirkungen direkt in Ihren Haken; Verwalten Sie sie stattdessen mit useEffect oder ähnlichen Hooks.

Nebenwirkungen sind alle Vorgänge oder Verhaltensweisen, die in einer Komponente nach dem Rendern auftreten und sich nicht direkt auf den aktuellen Renderzyklus der Komponente auswirken.

3. Vermeiden Sie unnötige Renderings

Verwenden Sie Memoisierungstechniken wie useMemo oder useCallback, um zu verhindern, dass Ihre Hooks unnötige erneute Renderings verursachen, insbesondere wenn es um teure Berechnungen oder komplexe Statusaktualisierungen geht.

Nutzen Sie integrierte Hooks wie useState, useEffect, useReducer und useCallback, um Status und Nebenwirkungen innerhalb Ihrer benutzerdefinierten Hooks zu verwalten.

4. Konsistente Werttypen zurückgeben

Geben Sie ein Array oder Objekt mit konsistenten Werttypen von Ihren Hooks zurück, das die Zustände, Funktionen oder jeden beliebigen Wert enthält, den Sie verfügbar machen möchten. Dadurch wird klar, was der Haken bietet und wie man ihn verwendet.

5. Schreiben Sie Tests und dokumentieren Sie Ihre benutzerdefinierten Hooks

Stellen Sie sicher, dass Ihre individuellen Haken gut getestet sind. Verwenden Sie Tools wie React Testing Library und Jest, um Tests zu schreiben, die das Verhalten Ihrer Hooks validieren.

Stellen Sie eine klare Dokumentation für Ihre benutzerdefinierten Hooks bereit. Erklären Sie, was sie tun, welche Parameter und welche Rückgabewerte sie haben, damit sie für andere (und Sie selbst) einfacher zu verwenden und zu warten sind.

6. Halten Sie es einfach

Vermeiden Sie es, Ihre Hooks zu komplex zu gestalten. Wenn ein Haken zu kompliziert wird, sollten Sie ihn in kleinere, gezieltere Haken aufteilen.

Stellen Sie sicher, dass Ihre Haken nur eine einzige Verantwortung haben.

7. Gehen Sie ordnungsgemäß mit Fehlern um

Behandeln Sie Fehler in Ihren Hooks elegant. Dadurch wird sichergestellt, dass Ihre Komponenten, die diese Hooks verwenden, unerwartete Szenarien bewältigen können, ohne kaputt zu gehen.

Beispielanwendungsfälle für benutzerdefinierte Hooks

Hier sind einige häufige Anwendungsfälle für benutzerdefinierte Hooks, die Ihnen in Ihren React-Projekten begegnen könnten:

1. Datenabruf

Ein benutzerdefinierter Hook zum Abrufen von Daten von einem API-Endpunkt kann für verschiedene Komponenten wiederverwendet werden, die Daten abrufen und anzeigen müssen.

import { useState, useEffect } from 'react';

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

    useEffect(() => {
        async function fetchData() {
            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 (err) {
                setError(err);
            } finally {
                setLoading(false);
            }
        }

        fetchData();
    }, [url]);

    return { data, loading, error };
}

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

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

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

); };

Nach dem Login kopieren

2. Umgang mit Formularen

Benutzerdefinierte Hooks können den Formularstatus verwalten, die Validierung durchführen und Übermittlungshandler bereitstellen, wodurch die Formularverwaltung zum Kinderspiel wird.

import { useState } from 'react';

function useForm(initialValues) {
    const [values, setValues] = useState(initialValues);
    const [errors, setErrors] = useState({});

    const handleChange = (event) => {
        const { name, value } = event.target;
        setValues({
            ...values,
            [name]: value
        });
    };

    const validate = (name, value) => {
        if (value.trim() === '') {
            setErrors((prevErrors) => ({ ...prevErrors, [name]: 'This field is required' }));
        } else {
            setErrors((prevErrors) => ({ ...prevErrors, [name]: '' }));
        }
    };

    const handleSubmit = (event, callback) => {
        event.preventDefault();
        if (Object.values(errors).every((err) => err === '')) {
            callback(values);
        }
    };

    return { values, handleChange, handleSubmit, validate, errors };
}

const Component = () => {
    const { values, errors, handleChange, handleSubmit } = useForm({ username: '', password: '' }, validate);

    const submit = () => {
        alert('Form submitted successfully');
    };

    return (
        <form onSubmit={(e) => handleSubmit(e, submit)}>
            <div>
                <label>Username</label>
                <input type='text' name='username' value={values.username} onChange={handleChange} />
                {errors.username && <p>{errors.username}</p>}
            </div>
            <button type='submit'>Submit</button>
        </form>
    );
};

3. Authentifizierung

Verwaltung des Benutzerauthentifizierungsstatus, einschließlich Anmeldung, Abmeldung und Überprüfung, ob ein Benutzer authentifiziert ist.

import { useState, useEffect } from 'react';

function useAuth() {
    const [user, setUser] = useState(null);

    useEffect(() => {
        const loggedUser = localStorage.getItem('user');
        if (loggedUser) {
            setUser(JSON.parse(loggedUser));
        }
    }, []);

    const login = (userData) => {
        setUser(userData);
        // call login api here
        localStorage.setItem('user', JSON.stringify(userData));
    };

    const logout = () => {
        setUser(null);
        localStorage.removeItem('user');
    };

    return { user, login, logout };
}

4. Fenstergröße

Ein benutzerdefinierter Hook zum Verfolgen von Änderungen der Fenstergröße, der für responsives Design nützlich sein kann.

import { useState, useEffect } from 'react';

function useWindowSize() {
    const [size, setSize] = useState({
        width: window.innerWidth,
        height: window.innerHeight
    });

    useEffect(() => {
        const handleResize = () => {
            setSize({
                width: window.innerWidth,
                height: window.innerHeight
            });
        };

        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return size;
}

5. Entprellung des Eingangs

Ein benutzerdefinierter Hook zum Entprellen von Eingabeänderungen, der für Sucheingaben oder andere Szenarien nützlich ist, in denen Sie einen Funktionsaufruf verzögern möchten.

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
    const [debouncedValue, setDebouncedValue] = useState(value);

    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedValue(value);
        }, delay);

        return () => {
            clearTimeout(handler);
        };
    }, [value, delay]);

    return debouncedValue;
}

Abschluss

Benutzerdefinierte Hooks können Ihren React-Code erheblich vereinfachen, indem sie ihn wiederverwendbarer und wartbarer machen. Indem Sie sich an Best Practices halten, wie z. B. die Vermeidung von Nebenwirkungen direkt in Hooks und die Sicherstellung, dass Sie Arrays oder Objekte nicht direkt mutieren, können Sie Hooks erstellen, die vorhersehbar und einfach zu testen sind.

Wenn Sie diesen Beitrag nützlich fanden, denken Sie darüber nach, ihm ein „Gefällt mir“ zu geben und ihn zu teilen. Wenn Sie eine Meinung oder weitere Vorschläge zu benutzerdefinierten Haken haben, zögern Sie bitte nicht, diese im Kommentar zu posten.

Danke, viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonBest Practices für benutzerdefinierte React-Hooks: Mit Beispielanwendungsfällen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!