Benutzerdefinierte Hooks in React: Warum und wie man sie erstellt

React hat sich zu einer der beliebtesten Bibliotheken zum Erstellen von Benutzeroberflächen entwickelt, vor allem aufgrund seines modularen Ansatzes und leistungsstarken Funktionen wie Hooks. Unter diesen stechen benutzerdefinierte Hooks als eine Möglichkeit hervor, Ihren Code sauberer, wiederverwendbar und einfacher zu warten. In diesem Artikel erfahren Sie, warum Sie benutzerdefinierte Hooks verwenden sollten und wie Sie diese effektiv erstellen.

---

Warum benutzerdefinierte Hooks erstellen?

Benutzerdefinierte Hooks ermöglichen es Ihnen, wiederverwendbare Logik auf saubere und modulare Weise zu kapseln. Sie helfen, Ihren Code zu optimieren und bieten mehrere Vorteile:

1. Wiederverwendbarkeit von Code: Mit benutzerdefinierten Hooks können Sie ein Stück Logik einmal schreiben und es über mehrere Komponenten hinweg wiederverwenden. Dies reduziert Duplikate und sorgt dafür, dass Ihre Anwendung konsistent bleibt.

2. Sauberere Komponenten: Indem Sie die Logik in einen benutzerdefinierten Hook verschieben, können Sie Ihre Komponenten vereinfachen und sie auf die Darstellung der Benutzeroberfläche konzentrieren, anstatt den Status oder Nebenwirkungen zu verwalten.

3. Verbesserte Testbarkeit: Da benutzerdefinierte Hooks eigenständige Funktionen sind, können Sie Unit-Tests für sie schreiben, ohne von der Benutzeroberfläche der Komponente abhängig zu sein.

4. Trennung von Anliegen: Benutzerdefinierte Hooks fördern eine bessere Trennung von Anliegen, indem sie Logik von der Präsentation isolieren.

---

So erstellen Sie einen benutzerdefinierten Hook

Ein benutzerdefinierter Hook ist eine JavaScript-Funktion, deren Name mit „use“ beginnt und andere darin enthaltene React-Hooks aufrufen kann (z. B. useState, useEffect usw.).

Schritte zum Erstellen eines benutzerdefinierten Hooks:

1. Identifizieren Sie die wiederverwendbare Logik in Ihrer Komponente.
2. Verschieben Sie die Logik in eine neue Funktion.
3. Stellen Sie dem Funktionsnamen „use“ voran (z. B. useFetch).
4. Verwenden Sie Hooks innerhalb dieser Funktion, um Status oder Nebenwirkungen zu verwalten.
5. Gibt den erforderlichen Status oder die erforderlichen Funktionen vom benutzerdefinierten Hook zurück.

---

Beispiel: Ein benutzerdefinierter Hook zum Abrufen von Daten

Angenommen, Sie müssen Daten von einer API in mehreren Komponenten abrufen. Anstatt die Logik in jeder Komponente zu duplizieren, können Sie einen benutzerdefinierten Hook erstellen, der den Datenabruf übernimmt.

Durchführung:

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 () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error("Failed to fetch data");
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

So verwenden Sie den benutzerdefinierten Hook:

Sie können useFetch jetzt in jeder Komponente verwenden, um Daten abzurufen:

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

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

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

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