Was ist Haken?

In React ist ein Hook eine spezielle Funktion, mit der Sie den Status verwalten, Nebenwirkungen handhaben und andere React-Funktionen in funktionalen Komponenten verwenden können .

Hooks wurden in React 16.8 eingeführt . Vor der Einführung von Hooks waren funktionale Komponenten „zustandslos“. Sie arbeiteten als Präsentationskomponente, d. h. als Komponente in React, die für das Rendern der Benutzeroberfläche verantwortlich ist, aber keine Geschäftslogik oder Zustandsverwaltung hat. Es empfängt Requisiten von seiner übergeordneten Komponente als Eingaben und rendert sie als Ausgabe. Wenn Sie einen Komponentenstatus verwalten oder Nebenwirkungen behandeln möchten, müssen Sie klassenbasierte Komponenten verwenden.
Aber durch die Verwendung des Hooks könnten funktionale Komponenten ihren eigenen Zustand verwalten und Zugriff auf alle bekannten Hooks wie useState, useMemo, useEffect usw. haben, die zuvor Klassenkomponenten erforderten.

Warum sollten wir es verwenden?

Wir sollten einen benutzerdefinierten React-Hook verwenden, wenn wir die zustandsbehaftete Logik zwischen mehreren Komponenten in unserer Anwendung wiederverwenden müssen. Mit benutzerdefinierten Hooks können Sie komplexe Logik und Zustandsverwaltung in eine wiederverwendbare Funktion packen, die von mehreren Komponenten gleichzeitig verwendet werden kann.
Darüber hinaus hilft uns der benutzerdefinierte Hook, unsere Komponenten sauber und organisiert zu halten, um Benutzerinteraktionen und Rendering zu handhaben, anstatt mit Zustandsverwaltung oder komplexer Logik kompliziert zu sein.

Real-Life-Szenario zur Verwendung von React Custom Hooks

Angenommen, Sie haben ein Formular in Ihrer Bewerbung. Dieses Formular hat mehrere Eingabefelder, und Sie müssen die Eingabe überprüfen, bevor Sie das Formular absenden. Sie möchten auch Fehlermeldungen anzeigen, wenn die Eingabe ein ungültiges Format hat.
Die Validierungslogik könnte in jeder Reaktionskomponente implementiert werden, die ein Formularfeld anzeigt, aber dies würde zu viel doppeltem Code führen und die Validierungslogik in Zukunft schwieriger zu ändern machen.
Also, was wirst du tun
Hier kommen benutzerdefinierte Haken ins Spiel. Sie können einen benutzerdefinierten Hook erstellen, der die Validierungslogik und die Zustandsverwaltung darin kapselt, und diesen Hook dann in jeder Reaktionskomponente verwenden, die ein Formularfeld rendert.

Javascript-Funktionen VS React Custom Hook

Javascript-Funktionen und benutzerdefinierte React-Hooks werden beide verwendet, um Logik zu kapseln und diese Logik in verschiedenen Teilen Ihrer Anwendung wiederzuverwenden. Es gibt jedoch einige wesentliche Unterschiede zwischen Funktionen und Hooks. React-Hooks sind JS-Funktionen mit der Leistungsfähigkeit von React.

1. Zweck: Im Allgemeinen werden Javascript-Funktionen verwendet, um die Wiederverwendungslogik zu kapseln, während benutzerdefinierte React-Hooks verwendet werden, um die zustandsbehaftete Wiederverwendungslogik innerhalb einer React-Komponente zu kapseln. Darüber hinaus können Sie die in React integrierten Hooks wie useState, useEffect usw. verwenden, um die Logik zu verbessern
2. Syntax: Wir definieren Javascript-Funktionen mit der traditionellen Funktionssyntax oder der ES6-Pfeilfunktionssyntax, während benutzerdefinierte React-Hooks einer bestimmten Namenskonvention folgen sollten und der Name des Hooks mit dem Präfix „use“ beginnen muss
3. Verwendung: Javascript-Funktionen können überall in Ihrer Anwendung verwendet werden, während benutzerdefinierte React-Hooks nur innerhalb von React-Komponenten verwendet werden

Um einen Haken zu bauen, sollten Sie diese allgemeinen Schritte befolgen

1. Identifizieren Sie die wiederverwendbare Logik: Der erste Schritt besteht darin, die Funktionalität zu identifizieren, die Sie in Ihrem Hook kapseln möchten. Denken Sie darüber nach, welche Art von Funktionalität sich zwischen mehreren Komponenten wiederholt. (z. B. Validierung von Formularen in der App)
2. Identifizieren Sie die Ein- und Ausgänge: Nachdem Sie die Funktionalität identifiziert haben, müssen Sie die Ein- und Ausgänge Ihres Hooks definieren.
   Zu den Eingaben gehören die Parameter, die an den Hook übergeben werden, und zu den Ausgaben gehören die vom Hook zurückgegebenen Werte.
3. Codieren Sie den Hook: Schreiben Sie in den Hook den Code, der die Funktionalität implementiert, für die Sie sich entschieden haben. Hier können Sie die Zustandsverwaltung, Nebeneffekte, API-Aufrufe oder jede andere erforderliche Logik handhaben.
4. Geben Sie die Hook-Werte zurück : Geben Sie schließlich die Werte zurück, die der Hook bereitstellt. Dazu gehören Statuswerte, Funktionen zum Aktualisieren des Status oder andere Daten, die von der Komponente benötigt werden, die den Hook verwendet.

