Wiederverwendung von Logik in React mit benutzerdefinierten Hooks: ein praktischer Leitfaden

Benutzerdefinierte Hooks sind eine leistungsstarke Funktion in React, die im Gegensatz zu den integrierten React-Hooks für spezifischere Zwecke verwendet wird, und zwar durch die Kapselung allgemeiner Funktionalitäten in unabhängige Funktionen. Benutzerdefinierte Hooks fördern die Wiederverwendbarkeit, verbessern die Komponentenorganisation und verbessern insgesamt die Wartbarkeit des Codes.

In diesem Leitfaden befassen wir uns mit den Zwecken der Verwendung benutzerdefinierter Hooks, verstehen die Grundlagen der Erstellung benutzerdefinierter Hooks und wie man sie mit anderen Komponenten verwendet. Anschließend veranschaulichen wir ein Beispiel aus der Praxis, indem wir einen benutzerdefinierten Fetch-API-Hook erstellen.

Die Grundlagen verstehen

Normalerweise haben Entwickler Angst vor benutzerdefinierten Hooks, also lasst uns das entmystifizieren.

Ein benutzerdefinierter Hook ist einfach eine Funktion, die mit dem Use-Präfix beginnt (was für die Funktion des benutzerdefinierten Hooks entscheidend ist).
Diese Funktion besteht aus wiederverwendbarer Logik, die integrierte React-Hooks nutzt. Normalerweise erwägen Sie die Verwendung eines benutzerdefinierten Hooks, wenn Sie über mehrere Komponenten hinweg dieselbe Logik haben. Durch die Verwendung benutzerdefinierter Hooks können Sie also mehrere Probleme lösen, z. B. die Codeorganisation und Wartbarkeit verbessern.

Erstellen eines einfachen benutzerdefinierten Hooks

Das folgende Beispiel ist ein einfacher benutzerdefinierter Zähler-Hook, der den Zählstatus mithilfe des useState-Hooks verwaltet und die Zählung jeweils mithilfe von Inkrementierungs- oder Dekrementierungsfunktionen aktualisiert, die nur den Zählstatus festlegen.

import { useState } from 'react' const useCount = () => { const [count, setCount] = useState(0) const increment = () => setCount(prev => prev + 1) const decrement = () => setCount(prev => prev - 1) return { count, increment, decrement } } export default useCount;

Herzlichen Glückwunsch, Sie haben gerade Ihre eigenen individuellen Haken gebaut, es ist ziemlich einfach. Als Nächstes befassen wir uns mit der Verwendung dieses Hooks

Verwenden benutzerdefinierter Hooks in Komponenten

Die Verwendung benutzerdefinierter Hooks in anderen Komponenten erfolgt einfach durch Zerstörung der zurückgegebenen Werte aus dem benutzerdefinierten Hook innerhalb anderer Komponenten

import useCount from 'customHooks' const Page = () => { const {count, increment, decrement} = useCount() return( 
{ count }
  +   -  ) } export default Page

Beispiel aus der Praxis für die Verwendung eines benutzerdefinierten Hooks

Eine der sich am häufigsten wiederholenden Logiken ist das Abrufen einer API. Eine E-Commerce-Website ruft Daten zur Authentifizierung, zum Zahlungsvorgang, zur Anzeige aller Produkte, Kommentare, Bewertungen usw. ab.

Sie können sich die Menge an sich wiederholender Abruflogik in der gesamten Anwendung vorstellen, die mit einem benutzerdefinierten Hook vereinfacht werden kann.

In diesem Abschnitt wird ein benutzerdefinierter Abruf-Hook erstellt.

Wir werden die integrierten React-Hooks useState und useEffect verwenden
Wir werden einen Status für Daten haben, einen Status „Ausstehend“, falls wir einen Spinner anzeigen möchten, während die Daten abgerufen werden, und einen Fehlerstatus für den Fall, dass der Abruf fehlschlägt.

Der folgende Code ist selbsterklärend. Innerhalb von useEffect definieren wir eine fetchData-Funktion, die asynchron ist und die Abruflogik übernimmt. Unterhalb des useEffect gibt der benutzerdefinierte Hook die folgenden Werte zurück, die in allen anderen Komponentendaten, ausstehend, Fehler verwendet werden können.

Beachten Sie, dass wir einen URL-Wert an den benutzerdefinierten Hook-Parameter „useFetch“ übergeben, was bedeutet, dass Daten an benutzerdefinierte Hooks übergeben werden können

import {useState, useEffect} from 'react' const useFetch = (url: string) => { const [data, setData] = useState([]) const [pending, setPending] = useState(false) const [error, setError] = useState(null) useEffect(() => { const fetchData = async () => { setPending(true) await fetch(url) .then(result => { if (!result.ok) throw new Error('something went wrong!') return result.json() }) .then(result => { setData(result) setPending(false) }) .catch(error => setError(error)) } fetchData() }, [url]) return { data, pending, error } } export default useFetch

Durch die Verwendung des useFetch-Hooks in den Seitenkomponenten können wir jetzt im Fehlerfall eine Nachricht an den Client anzeigen, einen Spinner anzeigen, während die Daten abgerufen werden, und schließlich Daten an den Client anzeigen.

Diese Komponente kann in der gesamten Anwendung wiederholt verwendet werden, wodurch die Menge an sich wiederholendem Code verringert wird.

import useFetch from './hooks/useFetch' import Spinner from "./icons/Spinner" const Page = () => { const {data, pending, error} = useFetch('https://jsonplaceholder.typicode.com/posts') if(error) 
Cloud not fetch data from the server
 return( {pending ? ( ) : ( data.map((item) => ( 
 
{item.title}
 
{item.body}