Benutzerdefinierte Hooks in React verstehen und erstellen

Inhaltsverzeichnis

1. Voraussetzungen
2. Installation
3. Einführung
4. Was sind benutzerdefinierte Hooks?
5. Wann sollten Sie einen benutzerdefinierten Hook erstellen?
6. Beispiel: Erstellen eines benutzerdefinierten Hooks
   • Schritt 1: Identifizieren Sie die wiederverwendbare Logik
   • Schritt 2: Logik in einen benutzerdefinierten Hook extrahieren
   • Schritt 3: Verwenden des benutzerdefinierten Hooks
7. Vorteile von benutzerdefinierten Haken
8. Best Practices für benutzerdefinierte Hooks
9. Fazit

Voraussetzungen:

Stellen Sie sicher, dass Sie über das erforderliche Hintergrundwissen in folgenden Bereichen verfügen:

Grundkenntnisse von React
Node.js und npm

Installation:

Um mit Vite mit einem neuen React-Projekt zu beginnen, befolgen Sie diese Schritte:

ich. Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus, um ein neues Projekt zu erstellen:

   npm create vite@latest my-react-app --template react

ii. Navigieren Sie in Ihr Projektverzeichnis:

     cd my-react-app

iii. Abhängigkeiten installieren: Installieren Sie die erforderlichen Pakete für Ihr Projekt:

   npm install

iv. Starten Sie den Entwicklungsserver: Führen Sie den Entwicklungsserver aus:

    npm run dev

Ihre React-App wird jetzt ausgeführt und Sie können sie in Ihrem Browser unter http://localhost:5173 anzeigen.

Einführung:

Was sind React Hooks?:

React-Hooks sind spezielle Funktionen, mit denen Sie Status- und andere React-Funktionen in Funktionskomponenten verwenden können. Hooks wie useState und useEffect sind für die Verwaltung von Status und Nebenwirkungen unerlässlich.

Was sind benutzerdefinierte Hooks?:

Benutzerdefinierte Hooks können als eine Möglichkeit beschrieben werden, Logik über mehrere Komponenten hinweg wiederzuverwenden. Anstatt den Code zu wiederholen, können Sie ihn in einem benutzerdefinierten Hook kapseln, wodurch Ihre Komponenten übersichtlicher werden und Ihr Code einfacher zu verwalten ist. Stellen Sie genau wie bei React-Hooks bei der Verwendung benutzerdefinierter Hooks sicher, dass Sie Ihren Komponentennamen mit (use gefolgt von dem Namen, den Sie der Komponente geben möchten, z. B. useFetchData) beginnen. useFetchData kann ein benutzerdefinierter Hook sein, der Daten von einer API abruft und an Ihre zurückgibt Komponente.

Hooks verstehen?

Hooks verstehen:
Mit Hooks wie useState, useEffect und useContext können Sie den Status und andere React-Funktionen verwenden, ohne eine Klasse schreiben zu müssen. Es handelt sich um Bausteine, mit denen Sie die Komponentenlogik modular verwalten können.

Wann sollten Sie einen benutzerdefinierten Hook erstellen?

Mit benutzerdefinierten Hooks können Sie zustandsbehaftete Logik über verschiedene Komponenten hinweg wiederverwenden. Ein einfaches Beispiel ist eine Zählerkomponente, die über Funktionen zum Erhöhen, Dekrementieren und Zurücksetzen verfügt. Wenn Sie dieselbe Logik in mehreren Komponenten benötigen, kann die Logik in einen benutzerdefinierten Hook verschoben werden. Ein weiteres häufig verwendetes Beispiel ist eine Komponente, die Daten von einer API abruft. Wenn Sie dieselbe Logik in mehreren Komponenten benötigen, können Sie diese Logik in einen benutzerdefinierten Hook verschieben.

Beispiel für die Erstellung eines benutzerdefinierten Hooks

Beispiel: Erstellen Sie eine einfache Zähler-App mit dem React-Hook(useState).in app.jsx

Schritt 1: Identifizieren Sie die wiederverwendbare Logik

import React, { useState } from "react";

import "./App.css";