Jetzt haben wir die notwendigen Dinge gelernt, um den Haken zu erstellen. Schauen wir uns die Ausgabe dieses Handbuchs an.

Zunächst werden wir Formularfelder und die Schaltfläche „Senden“ erstellen. Fügen Sie den unten geschriebenen Code einApp.jsx

Hier haben wir zwei Formularfelder codiert, nämlich Vorname und Nachname. Und wir haben diese beiden Felder jeweils als benannt firstname. lastnameAußerdem haben wir ein <small>Element hinzugefügt, um eine Validierungsnachricht anzuzeigen. Endlich haben wir ein <button>Element zum Absenden des Formulars hinzugefügt.

Baue den Haken

Fahren wir fort, indem wir den Hook konstruieren, der die Validierungslogik verwaltet. Erstellen Sie eine neue Datei mit dem Namen useForm.jsxund fügen Sie den unten geschriebenen Code ein.

Hier haben wir unseren Hook als benannt useForm. Hooks in React sollten einer speziellen Namenskonvention folgen: Der Name des Hooks muss mit dem Präfix „use“ beginnen. Der Validierungs-Hook nimmt ein Argument, das die Anfangswerte von Formularfeldern sind.
Um den Formularfeldstatus und den Fehlerstatus zu verwalten, haben wir useStateHook verwendet.
Anschließend haben wir eine Funktion mit dem Namen handleChangediese Funktion erstellt, die überprüft, ob der Formularfeldwert leer ist oder nicht, wenn der Benutzer den Formularfeldwert ändert. Wenn das Formularfeld leer ist, aktualisiert diese Funktion den errorsStatus mit einer Warnmeldung (Zeile 12). Setzt andernfalls den errorsZustand auf leer.
Danach aktualisiert diese Funktion den valuesStatus mit dem vom Benutzer eingegebenen Text.
handleSubmitFunktion übernimmt die Formularübermittlung. Die Funktion prüft den errorsZustand auf eventuelle Warnungen. Wenn keine Warnungen vorhanden sind, aktualisiert die Funktion den errorsStatus mit einer Erfolgsmeldung (Zeile 23). Andernfalls wird der Status mit einer Warnmeldung aktualisiert.
Zuletzt gibt der Hook zwei Eigenschaften und zwei Funktionen zurück, nämlich values, errors, handleChange, handleSubmit.

Verwenden des Hooks in der App.jsx

Wir haben die Formulare und die Validierungslogik bisher als Teil des Entwicklungsprozesses erstellt. Im nächsten Schritt verwenden wir unseren Validierungs-Hook im Formular. Ändern Sie die App.jsxDatei

Um die Validierungslogik zu verwenden, müssen wir zunächst den Hook importieren. App.jsx
Danach können wir den Hook innerhalb der Komponente verwenden, indem wir den Hook-Namen aufrufen. In diesem Fall benötigt unser Hook ein Argument als Eingabe und gibt, wie bereits erwähnt, zwei Eigenschaften und zwei Funktionen zurück.
Ein Eingabeparameter ist ein Objekt, das zwei Schlüssel enthält: firstname, lastname
Die AppKomponente erzeugt ein divElement, das die Formularfelder sowie die Schaltfläche „Senden“ enthält. Außerdem haben wir das <input>Element mit value& onChange-Eigenschaften aktualisiert. Der <input>Wert des Elements wird dem valuesvom useFormHook zurückgegebenen zugewiesen.
Darüber hinaus wird der Wert der Immobilie dem Rückgabewert onChangezugeordnethandleChangeuseFormHaken. Daher wird immer dann, wenn der Benutzer den Text der Elementfunktion ändert, <input>ausgelöst . Hook hat dieses Ereignis behandelt. Um die Warnmeldung anzuzeigen, haben wir Element unter jedem der Formularfelder verwendet. Schließlich wird die Funktion immer dann aufgerufen, wenn das Formular gesendet wird .handleChangeuseForm
<small>
handleSubmit

Abschluss

Zusammenfassend sind benutzerdefinierte Hooks ein leistungsstarkes Werkzeug zum Erstellen wiederverwendbarer und zusammensetzbarer Logik in React-Anwendungen. Durch das Einkapseln von Funktionalität in benutzerdefinierte Hooks können Entwickler die Codeduplizierung reduzieren und ihren Code modularer und wartbarer machen.
In diesem Artikel habe ich klar und prägnant erklärt, wie Custom Hooks funktionieren, und ihre Verwendung anhand eines praktischen Beispiels demonstriert. Indem ich die Best Practices und Richtlinien für benutzerdefinierte Hooks befolgt habe, habe ich gezeigt, wie Entwickler ihre eigenen benutzerdefinierten Hooks erstellen können, die problemlos in verschiedenen Komponenten und Anwendungen wiederverwendet werden können.
Darüber hinaus haben wir den Unterschied zwischen JS-Funktion und React-Hook sowie die allgemeinen Schritte besprochen, die zum Erstellen eines Hooks befolgt werden müssen.

Wenn Sie diesen Artikel hilfreich fanden, können Sie ihn gerne mit Ihrem Netzwerk teilen und mir auf Medium und LinkedIn folgen , um weitere Inhalte wie diesen zu erhalten.