Stellen Sie sicher, dass Sie über das erforderliche Hintergrundwissen in folgenden Bereichen verfügen:
Grundkenntnisse von React
Node.js und npm
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.
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.
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:
Mit Hooks wie useState, useEffect und useContext können Sie den Status und andere React-Funktionen verwenden, ohne eine Klasse schreiben zu müssen. Dabei handelt es sich um Bausteine, mit denen Sie die Komponentenlogik modular verwalten können.
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: Erstellen Sie eine einfache Zähler-App mit dem React-Hook(useState).in app.jsx
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 (); } export default App;Counter App
{counterstate}
Im obigen Code umfasst die wiederverwendbare Logik die Funktion „Zählerzustand“, „Anfangszustand“ (o), „Inkrementierung“, „Dekrementierung“ und „Reset“. Das Inkrementieren addiert 1 zum Anfangszustand, während das Dekrementieren 1 vom Anfangszustand subtrahiert, während das Zurücksetzen auf den ersten Anfangszustand zurückgesetzt wird.
Wir können im src-Ordner einen Ordner namens 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;
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 (); } export default App;Counter App
{value}
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;
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 (); } export default App;Counter Appp
{value}
{loading &&Loading....} {error &&Error: {error.message}} {data && data.length > 0 && ()}Username: {data[0].username}
Einer der Hauptvorteile ist die Wiederverwendbarkeit. Sie können denselben benutzerdefinierten Hook in mehreren Komponenten verwenden und so die Codeduplizierung reduzieren.
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.
Durch die Verlagerung komplexer Logik in benutzerdefinierte Hooks werden Ihre Komponenten einfacher und verständlicher.
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.
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.
Optimieren Sie Ihre benutzerdefinierten Hooks, indem Sie sich Werte merken oder Hooks wie useCallback und useMemo verwenden, um die erneute Ausführung teurer Berechnungen oder das erneute Abrufen von Daten zu vermeiden.
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: Mein GitHub-Repository
Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.
Copyright© 2022 湘ICP备2022001581号-3