function App() {
  // usestate hooks
  const [counterstate, setCounterstate] = useState(0);

  // function for increment,decrement and reset
  const increment = () => {
    setCounterstate((prev) => prev + 1);
  };
  const decrement = () => {
    setCounterstate((prev) => prev - 1);
  };
  const reset = () => {
    setCounterstate(0);
  };
  return (
    <div className="container">
      <div>
        <h1>Counter App </h1>
        <h2>{counterstate}</h2>
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

Im obigen Code umfasst die wiederverwendbare Logik die Funktion „Zählerzustand“, „Anfangszustand“ (o), „Inkrementierung“, „Dekrementierung“ und „Reset“. Durch das Inkrementieren wird 1 zum Anfangszustand hinzugefügt, durch Dekrementieren wird 1 vom Anfangszustand abgezogen, während durch Zurücksetzen der Wert auf den ersten Anfangszustand zurückgesetzt wird.

Schritt 2: Extrahieren der Logik in einen benutzerdefinierten Hook

Wir können im src-Ordner einen Ordner mit dem Namen Hooks und dann eine Datei namens useCouter.jsx für den benutzerdefinierten Hook erstellen, wie unten gezeigt.

import React, { useState } from "react";

const useCounter = (initialvalue) => {
  const [value, setValue] = useState(initialvalue);
  const increment = () => {
    setValue((prev) => prev + 1);
  };
  const decrement = () => {
    setValue((prev) => prev - 1);
  };
  const reset = () => {
    setValue(initialvalue);
  };

  return { value, increment, decrement, reset };
};

export default useCounter;

Schritt 3 mit dem benutzerdefinierten Hook

Jetzt verwenden wir unseren benutzerdefinierten Hook in App.jsx.

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";

function App() {

  const { value, increment, decrement, reset } = useCounter(0);
    return (
    <div className="container">
      <div>
        <h1>Counter App </h1>
        <h2>{value}</h2>
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

Beispiel 2.

Lassen Sie uns einen benutzerdefinierten Hook „useFetch“ für alle API-Aufrufe erstellen.

import React, { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);
  return { data, error, loading };
};

export default useFetch;

Verwendung

in App.jsx können wir diesen benutzerdefinierten Hook verwenden, um einen Benutzernamen aus dem JSON-Platzhalter abzurufen, wie unten gezeigt;

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";
import useFetch from "./Hooks/useFetch";

function App() {
  const { value, increment, decrement, reset } = useCounter(0);
  const { data, error, loading } = useFetch(
    "https://jsonplaceholder.typicode.com/users"
  );

  return (
    <div className="container">
      <div>
        <h1>Counter Appp </h1>
        <h2>{value}</h2>
        {loading && <div>Loading....</div>}
        {error && <div>Error: {error.message}</div>}
        {data && data.length > 0 && (
          <div>
            <h2>Username: {data[0].username}</h2>
          </div>
        )}
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

Vorteile von kundenspezifischen Haken

Wiederverwendbarkeit:

Einer der Hauptvorteile ist die Wiederverwendbarkeit. Sie können denselben benutzerdefinierten Hook in mehreren Komponenten verwenden und so die Codeduplizierung reduzieren.

Trennung von Belangen:

Benutzerdefinierte Hooks helfen Ihnen, die Logik von der Benutzeroberfläche zu trennen. Ihre Komponenten konzentrieren sich auf das Rendern, während die benutzerdefinierten Hooks die Logik übernehmen.

Reinigerkomponenten:

Durch die Verlagerung komplexer Logik auf benutzerdefinierte Hooks werden Ihre Komponenten einfacher und leichter zu verstehen.

Best Practices für benutzerdefinierte Hooks

Namenskonventionen:

Benutzerdefinierte Hooks sollten mit dem Wort „use“ beginnen, um der React-Namenskonvention zu folgen. Dies hilft auch dabei, Hooks in Ihrem Code schnell zu identifizieren.

Beispiel: useFetch, useForm, useAuth.

Umgang mit Abhängigkeiten:

Wenn Sie Hooks wie useEffect innerhalb eines benutzerdefinierten Hooks verwenden, stellen Sie sicher, dass Abhängigkeiten korrekt behandelt werden, um Fehler oder unnötige erneute Renderings zu vermeiden.

Unnötiges erneutes Rendern vermeiden:

Optimieren Sie Ihre benutzerdefinierten Hooks, indem Sie sich Werte merken oder Hooks wie useCallback und useMemo verwenden, um das erneute Ausführen teurer Berechnungen oder das erneute Abrufen von Daten zu vermeiden.

Abschluss

Wir haben das Konzept benutzerdefinierter Hooks und ihre Rolle bei der Vereinfachung und Verbesserung der React-Anwendungsentwicklung untersucht. Durch die Erstellung benutzerdefinierter Hooks können Sie zustandsbehaftete Logik kapseln und wiederverwenden, was dazu beiträgt, dass Ihre Komponenten sauber und wartbar bleiben.

Sehen Sie sich das Projekt auf GitHub an: My GitHub Repository

Das obige ist der detaillierte Inhalt vonBenutzerdefinierte Hooks in React verstehen und erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!