Hooks auf einfache Weise (mit React Router v6, Axios, Formularvalidierung und Shortcuts) | Code Bless You | Skillshare
Drawer
Suchen

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Hooks auf einfache Weise (mit React Router v6, Axios, Formularvalidierung und Shortcuts)

teacher avatar Code Bless You, Making Coding Easy To Learn

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Einführung

      0:50

    • 2.

      Was sind Hooks?

      1:04

    • 3.

      Wichtigster Haken – useState

      8:21

    • 4.

      Mehrere Eingänge verarbeiten (Shortcut)

      6:53

    • 5.

      useEffect in der Tiefe

      8:49

    • 6.

      Abfragen von Daten mit AXIOS

      11:21

    • 7.

      useContext

      7:01

    • 8.

      useRef

      6:45

    • 9.

      useReducer

      7:27

    • 10.

      useLayoutEffect

      5:27

    • 11.

      useMemo

      4:49

    • 12.

      useCallback

      5:08

    • 13.

      Benutzerdefinierte Haken (useFetch)

      4:03

    • 14.

      Form mit FORMIK & YUP

      18:26

    • 15.

      BONUS : React Router v6

      11:33

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

270

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Lerne alle JS realisieren, was das wichtigste Thema in React ist. Nachdem du diesen Minikurs abgeschlossen hast, wirst du React Hooks viel besser verstehen.

WAS DU WISSEN MUSST:

  • Nur Grundlagen reagieren

THEMEN IN DIESEM KURS:

  • Was sind Hooks?
  • useState Haken mit allen Methoden
  • Komplexe Formbearbeitung in nur 2 Zeilen
  • useEffect in der Tiefe (kostenloses Cheatsheet)
  • Daten mithilfe von Axios (beliebteste Bibliothek)
  • useContext (Context
  • useRef für das Erhalten von Elementen
  • useReducer Hook für die Verwaltung von Staaten
  • useLayoutEffect
  • useMemo
  • useCallback
  • Benutzerdefinierte Haken (useFetch)
  • Form mit Formik und Yup
  • viel mehr

Wichtige Links für diesen KURS:

Ich werde diesen Kurs auf "Der ultimative React Mastery Kurs" aktualisieren, indem ich regelmäßig Kurse hinzufügen.

Triff deine:n Kursleiter:in

Teacher Profile Image

Code Bless You

Making Coding Easy To Learn

Kursleiter:in

Hi! I'm a passionate software engineer from Code Bless You and I love to teach about coding and general skills in less time. I've taught many people how to become professional software engineers.

My goal is to make coding fun for everyone. That's why my courses are simple, animated, and with practical implementation.

Learn by doing

Step-by-step tutorials and project-based learning.

Get support

One-on-one support from experts that truly want to help you.

don’t stress. have fun.

I can't wait to see you in class!

- Code Bless You

Vollständiges Profil ansehen

Level: Beginner

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung: Willkommen in der React-Hook-Klasse. In diesem Kurs lernst du alle React Hooks in einer einfachen und leicht verständlichen Sprache , die jeder verstehen kann. Zunächst werden wir sehen, was Hooks sind und warum wir sie brauchen. Danach beginnen wir mit dem nützlichsten Hook , der verwendet wird. Und noch ein paar Hooks wie use effect, benutze Kontexte und so weiter. Außerdem werden wir die Zugriffsbibliothek zum Abrufen von Daten von der API, zum Umgang mit Handflächen, einer Validierung und vielem mehr sehen zum Abrufen von Daten von der API, . Nach Abschluss dieses Kurses gebe ich Ihnen ein Projekt, nämlich den Cryptocurrency Price Tracker. Sie erhalten alle Anweisungen im Projektbereich. Ich freue mich sehr über diesen Kurs und hoffe du auch. Also lass uns anfangen. 2. Was sind Haken?: Bevor wir in Usted Hook eintauchen, wollen wir zuerst verstehen, was Haken sind? Wenn Sie es bereits wissen, können Sie diesen Teil überspringen und direkt auf den Usted-Haken springen. Was ist Hooks? Hooks sind die Funktionen, um einige reagierende Prediger in Funktionskomponenten zu verwenden . Mit anderen Worten, wir können sagen, dass Hooks Funktionen sind , die funktionale Komponenten wie Klassenkomponenten funktionieren lassen . Ich weiß, das klingt kompliziert, ist es aber nicht. Lass uns das mit einer Geschichte verstehen. Bevor React Hooks gestartet hat. Es gibt nur eine Möglichkeit, Status- und Lebenszyklusmethoden mithilfe der Klassenkomponenten zu verwenden Status- und Lebenszyklusmethoden . Jetzt hatten Entwickler einige Probleme mit Glaskomponenten. Nehmen Sie sich also etwas Zeit, um spezielle Funktionen zu entwickeln , die wir in Funktionskomponenten verwenden können und die spezielle Funktionen Hooks nennen. Ich denke, jetzt verstehst du, was React Hooks sind, welche Funktionen dazu führen, dass funktionale Komponenten Live-Klassenkomponenten funktionieren. Beginnen wir mit unserem ersten Haken, der benutzt wird. 3. Wichtigster Haken – useState: Was wird verwendet? Es wurde verwendet hook ist eine Funktion zum Hinzufügen von Status in der Funktionskomponente. Jetzt fragen Sie sich vielleicht, was Staat ist? State ist also nichts anderes als nur Werte oder Variablen deiner Komponente. Mit anderen Worten, alle Variablen in Ihrer Komponente werden als Status der Komponente bezeichnet. Wann immer Sie eine Variable erstellen möchten, müssen Sie usted hook verwenden, so einfach ist das. Lassen Sie uns das mit dem Beispiel verstehen. Hier habe ich eine neue React-Anwendung und habe alle nicht benötigten Dateien daraus gelöscht. Lassen Sie mich zunächst eine funktionale Komponente erstellen, indem Sie ein FCE verwenden. Dies ist das Bild für die Erstellung der Funktionskomponenten. Sie müssen jedoch zuerst diese ESL- und React-Erweiterung installieren . Ich habe diese Erweiterung geliebt. Es steigert meine Produktivität in React. Jetzt erstelle ich hier einen einfachen Zähler, zeigt den Zählerwert an und eine Schaltfläche, die in Griechenland aufgerufen wird. Wenn wir auf diese Schaltfläche klicken, erhöht sich der Zählerwert um eins. Hier möchte ich den Wert des Zählers anzeigen. Wir brauchen Staat. Und hier verwenden wir, benutzten es Hooks. Um einen beliebigen Haken zu benutzen. Zuerst müssen wir das aus der React-Bibliothek importieren , genau hier, usted. Okay, hier nennen wir Sie State-Funktion. Und wir geben unserem Zähler einen Anfangswert wie 0. Jetzt gibt diese Funktion ein Array zurück. Also lasst uns konsolidieren. Sehen. Dieser Bereich besteht aus zwei Elementen. Das erste Element ist unser ursprünglicher Wert , der 0 ist, und das zweite Element ist eine Funktion. Also machen wir dieses erste Element in der Gegenvariablen und werden hier mit geschweiften Klammern angezeigt . Speichern Sie die Änderungen und werfen Sie einen Blick darauf, wir bekommen unseren Zähler. Jetzt gibt das zweite Element dieses Arrays eine Funktion zurück. Mit dieser Funktion können wir unsere State-Werte aktualisieren. Speichern wir dieses Element also in einer Variablen namens state counter. Welcher Wert wir in dieser Funktion übergeben, ist nun der Wert dieser Zählervariablen. Lass mich dir das zeigen. Hier. Wir wollen den Zähler um eins erhöhen. Wenn wir auf diese Schaltfläche klicken, erhöht die Funktion Hinzufügen im OnClick den Zähler. Jetzt müssen wir diese Funktion definieren. Und innerhalb dieser Funktion schreiben wir set counter. Was ist bekannter Wert, der Zähler plus eins ist. Speichern Sie es und schauen Sie es sich an. Siehst du, es funktioniert. Und wenn wir die Seite aktualisieren, beginnt sie wieder mit 0, die wir in dieser Funktion Ihres Bundesstaates übergeben. Jetzt hier sieht unser Code ein bisschen hässlich aus. Daher verwenden wir immer die Abkürzung für diese drei Zeilen, die als Restrukturierung bearbeiten bezeichnet wird. Fügen Sie hier an der Stelle von LA eckige Klammern hinzu. Und darin, rechts, der Name der Post-Variablen , der counter ist, und dann schreibe den Funktionsnamen , der der eingestellte Zähler ist. Wir brauchen diese beiden Leitungen nicht mehr. Es funktioniert genauso wie zuvor. Und unser Code sieht sauber aus. Und Sie können mehrere usted Hooks in einer einzigen Komponente verwenden . Lassen Sie uns nun sehen, wie wir den US-Bundesstaat nutzen können , um Wert aus der Eingabe zu erhalten. Erstellen wir also eine Eingabe mit einem Typtext. Hier müssen wir uns um das onchange-Ereignis kümmern. Und wir übergeben der Erkundung eine Pfeilfunktion. Und wir verwenden den Zielpunktwert , um die Zustandsvariable zu aktualisieren. Also tippe es hier benutzt. Und hier können wir unseren variablen Anfangswert angeben, in diesem Fall eine leere Zeichenfolge. Immer wenn sich der Wert dieses Eingabefeldes ändert, rufen wir die Funktion setName und den Zielpunktwert für den Bass e dot auf. Wir rufen setName auf und übergeben diesen Wert. Jetzt ändern wir unser Label in Variablenname, hat geklickt. Variable Zählzeiten, speichern Sie die Änderungen und werfen Sie einen Blick darauf. Hier haben wir Textbox und wenn wir Namen Gold schreiben, Es wird sofort aktualisiert hier und auch gegen Updates onclick. Sehen wir uns nun an, wie man usted hook verwendet , wenn wir object als Zustandsvariable haben. Also hier erstellen wir zwei Zustandsvariablen , die counter und name sind. Jetzt können wir dasselbe mit einer Zustandsvariablen machen, nämlich object. Erstellen Sie also ein neues usted und übergeben Sie das Objekt als Anfangswertzähler an 0 und name2 leere Zeichenfolge. Definieren Sie nun seinen Namen, indem Sie Restrukturierungsdetails bearbeiten und Details festlegen. Löschen Sie nun diese beiden Zeilen. Wir brauchen sie nicht. Anstatt Namen zu schreiben, oder? Details Punktname und Details Punktzähler. Hier in der Zählerfunktion entferne ich das und rate was wir hinzufügen müssen? Richtig? Wir müssen eine set-Details-Funktion hinzufügen , um diesen Zählerwert zu aktualisieren. Also schreibe ich Site-Details. Und denken Sie daran, welchen Wert Sie in dieser Funktion auch immer übergeben, er wird mit dem ursprünglichen Wert aktualisiert. Also Objektzähler, Carlin Details Punktzähler plus eins. Speichern Sie es und schauen Sie es sich an. Ja, es funktioniert. Es gibt jedoch ein großes Problem, dass wir unser Namenselement nicht in diesem Objekt haben. Lass mich dir das zeigen. Also schreibe ich hier einfach console.log Details und speichere sie. Aktualisieren Sie nun die Seite und sehen Sie, wie sich zwei Elemente im Objekt befinden. Wenn ich jetzt auf diese vergrößerte Schaltfläche klicke, wird das Namenselement aus unserem Objekt entfernt. Warum passiert das dann? Das passiert, weil wir das Objekt direkt übergeben , ohne andere alte Werte hinzuzufügen. Die Lösung ist also, dass wir zuerst alle anderen Werte dieses Objektnamens hier hinzufügen und dieses Zählerelement einfach mit einem neuen Wert aktualisieren . Innerhalb der Details-Funktion können wir also eine andere Funktion übergeben, und diese Funktion kann den vorherigen Wert unserer Zustandsvariablen zurückgeben . Lass dich nicht verwirren, nur um das zu sehen. Diese vorherigen sind also die gleichen Details wie diese Detailvariable. Lass mich dir zeigen, dass meine Konsole es ist und füge hier etwas Text hinzu. Sehen Sie, wir erhalten alle Werte, wenn wir mit einem Fehler auf diese Schaltfläche klicken , da wir keine Konsole innerhalb einer Funktionsstörung schreiben können. Also entferne das. Und jetzt verwenden wir den Spread-Operator indem wir drei Punkte zuvor verwenden. Dadurch werden alle vorherigen Werte der Statusvariablen hinzugefügt. Jetzt ersetzen wir counter durch den alten Wert , der vorherige Punktzähler plus eins ist. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Sehen Sie es funktioniert perfekt mit dem Namenselement. Wenn Sie also mit einem Objekt oder einem Array arbeiten, müssen wir zuerst alle vorherigen Werte hinzufügen, indem wir diese Methode verwenden , und dann alles aktualisieren, was wir aktualisieren möchten. Lassen Sie uns zusammenfassen, was wir gelernt haben. Daher wird usted verwendet, um Zustandsvariablen in Funktionskomponenten zu erstellen . Um usted hook zu verwenden, müssen wir das zuerst importieren und in der Funktionskomponente verwenden. Hier können Sie jede Art von Daten wie boolean, number, text, object an beliebiger Stelle übergeben text, object an und dann mithilfe der AddEdge-Restrukturierung speichern. Die erste Variable ist ihr aktueller Wert. Und die zweite ist die Funktion für unsere Züchtung diesen Wert. So einfach ist das. Manche Leute können hier etwas verwirrt sein. Und ich war auch verwirrt, als ich zum ersten Mal usted wer erfuhr. Aber mit etwas Übung habe ich dieses Konzept gelernt und es in meinen Projekten verwendet. 4. Handhabung mehrerer Eingänge (Shortcut): Sehen wir uns an, wie man mit mehreren Eingaben , die in React einzeln im Handler sind Es ist sehr nützlich, wenn Sie mehrere Eingabefelder haben , wie das Anmeldeformular. Im USDA-Tutorial sehen wir, wie man mit einem oder zwei Formularfeldern umgeht. Aber stellen Sie sich vor, Sie haben fünf bis sechs Felder und erstellen eine Zustandsvariable für jede Eingabe, und das macht unseren Code unübersichtlich und schwer zu verwalten. Sehen wir uns also an, wie Sie mit einer einzigen OnChange-Funktion mehrere Eingaben handhaben . Hier haben wir Press F Komponente. Und diese Komponente möchte ich Benutzerdetails wie Name, E-Mail-Adresse, Passwort und Adresse übernehmen . Also lass uns ein Formular erstellen. Ich weiß, dass einige Entwickler dieses Formular-Tag nicht verwenden und direkt Eingabeelemente erstellen, aber das ist keine gute Vorgehensweise. In diesem Formular möchte ich jetzt einen S3-Tag und einen Text vom Typ Eingabe übergeben . Jetzt dupliziere ich diesen Code noch dreimal , indem ich den C Plus Plus Abwärtspfeil verwende und die zweite Pille als E-Mail ändere und in E-Mail tippe. Weiter für das Passwort und geben Sie das Passwort ein. Und die letzte ist Adresse. Und dafür brauchen wir einen Textbereich. Also entferne ich dieses Eingabe-Tag und erstelle einen Textbereich. Und am Ende brauchen wir eine Schaltfläche, geben Sie submit ein und nennen es submit form. Speichern Sie jetzt die Änderungen und werfen Sie einen Blick darauf. Siehst du, wir bekommen unser Formular mit allen Pillen. In der vorherigen Lektion erstellen wir jetzt individuelle Eingaben für Zustandsvariablen. Und dann setzen wir in der onchange diesen Wert auf unsere Zustandsvariable. Bei dieser Methode erstellen wir jedoch nur eine Zustandsvariable für alle Eingabefelder. So schnell importiere ich usted aus der React-Bibliothek. Und in unserer funktionalen Komponente verwenden wir usted und destrukturieren es wie Details und Set-Details. Jetzt möchte ich ein Objekt und dieses Objekt übergeben, wir haben mehrere Felder wie name und seinen Anfangswert als leere Zeichenfolge, E-Mail, leere Zeichenfolge, Passwort, leere Zeichenfolge. Und zuletzt, adressieren Sie eine leere Zeichenfolge. Erstellen wir nun unsere Handle-Change-Funktion. Und wir werden diese Funktion bei jedem onchange-Ereignis aufrufen . Also hier schreibe ich über Änderung und übergebe die Handle-Change-Funktion. Kopieren Sie dies jetzt und fügen Sie es in alle Felder ein. Wenn wir also eines dieser Felder eingeben, wird nur diese Funktion ausgeführt. Nun, der wichtigste Schritt, und ohne diesen Schritt, Unsere, wird diese Methode nicht funktionieren. Der Schritt besteht also darin, dass wir den Namen aller Pillen als Eingabenamenattribut aus unserem Zustandsobjekt hinzufügen müssen. Lass mich dir das zeigen. Für die Namenseingabe möchten wir daher den Eingabewert in dieser name-Eigenschaft speichern. Also fügen wir das name-Attribut gleich name hinzu. Für E-Mail möchten wir diesen E-Mail-Wert in dieser E-Mail-Eigenschaft festlegen . Wir fügen der E-Mail ein Namensattribut für die E-Mail-Eingabe hinzu. Nun für Passwort, Name entspricht Passwort und Portadresse. Wir übergeben Name ist gleich Adresse. Stellen Sie sicher, dass Sie denselben Namen wie beim Schreiben in dieses Objekt schreiben. In dieser Handle-Change-Funktion schreiben wir jetzt unsere Hauptlogik. Also benutze ich dieses E als Ereignisobjekt für all diese Pillen. Und lassen Sie uns dot target trösten. Speichern Sie es und schauen Sie es sich an. Sehen Sie, wenn wir unsere Namenseingabe eingeben, erhalten wir diese Namenseingabe. Und wenn wir andere Eingaben eingeben, erhalten wir diese Eingabe. Unsere Logik ist also, dass wir, wenn wir ein Eingabefeld eingeben, den Namen und den Wert der Eingabedatei erhalten. Und mit diesem Namen , der mit unseren Detailobjekteigenschaften identisch ist, ersetzen wir seinen Wert durch den aktuellen Wert. Ich weiß, das klingt kompliziert, ist es aber nicht. Lass uns das sehen. Und danach werden sich alle Zweifel klären. Ich erstelle eine Namensvariable für den E-Punkt-Zielpunktnamen und eine Wertvariable für den E-Punkt-Zielpunktwert. Und lassen Sie uns beide Variablen trösten. C. Wir erhalten FullName und seinen Wert, wenn wir diese Eingabefelder eingeben. Jetzt müssen wir diesen Wert nur noch innerhalb unserer Zustandsvariablen setzen . Lass es seinen Namen machen. Also Details auf der rechten Seite. Und in der Callback-Funktion übergeben wir den vorherigen Parameter, welchen vorherigen Wert? Zuallererst geben wir es alle vorherigen Werte zurück, indem wir den Spread-Operator verwenden. Jetzt müssen wir die Eigenschaft mit diesem Wert aktualisieren. Wir wissen also, dass wir mit einer eckigen Klammer auf die Objekteigenschaft zugreifen mit einer eckigen Klammer auf die Objekteigenschaft und diese Namensvariable darin übergeben und ihren Wert mit einem Doppelpunkt versehen können. Wenn wir also etwas in die E-Mail-Eingabe schreiben, werden zuerst alle vorherigen Eigenschaften zurückgegeben. Und dann finden wir die Immobilien-E-Mail und ersetzen ihren Wert durch das E-Mail-Feldwertsymbol als solches. Lassen Sie uns das Solo der Variablen dieser Daten aufheben und sehen, ob wir Werte erhalten, die dies nicht sind. Speichern Sie also die Änderungen und werfen Sie einen Blick darauf. Sehen Sie, wenn wir ein Feld aktualisieren, erhalten wir seinen Wert in unserem State-Objekt. Jetzt können wir diesen Code sogar sortieren, indem wir Objektzerstörung verwenden. Also schreibe ich E-Punkt-Ziel und mithilfe der Objektdatenstrukturierung speichern wir Name und Wert in einer Variablen. Also diese beiden Zeilen, genau wie diese eine Zeile. Also entferne ich diese beiden Zeilen. Jetzt möchte ich dieses Details-Objekt konsultieren , wenn wir auf die Schaltfläche „Senden“ klicken. Also erstelle ich eine neue Funktion namens handle submit und schieße all diese Details ab. Jetzt im Formular-Tag onsubmit event rufen wir diese Funktion auf. Speichern Sie jetzt die Änderungen und werfen Sie einen Blick darauf. Lassen Sie mich alle Details aufschreiben. Und dann klicke ich auf den Absenden-Button. Sehen Sie, für nur 1 Sekunde wird es gedruckt. Und dann wird unser Formular unterdrückt weil es das Standardverhalten von form ist. Immer wenn wir das Formular absenden, wird diese Funktion ausgeführt und dann wird die Seite erneut gedrückt. Also müssen wir damit aufhören. Wir verwenden dieses e als Ereignisobjekt und schreiben die E dot prevent default Funktion. Dadurch wird das Standardverhalten der Handflächen verhindert. Speichern Sie also die Änderungen und werfen Sie einen Blick darauf. Sehen Sie, wir bekommen Details in der Konsole. In deinem Projekt. In dieser Funktion können Sie die API aufrufen und alle Details an den Server senden. Also ich hoffe dir gefällt diese Methode. Wenn Sie Verwirrung haben. War dieses Tutorial noch einmal. Und versuchen Sie, diese Methode auf Ihr Projekt anzuwenden , um Ihre Zweifel auszuräumen. 5. useEffect in der Tiefe: Verwenden Sie den Peg wird verwendet, um Nebenwirkungen in unserer Komponente durchzuführen. Was sind Nebenwirkungen? Nebenwirkungen, unsere Handlungen die mit der Außenwelt durchgeführt werden. Wir führen einen Nebeneffekt aus , wenn wir außerhalb der React-Komponenten etwas tun müssen . Welches Beispiel, das Abrufen von Daten aus der API, die direkte Aktualisierung des DOM, in dem wir das Dokument - oder Fensterobjekt verwenden, und Timer-Funktionen wie setTimeout oder set interval. Dies sind die häufigsten Nebenwirkungen von React. Um irgendwelche Nebenwirkungen zu erzielen, müssen wir den Effekt Hooke verwenden. Schauen wir uns ein Beispiel an. Hier. Ich habe eine Zustandsvariable erstellt und ihr Wert wird um eins steigen. Wenn wir auf diese Schaltfläche klicken, um einen Hook zu verwenden, müssen wir zuerst Daten aus der React-Bibliothek importieren. Also schreibe ich hier, benutze effect, und jetzt können wir es in der funktionalen Komponente verwenden. Verwenden Sie also einen Vektor mit Ausnahme von zwei Argumenten. Callback, eine Funktion in der wir unsere Nebeneffekt-Logik schreiben. Diese Funktion wird immer dann ausgeführt , wenn sich etwas in dieser Komponente befindet. Und zweitens Abhängigkeiten, die ein Bereich von Variablen sind und ein optionales Argument sind. In einfachen Worten, das erste Argument ist, was ausgeführt werden soll, und das zweite ist, wann ausgeführt werden soll. Der Benutzereffekt wird bei jedem Render ausgeführt, was bedeutet, dass wir, wenn die Anzahl ändert oder wenn dies geschieht, dies sich die Anzahl ändert oder wenn dies geschieht, dies durch Abhängigkeiten steuern können. Wenn Sie mit Klassenkomponenten vertraut sind, ist use effect eine Kombination aus Komponente wurde eingehängt, Komponentendaten aktualisiert und Komponente wird gemountet. Sehen wir uns Variationen der Nutzungseffekt-Hooks an, die nur drei Variationen des Benutzervektors sind. Verwenden Sie es zunächst ohne Abhängigkeiten. Zweitens Benutzereffekt mit einem leeren Array und dritter Benutzer mit Variablen. Sehen wir uns die erste Variante des Benutzer-Vektor-Hooks an. Richtig? Benutze es und übergebe nur die Callback-Funktion. Und in dieser Funktion möchte ich unseren Webtitel mit derselben Methode aktualisieren. Also richtig, der Dokument-Punkt-Titel entspricht zwei in Backticks, Dollar-Konto neue Nachrichten und speichern Sie es. Aktualisieren Sie die Seite und sehen Sie, wann immer diese Komponente rendert, ob x r1 und unser Titel mit unserer Nachricht aktualisiert wird. Wenn nun etwas an dieser Komponente geändert wird, klicken wir auf diese Schaltfläche und sie läuft, verwenden Sie ein Vektorbuch mit dem Titel Änderung mit Zähler. Wenn wir also user back to hook ohne Abhängigkeiten verwenden, wird use effect bei jeder einzelnen Änderung in dieser Komponente ausgeführt . In diesem Fall handelt es sich um eine App-Komponente, da wir Ideen in der App-Komponente beeinflussen würden. Sehen wir uns nun an, wie der Effekt mit einem leeren Array verwendet wird. In demselben Beispiel übergeben wir also ein leeres Array Endbenutzer-Faktenabhängigkeiten. Und mal sehen, was passiert ist. Speichern Sie es also und werfen Sie einen Blick darauf, aktualisieren Sie die Seite und sehen Sie uns, ob Exelon beim Rendern der Komponente angezeigt wird. Wenn wir jetzt auf diese Schaltfläche klicken, bedeutet das, dass sich der Zähler ändert, aber der Titel funktioniert nicht mit dieser Änderung. Wenn wir bei Abhängigkeiten ein empty übergeben, wird use effect nur einmal ausgeführt. Wenn unsere Komponente zum ersten Mal gerendert wird. Danach werden wir nie mehr weglaufen. Es ist nützlich, wenn wir früher Daten von der API oder dem Server abgerufen haben, die Daten abrufen , wenn die Komponente zum ersten Mal gerendert wird. Übrigens von uns ist Hook in der Beschreibung verfügbar. Sehen wir uns nun die letzte Variante des Benutzereffekts an, nämlich welche Variablen. Um dieses Konzept zu verstehen, erstelle ich einen anderen Zustandsvariablennamen oder die Account-Schaltfläche, die den von Phi konterten Wert erhöht. Jetzt möchte ich den Titel ändern, wenn wir nur einen anderen Zählstatus ändern oder wenn wir eine andere Zählvariable in dieser Abhängigkeits-LA übergeben müssen . Und ich ändere diese Zählvariable mit einem anderen Konto. Speichern Sie die Änderungen und werfen Sie einen Blick darauf, aktualisieren Sie die Seite und sehen Sie, wie sie beim Rendern perfekt funktioniert. Wenn ich jetzt auf diese andere Count-State-Variable klicke, wird der Titel mit diesem Band aktualisiert. Aber wenn wir auf diese alte Schaltfläche klicken, wird es nicht funktionieren, da wir unser neues Array zur Variablenunabhängigkeit übergeben. Verwenden Sie es also nur, wenn sich der Wert dieser Zustandsvariablen ändert und Sie mehr Variablen mit einem Komma übergeben können . Der letzte Teil dieses Use-Effekt-Hooks ist nun die Bereinigungsfunktion. Und für Anfänger ist es etwas verwirrend. Lassen Sie uns das mit einem anderen Beispiel verstehen. Damit jeder es verstehen kann. Hier habe ich die setInterval-Funktion namens Countdown-Timer verwendet . Dieses Intervall wird nicht angehalten wenn wir nicht die Funktion „ Intervall löschen“ verwenden. Wenn wir den Status mit setInterval setzen und dieser Nebeneffekt nicht bereinigt wird , wenn unsere Komponenten auf Hügeln sind, oder wir ihn nicht mehr verwenden sollen, wird der Zustand mit der Komponente zerstört, aber wird die Handelsintervall-Funktion weiterlaufen. Und das macht unsere Anwendungen langsam und leistungsschwach. Daher ist es wichtig, diese Funktionen zu bereinigen. Um die Bereinigungsfunktion zu verwenden, müssen wir die schriftliche Funktion in use effect ausführen. Lass mich dir das hier zeigen. Bei dieser Verwendung hätte ich, wenn ich es getan hätte, die Pfeilfunktion geschrieben. Und innerhalb dieser Funktion löscht iodid das Intervall und übergibt den Variablennamen der setInterval-Funktion, die Timer ist. Jetzt wird die Cleanup-Funktion aufgerufen , wenn die Komponente ausgehängt wird. In diesem Beispiel ist es schwer zu erkennen, ich habe einen Zähler erstellt und diesen Zähler dann auf buttonClicked um eins aktualisiert . Jetzt erstelle ich eine neue Benutzervektorfunktion , die Abhängigkeiten zählt und console.log um den Effekt mit der Zählvariablen schreibt. Wenn sich die Zählvariable ändert, wird Benutzer ausgeführt und jetzt schreibe ich die Rückgabefunktion. Innerhalb dieser Funktion konsolere ich einfach dot log bereinigen. Auch mit zählvariabler. Wir kommen gerade auf die Idee wann die Bereinigungsfunktion funktionieren wird. Speichern Sie also die Änderungen und werfen Sie einen Blick darauf, aktualisieren Sie die Seite und es funktioniert mit dem Post-Rendern. Wann immer diese verwendet werden, wenn ich wieder laufen könnte, wird die gesamte Bereinigungsfunktion angehalten, und dann wird diese Callback-Funktion ausgeführt. Sehen wir uns diese Folie an. Hier geht es um den vorgeschlagenen Render. Und wenn wir auf diese erhöhte Schaltfläche klicken, bedeutet dies , dass dieser Benutzer so weit ausgeführt wird , dass die Bereinigung mit dem Wert 0 ausgeführt wird. Und dann gibt die Callback-Funktion print für den Wert eins aus. Jetzt klicken wir wieder auf diese Schaltfläche, wo vorherige Bereinigungsfunktion ausgeführt wird , und rufen dann den Hintergrund auf. Daher ist nicht in jedem Fall eine Bereinigungsfunktion erforderlich. Dies ist nur in wenigen Fällen erforderlich, z. B. wenn Sie einen wiederholten Nebeneffekt stoppen müssen , wenn Ihre Komponente montiert wird. So einfach ist das. Lassen Sie uns rekapitulieren. Was wir gelernt haben. Ich verwende effect wird verwendet, um Nebenwirkungen wie das Patchen von Datenmanipulationen mit Dokument und Fenster auszuführen . Timer-Ereignisse wie setInterval und setTimeout. Benutz es. Übernehmen Sie zwei Argumente. Die Kosten gelten pro Callback-Funktion und die Sekunde für Abhängigkeiten, was in einfachen Worten optional ist, was ausgeführt werden soll und wann ausgeführt werden soll. Es gibt drei Verwendungsvarianten, wenn ich ohne Abhängigkeiten zurechtkomme, was bedeutet, dass es mit dem Post-Render ausgeführt wird und auch bei allen Änderungen in dieser Komponente ausgeführt wird. Zweitens mit einem leeren Array, was bedeutet, dass es nur nach dem Rendern ausgeführt wird und zum Patchen von Daten nützlich ist. Drittens State und Requisiten, was bedeutet, dass es nach dem Rendern ausgeführt wird. Und dann ändert sich jede Variable, die wir an Unabhängigkeiten weitergeben. So einfach wird es laufen. Timeouts, Abonnements, Event-Listener und andere Effekte, die nicht mehr benötigt werden, sollten mit Hilfe der Cleanup-Funktion beseitigt werden . 6. Fetch mit AXIOS: In diesem Tutorial werden wir lernen, was ICOs sind, warum wir Daten mit einigen Fehlern weitergeben mussten , um sie zu vermeiden. Und mein Lieblingstrick , Axiome in React zu verwenden, im Grunde ein vollständiges Tutorial für z OS. Verschwenden wir also keine Zeit und fangen an. Was ist also zunächst Axiome? Axiom ist ein Paket, das verwendet wird, um eine HTTP-Anfrage vom Browser einfache und bessere Weise zu stellen Patch in JavaScript, wir können sagen, dass Axioms die aktualisierte Version davon ist, weil XES wir können sagen, dass Axioms die aktualisierte Version davon ist, weil XES bessere Funktionen bietet HTTP-Anfrage, fast 70% der Benutzer verwenden x equals, um HTTP-Anfragen für Back-End wie NodeJS zu stellen. Hier sind einige Vorteile der Verwendung von z OS in React. Wenn Sie die Bayes-Methode verwenden, müssen wir zuerst Daten in das JSON-Format übergeben und dann können wir sie verwenden. Aber SEOs verwendet standardmäßig das Jason-Format, was bedeutet, dass X Jahre Daten automatisch in das JSON-Format konvertieren, wenn wir Daten vom Server erhalten. Und deshalb müssen wir nur eine Methode verwenden. Und das macht unseren Code sauber und leicht verständlich. Seo's bieten alle Arten von HTTP-Methoden wie GET, Post, PUT, Elite und viele mehr. Wir können besser damit umgehen, indem wir x Jahre verwenden. Das ist also eine Menge für Theorien. Sehen wir uns nun an, wie XES in Reaktanten verwendet wird. Also hier erstelle ich eine neue React-Anwendung und entferne alle unnötigen Dateien. Gehen Sie jetzt zu Schadensersatz und.com. Dies ist eine meiner Lieblings-APIs zum Testen. Hier können wir die Dokumentation lesen, wenn Sie möchten. Scrollen Sie jetzt nach unten zu Ressourcen. Und hier können Sie verschiedene Daten wie Produktdetails, Wachen, Benutzer, Post usw. sehen . Also habe ich diesen Produktlink geöffnet. Jetzt sehen Sie diese Daten möglicherweise nicht im JSON-Format wie diesem, da ich dieses JSON-Format oder diese JSON-Erweiterung verwende. Dies ist ein sehr praktisches Tool, um JSON-Daten im Browser zu sehen. Sie werden es aus dem Chrome Web Store installieren. Hier können wir die Dummy-Daten von Produkten aus dieser API abrufen. Wir verwenden XES, um die API aufzurufen und diese Daten mithilfe der Map-Methode anzuzeigen. Öffnen Sie also zunächst die Nullen wie in NPM und sehen Sie, dass es 2,4 Millionen wöchentliche Downloads gibt, was verrückt ist. Kopieren wir also diesen npm-Befehl und fügen ihn in das VS Code Terminal ein und drücken die Eingabetaste. Es wurde also erfolgreich installiert. Wir können es anhand der package.json-Datei C überprüfen . Wir erhalten x Jahre Unabhängigkeit. Jetzt schließe ich diese Datei und in app.js, während ich axe importiere geht es aus dem Paket x equals. Wir können also Nullen in dieser Komponente verwenden. Hier möchte ich Daten über Komponenten weitergeben, die zum ersten Mal rendern , gegen die wir brauchen, oder? Es ist ein gebrauchter Effekt. Also schreibe ich use effect. Und das erste Argument ist die Callback-Funktion. Und das zweite Argument ist ein Abhängigkeitsarray. Also wollte ich nur einmal Daten weitergeben. Wenn Komponenten gerendert werden, übergebe ich ein leeres Array ohne Abhängigkeiten. In der Callback-Funktion holen wir jetzt Daten von der API ab. Nehmen wir richtig an, x Punkt hier geben wir Methoden wie GET, post, PUT, delete ein. Also schreibe ich es. In dieser Klammer übergeben wir nun die API. Also kopiere ich diese API und füge sie hier ein. Jetzt dasselbe wie bei der Fetch-Methode. Wir verwenden sie und verwenden die Pfeilfunktion und übergeben die Antwort als Parameter. Und dann trösten Sie diese Antwortvariable , um zu sehen, was wir bekommen. Speichern Sie also die Änderungen und werfen Sie einen Blick darauf. Wir bekommen also ein Objekt mit Config, Daten, Statuscode usw. Also bekommen wir im Datenobjekt die Produkte. Also müssen wir dieses Array in der State-Variablen speichern. Also zurück zu VS Code, und ganz oben erstelle ich eine Zustandsvariable namens products und übergebe ein leeres Array als Anfangswert und importiere usted Hook von React. Jetzt in diesem Fall verwenden wir Seitenprodukte und übergeben response.data Punktprodukte. Jetzt erhalten wir den Wert dieses Produkts in der Variablen des Produkts. In der schriftlichen Darstellung zeigen wir den Produktnamen und seinen Preis an. Also in geschweiften Klammern, Produktpunktzuordnung. Und darin übergeben wir die Callback-Funktion und übergeben Parameter wie product für ein einzelnes Produkt und einen Index. Vergessen Sie den Indexwert dieses aktuellen Produkts und geben Sie das h3-Tag zurück. Und innen passieren wir geschweifte Klammern, Produktpunkttitel und Dollar, Produktpunktpreis. Und wir übergeben den Index als Schlüsselwert. Speichern Sie jetzt die Änderungen und werfen Sie einen Blick darauf. Sehen Sie, wir bekommen Produktnamen mit ihrem Preis. Sie können Ihre Styles hinzufügen und sie cooler machen. Im Moment bin ich mit diesen Kacheln einverstanden , weil wir Axiome lernen. Und das ist unser Hauptaugenmerk. Sie werden also sehen, wie einfach und einfach es ist, eine HTTP-Anfrage zu stellen. Wenn Sie nun eine Post-Anfrage stellen möchten, müssen Sie diese Methode einfach mit Post und Genen als 0,48 verketten . Und wenn wir dann Daten senden wollen, können Sie diese Variable als zweiten Parameter nach der API übergeben , ganz einfach. Ich werde Ihnen alle Arten von Methoden vorstellen, Beispiele in meinem XES Ultimate Guide. Sie können es aus dem Beschreibungsfeld herunterladen. Sehen wir uns nun an, wie wir mit z OS eine Fehlerbehandlung durchführen können . Nach diesen zehn Methoden schreiben wir also die Cash-Methode. Diese Methode wird nur ausgeführt , wenn etwas schief gelaufen ist. In dieser dann-Methode können wir sagen, dass, wenn ein Fehler nur dann auftritt und diese Methode dann ausgeführt wird. Also übergeben wir den Fehler als Parameter und trösten diese Fehlervariable. Speichern Sie es jetzt und schauen Sie es sich an. Wir bekommen also nichts in der Konsole , weil es keinen Fehler gibt. Jetzt mache ich einen Tippfehler in dieser API-Schreibweise. Speichern Sie jetzt die Änderungen und werfen Sie einen Blick darauf. Sehen Sie, hier erhalten wir ein Fehlerobjekt mit Fehlercode, Fehlermeldung usw. Jetzt werden wir die Fehlermeldung im Browser anzeigen. Also erstellen wir eine weitere Zustandsvariable namens error und übergeben eine leere Zeichenkette als Standardwert. Stellen Sie jetzt im Käfig den Fehler Fehlermeldung ein und drucken Sie diesen Fehler im Browser aus. Hier können wir Bedingungen festlegen, wie wenn ein Fehler nicht gleich einer leeren Zeichenfolge ist, nur dann und dann ein Druckfehler. Speichern Sie also die Änderungen und werfen Sie einen Blick darauf. Siehst du, wir bekommen eine Fehlermeldung. Und wenn ich den Tippfehler entferne, wird keine Fehlermeldung angezeigt. Lassen Sie mich Ihnen jetzt meinen Trick zeigen, wie man Axiome benutzt. Hier sehen Sie also, dass wir die vollständige URL unserer API schreiben müssen, wenn wir sie aufrufen. In der Praxis haben Sie den gleichen Ursprung für alle Ihre APIs in einem Projekt. Ich bin also sehr faul darin, doppelten Code zu schreiben. Das ist keine gute Praxis. Also erstelle ich eine wiederverwendbare Variable und verwende sie in meinem Projekt. Also lass uns eine neue Datei namens XES dot js erstellen. Und in diese Datei habe ich x Jahre eingegeben. Erstellen Sie jetzt eine neue Variable namens instance. Du kannst es nennen, wie du willst. Es spielt keine Rolle. Und exportiere standardmäßig diese Variable. Hier schreibe ich X Jahre dot create. Und in dieser create-Funktion können wir ein Objekt übergeben. Und in diesem Objekt fügen wir eine Basis-URL hinzu. Und in umgekehrtem Komma habe ich diese Basis-URL und füge sie hier ein. Speichern Sie jetzt die Änderungen. Und in unserer App-Komponente entferne ich diese SEOs und importiere unsere neuen Axiome aus der Zeros Dot js-Datei. Speichern Sie jetzt die Änderungen und werfen Sie einen Blick darauf. Es funktioniert genauso wie zuvor. Jetzt müssen wir diese Basis-URL nicht mehr und wieder schreiben . Aber denken Sie daran, dass Sie X Jahre aus unserem neuen x importieren müssen, was fünf entspricht. Wenn Sie aus dem ursprünglichen Axioms-Paket importiert wurden, müssen Sie den Endpunkt mit der Basis-URL schreiben. Wenn Sie also bei dieser Methode einen Fehler erhalten , von dem Sie X Jahre importieren. Jetzt wartet der letzte und letzte Teil , XES mit Async, was es super cool macht. Async Await ist also der beste Weg , um mit Promises in JavaScript umzugehen. Lassen Sie mich erklären, wie Sie in unsere App-Komponente einfügen, ich erstelle eine neue Funktion für Patch-Produkte, Datenfunktion erhalte Produkte. Und innerhalb dieser Funktion möchten wir await for response verwenden. Also müssen wir eine asynchrone Funktion hinzufügen, und nur dann können wir await in dieser Funktion verwenden. Also richtig, von acht Nullen erhalten Punkte Produkte und speichern diesen Wert in einer Variablen namens response und trösten diese Antwort. Wenn wir also diese Funktion aufrufen und diese API aufrufen, wird sie nicht ausgeführt, bis wir Daten erhalten . nächsten Zeile. Jetzt kommentiere ich diese Axiome aus der Musik aus und nenne unsere neue Funktion darin. Speichern Sie jetzt die Änderungen und werfen Sie einen Blick darauf. Wir erhalten das gleiche Objekt, das wir in der Methode then erhalten. Lassen Sie uns also Produkte, Antwortpunktdaten und Punktprodukte festlegen , und wir lassen Daten in unserem Browser drucken. Einige von Ihnen fragen sich vielleicht, wie wir mit Fehlern in dieser Angelegenheit umgehen können? Die Lösung ist also, dass wir die try and catch-Methode verwenden müssen. Also schreibe ich trocken und wähle den zweiten Vorschlag aus. Und das wird Boilerplate erzeugen, versuchen zu fangen. Jetzt im Trockenen schreiben wir unsere gesamte Logik und engagieren uns. Wir schreiben Code für die Fehlerbehandlung. Ich bewege diese drei Linien hinein, versuche zu blockieren und einzugreifen. Ich sagte Adder und benutze diese Fehlermeldung. Also, wenn wir in diesem Versuchsblock nur dann Adder bekommen und dann wird diese Skizze laufen. Andernfalls ignoriert JavaScript dies für. Jetzt machen wir wieder Dipol. Speichern Sie die Änderungen. Schau mal, wir bekommen oben Adder und es funktioniert gut. Also zurück zum VS-Code. Und sehen Sie, diese Postkarte sieht ein wenig verwirrend aus und unser neuer Code sieht ziemlich sauber und leicht zu verstehen aus. Versuchen Sie also, async await mit x Jahren zu verwenden. Es wird auch bei Ihrem Chef und Ihrem Kunden einen guten Eindruck hinterlassen . Wenn Sie eine schnelle Überarbeitung der SCOs vornehmen möchten, laden Sie meinen ultimativen Axiom-Leitfaden aus dem Beschreibungsfeld herunter. In diesem Handbuch schreibe ich alle Beispiele für verschiedene Methoden und Anwendungsfälle. Und als Bonus erfahren Sie, wie Sie XES mit async await verwenden. 7. useContext: Was ist verwendeter Kontext. Use contexts hook wird verwendet, um globale Daten in der React-Anwendung zu verwalten, wie globaler Status, Team , Dienste, Benutzereinstellungen usw. Lassen Sie uns verstehen, warum wir Kontext-Hook verwenden müssen. Also hier ist eine Situation. Stellen Sie sich vor, Sie erstellen eine Anwendung mit dieser Art von Komponentenstruktur. Die Hauptkomponente ist also App, und dann hat sie für untergeordnete Komponenten. Und j Komponenten haben auch einige genetische Komponenten. Es ist also wie eine Hierarchie von Komponenten. Stellen Sie sich nun vor, wir haben Benutzerdetails, diese App-Komponente, und wir benötigen Benutzerdetails in diesem einzigen Beitrag. Wenn Sie Requisiten verwenden, um diese Details zu teilen, müssen wir zuerst die Hauptkomponente übergeben , dann den Feed übergeben und dann den Beitrag folgen. Und dann erhalten wir Benutzerdetails in einer einzigen Post-Komponente. Es ist also sehr nervig und schwer zu warten. Mithilfe von Kontexten können wir globale Daten für unsere React-Anwendung erstellen . Und wir müssen diese Daten nicht durch all diese Komponenten weitergeben . Begann, auf diese Daten in allen Komponenten zuzugreifen, die wir brauchten. Sehen wir uns nun an, wie man Kontexte erstellt. Um Kontexte in React zu erstellen , sind also drei einfache Schritte erforderlich. Erstens das Erstellen des Kontexts, zweitens das Bereitstellen des Kontextes und drittens das Konsumieren des Kontextes. Beginnen wir also mit Schritt Nummer eins und erstellen die Kontexte. Wir erstellen den globalen Status für die Benutzeranmeldung in beiden Funktionen zum Erstellen von Kontexten aus der React-Bibliothek. Diese Funktion wird verwendet , um Kontexte zu erstellen. nun direkt vor Ihrer Funktionskomponente Erstellen Sie nun direkt vor Ihrer Funktionskomponente Kontext und speichern Sie ihn in einer Variablen namens Login-Kontexte. Sie können alles nehmen, was Sie wollen. Nun zu Schritt Nummer zwei , der den Kontext liefert. Nachdem wir den Kontext erstellt haben, müssen wir definieren, in welchen Komponenten wir auf diese Kontexte zugreifen möchten. Sie also in dieser Hierarchie Wenn Sie also in dieser Hierarchie Daten an eine einzelne Post-Komponente übergeben möchten, müssen wir nur die Daten der Hauptkomponente zur Verfügung stellen , auf die in allen untergeordneten Komponenten zugegriffen werden kann . In unserem Beispiel möchten wir also auf diese Daten in der Hauptkomponente zugreifen. Und es hat untergeordnete Komponente Single Post, richtige Login-Kontexte Punktanbieter und Hinzufügen einer Schuldenkomponente zwischen diesen Kontext-Anbietern, unabhängig von der Komponente, die Sie zwischen diesem Anbieter, ihm und seinem Kind übergeben -Komponente kann auf diesen Kontext-Wert zugreifen. Jetzt können wir value übergeben, indem wir das value-Attribut verwenden. Also richtig, der Wert ist gleich in geschweiften Klammern, ich gehe hier einfach durch. Sehen wir uns nun an, wie Sie auf diese Variable in unserer Single-Post-Komponente zugreifen können. Öffnen Sie also die Komponente , in der Sie diese Variable verwenden möchten. Um die Variable Login-Kontexte zu verwenden, müssen wir verwenden, contexts hook verwenden. So wichtig verwenden Sie Kontext-Hook aus der React-Bibliothek Und innerhalb dieser funktionalen Komponente verwenden Sie Kontexte. Und es akzeptiert ein Argument, nämlich die Login-Kontexte. Daher müssen wir diese Anmeldekontexte aus unserer App-Komponente importieren . Exportieren wir das also zuerst aus der App-Komponente und importieren dann Anmeldekontexte aus der App-Komponente. Übergeben Sie diese Anmeldekontexte nun innerhalb des US-Kontext-Hooks. Und wir speichern diesen Wert in einer Variablen namens login. Also lass es uns trösten, die Änderungen speichern und einen Blick darauf werfen. Siehst du, wir kommen durch. Welchen Wert Sie auch immer in diesem Kontext-Provider übergeben, ein Überschuss dieses Werts durch die Verwendung von use contexts hook. Wenn Sie diese drei Schritte verstehen, herzlichen Glückwunsch, Sie verstehen den Hook für die Verwendung von Kontexten. Lassen Sie uns kurz zusammenfassen, was wir gelernt haben. Use contexts wird verwendet, um globale Daten in React zu verwalten. Wir müssen diese Daten also nicht über Requisiten von der ersten übergeordneten Komponente zur letzten untergeordneten Komponente übergeben . Wenn wir Daten nur für untergeordnete Komponenten übergeben möchten, können Sie Requisiten verwenden. Verwenden Sie nicht überall Kontexte. Benutze es einfach, wenn du es brauchst. Um die Verwendung von Kontexten zu verwenden, müssen Sie nur drei Schritte ausführen. Erstellen Sie zunächst den Kontext mithilfe von create context und geben Sie den Kontexten einen Namen, wie wir es bei Login-Kontexten getan haben. Nun zweite Einheit, um zu entscheiden , welche Komponenten auf diese Kontexte mit der Verwendung von Kontexten zugreifen können dot, provider, und andere Komponenten zwischen diesem Provider-Tag im Wert Attribut übergeben, Wert übergeben in geschweiften Klammern. Und im letzten Schritt müssen Sie diese Kontexte aus Ihrer Datei importieren und diesen Kontext innerhalb Ihrer verwendeten Kontexte übergeben, einbinden und in Variablen speichern, so einfach ist das. Jetzt sehen Sie, dass unsere App-Komponente ein bisschen hässlich aussieht, aber es ist einfach. Kontexte. Stellen Sie sich vor, wir hätten Phi oder sechs Kontexte, dann möchten Sie in diesem Projekt einfach nicht programmieren. Und wenn Sie für ein Unternehmen arbeiten, mögen sie auch keinen unorganisierten Code. Lassen Sie uns also eine organisierte Struktur für die Erstellung von Kontexten erstellen. Also erstelle ich zunächst einen neuen Ordner im Quellordner namens Kontexte. Wir erstellen alle Kontexte hier in diesem Ordner. Erstellen Sie nun eine neue Datei in diesem Ordner mit dem Namen login contexts provided ab.js. Und in dieser Datei speichern wir unsere alte Login-Kontext-Logik. Also erstelle ich zuerst ein Bild mit einem FCE. Jetzt kopiere ich einfach diese Erstellungskontexte aus der App-Komponente und füge sie hier ein. Im Gegenzug müssen wir den Anbieter festlegen. Fügen Sie also Login-Kontexte dot provider und inside Debt Provider hinzu. Wir müssen alle Kinder weitergeben, direkt in Requisiten Kinder und die Kinder innerhalb des Versorgers weitergeben. Geben Sie nun im Provider ein value-Attribut an. Und ich möchte den Datumswert für diese Kontexte übergeben. Also erstelle ich Benutzerdetails und übergebe den Standardwert true. Sie können jeden Datentyp übergeben und diese Zustandsvariable als Wert übergeben. Nun zurück zu unserer App-Komponente, Ein wichtiger Anbieter für Anmeldekontexte und Ersetzung des Anbieters durch Anbieter für Anmeldekontexte. Weil wir Kinder an den Schuldenanbieter weitergeben und unnötige Dinge aus dieser Komponente entfernen . Nun, letzter und letzter Schritt, Gene, gehen diese Kontexte von der App zu unseren Kontexten. Es ist weniger Anbieter von Anmeldekontexten. Und das war's. Wir haben diesen hässlichen Code in organisiertem Code organisiert. 8. useRef: Was ist also der Benutzer? Benutzer F ermöglicht uns den Zugriff auf DOM-Elemente und Erstellen veränderbarer Variablen , die die Komponente nicht erneut rendern. Dies sind die beiden häufigsten Anwendungsfälle von user if hook. Lassen Sie mich Ihnen zeigen, wie Sie eine veränderbare Variable erstellen. In diesem Beispiel habe ich ein Eingabefeld und ein onchange-Ereignis erstellt Ich aktualisiere diesen Namensstatus mit dem aktuellen Eingabewert und zeige den Namen hier an. Stellen Sie sich nun vor, wir möchten zählen wie viele Anbieter auftreten , wenn wir den Namen eingeben. Als ich meinen Schülern das beibringe, fragten sie mich, warum wir es nicht verwenden können, nutzten es dafür. Und ich denke, du hast vielleicht die gleiche Frage. Also lass uns das live sehen. Warum wir keinen usted Hook verwenden, was count rendert. Also erstelle ich zuerst eine weitere Zustandsvariable und gebe den Namen count und übergebe 0 als Standardwert. Jetzt im Use-Effekt werde ich die Anzahl für jedes Rendern um eins aktualisieren. Iodid sagte Vorheriges zählen, Pfeilfunktion, vorheriges plus eins. Und nach dem Namen werde ich die Zählvariable anzeigen. Speichere es jetzt. Wirf einen Blick darauf. Sehen Sie, count wird ständig aktualisiert, denn wenn diese Komponente gerendert wird, wird der Rabatt variabel um eins aktualisiert. Und da diese Zustandsvariable aktualisiert wird, wird die Komponente immer wieder gerendert. Wir stecken also in einer Endlosschleife fest, weil wir use date verwenden. Lassen Sie uns das also mit einem Benutzer-App-Hook lösen. Also entferne ich diese Zustandsvariable und verwende effect und importiere user f aus der React-Bibliothek. Nun richtig, Benutzer f. Und hier können wir einen Standardwert angeben, wie Sie angeben. Diese Funktion gibt jetzt ein Objekt mit einer Eigenschaft zurück , die aktuell ist. Speichern wir es also in einer variablen Anzahl. Und lassen Sie uns diese Variable trösten c, Wir bekommen ein Objekt mit einer aktuellen Eigenschaft. Wir können diesen Wert aktualisieren oder anzeigen, indem wir die Eigenschaft count dot current hier rechts verwenden, Dunkelstrom zählen und die Änderungen speichern. Lassen Sie uns nun diesen Wert aktualisieren , wenn die Komponente gerendert wird. Verwenden Sie eine Pet Count gleich, um den Punktstrom plus eins zu zählen. Speichern Sie es und schauen Sie es sich an. Wenn wir in das Eingabefeld eingeben, wird die Anzahl um eins aktualisiert. erste Anwendungsfall von Benutzer F besteht also darin, eine veränderbare Variable zu erstellen, ohne ein erneutes Rendern zu verursachen. Sehen wir uns nun den zweiten Anwendungsfall der Benutzer-App an, die auf die DOM-Elemente zugreift. In React können wir dem Element ein href-Attribut hinzufügen und direkt darauf zugreifen. Lassen Sie uns das mit dem Beispiel verstehen. Also hier haben wir ein Eingabefeld und eine Schaltfläche. Wenn wir auf diese Schaltfläche klicken, wird diese Funktion ausgeführt. Jetzt möchte ich die Breite dieser Eingabe ändern. Wenn wir auf diese Schaltfläche klicken. Wir können das in Vanilla JavaScript tun, indem document.getElementById oder den Klassennamen verwenden. Aber in React müssen wir das nicht tun. Wir verwenden direkt, verwenden rep und wir erhalten dieses Element in einer Variablen. Lass mich dir das zeigen. Bisher am wichtigsten ist es, Rep, Hook und Write user zu verwenden und das in Variablen zu speichern. Geben Sie dieser Eingabe nun eine Eigenschaft , die f dem Eingabeelement entspricht, nämlich dem Namen unserer ref-Variablen. Sehen wir uns nun den aktuellen Wert C an. Wir erhalten diese Eingabefüllung in der Eigenschaft current. Jetzt ändere ich diese Eingabe um 2300 Pixel. Also, während wir Vanille-JavaScript machen, richtig? Eingabeelement dot current, Punktstil, Punktbreite entspricht 300 Pixel. Hier ist der Punktstrom des Eingangselements unsere Eingangspille. Also speichere es und sieh es dir an. Sehen Sie, wenn wir auf diese Schaltfläche klicken, wird die Eingabebreite auf 300 Pixel erhöht. Konzentrieren wir uns nun auf diese Eingabe, wenn wir auf diese Schaltfläche klicken. Also zurück zum VS-Code. Und in derselben Funktion muss ich hinzufügen, rate was? Richtig? Eingabeelement Punkt aktueller Punktpokus. Speichern Sie also die Änderungen und werfen Sie einen Blick darauf. Wenn wir auf diese Schaltfläche klicken, wird die Eingabebreite vergrößert und die Eingabe ist scharf. Es ist dasselbe wie in Vanilla JavaScript, nur um das Eingabeelement dot current zu verwenden. Danach können Sie auf alle JavaScript-Methoden für das Element zugreifen . Nun fragen sich einige von Ihnen vielleicht, wie können wir wissen, welche Methoden wir mit Elementen verwenden können und wie können wir uns daran erinnern? Die Antwort lautet also, dass Sie sich keinen Methodennamen merken müssen. Lassen Sie mich Ihnen meinen Trick zeigen, um alle Methoden zu sehen , die wir mit Elementen anwenden können. Hier. Einfach diese aktuelle Eigenschaft entfernt und gespeichert. Jetzt können Sie in der Konsole dieses Eingabeelementobjekt mit der aktuellen Eigenschaft sehen . Klicken Sie nun auf diesen kleinen Pfeil und dann erneut auf diesen Pfeil. Hier sehen Sie alle Methoden, die wir auf dieses Element anwenden können. Welches Beispiel wollen wir Stil anwenden. Scrollen Sie also nach unten und klicken Sie auf dieses Symbol, um mehr Eigentum zu sehen. Hier können Sie die Stileigenschaft sehen. Klicken Sie darauf und Sie können alle Stileigenschaften sehen , so einfach ist das. Lassen Sie uns zusammenfassen, was wir gelernt haben. Verwenden Sie rep ermöglicht es uns, veränderbare Variablen zu erstellen , die kein erneutes Rendern verursachen. Und es ist sehr nützlich, auf DOM-Elemente zuzugreifen, ohne document.getElementById oder Klassennamen zu schreiben. Also hier ist die Syntax von User App Hook. Hier können wir den Standardwert dieser Variablen übergeben, und er ist optional. Diese Variable hat ein Objekt, und dieses Objekt enthält nur eine Eigenschaft , die aktuell ist. Wenn wir darauf zugreifen oder aktualisieren möchten, müssen wir einen variablen Punktstrom verwenden. Wir können auch auf Elemente zugreifen, indem wir ihr app-Attribut verwenden. Erinnern Sie sich an meinen Trick, mit Hilfe der Konsole können wir alle Methoden sehen. 9. useReducer: Was ist also ein Nutzen? Das Reduzierstück. Reducer wird verwendet, um den Status in unserer React-Anwendung zu verwalten. Mit anderen Worten, use reducer funktioniert so, wie es eine Anweisung tun soll. Jetzt fragen Sie sich vielleicht, was ist State Management? Daher wird State Management verwendet, um alle Anwendungszustände auf einfachere Weise zu verwalten . Um einfache und saubere Kohle für alle Bundesstaaten zu schreiben und immer den Benutzer-Reduzierhaken zu verwenden , wenn Sie viele Zustände und Methoden zu handhaben haben . Lassen Sie uns also verstehen, verwenden Sie Reducer mit dem Beispiel. Hier habe ich eine einfache Gegenanwendung mit dem US-Did-Hook erstellt . Wir haben also eine Zählervariable und zwei Tasten, erhöhen und verringern. Wenn wir also auf die Schaltfläche „ Erhöhen“ klicken, Zählung um eins erhöht. Und wenn wir auf Grad beta1 klicken, verringert sich die Zählung um eins. Sehr einfaches Beispiel. Lassen Sie uns nun in diesem Beispiel use reducer anwenden. Lassen Sie mich also zunächst diese Zustandsvariable bereinigen. Nun, wichtig, Reducer Hook React-Bibliothek in funktionaler Komponente zu verwenden , oder? Reduzierstück verwenden. Reducer akzeptiert zwei Argumente. Die erste ist die Reduzierfunktion, die alle Zustände verwaltet. Und der zweite ist unser Standardzustand. Vergessen Sie vorerst diese Reduzierfunktion. Wir werden das nach der Erklärung sehen. Definieren wir nun zunächst unseren Standardstatus. Also werde ich ein Objekt erstellen , in dem wir alle Zustände definieren können. Schreiben Sie also den Anfangszustand gleich Objekt. Wir werden keine Variablen zählen. Zählen Sie also Doppelpunkt 0. Übergeben Sie jetzt diesen Ausgangszustand hier. Dieser Benutzer-Reducer gibt ein Array zurück, das genauso ist wie Hook, was bedeutet, dass das erste Element den aktuellen Status zurückgibt und das zweite Element eine Funktion zurückgibt , die uns hilft, diesen Zustand zu aktualisieren. Verwenden wir also die additive Restrukturierung. diese Variable speichern, nennen wir post element als state. Und der zweite ist der Versand. Es ist der gebräuchlichste Name für die Verwendung Reducer. Wenn wir einen anderen Namen annehmen wollen, nimmst du den. Es liegt ganz bei dir. Definieren wir nun unsere Reduzierfunktion, die der wichtigste Teil von uns ist, um unseren Haken zu reduzieren. In dieser Funktion werden wir also unsere eigene Logik für diesen Benutzer-Reducer schreiben. Reducer-Funktion hat zwei Parameter. Der erste Parameter ist state, was bedeutet, wo sich unsere Anwendung gerade befindet. Und der zweite Parameter ist action, was bedeutet, welche Aktion wir ausführen müssen. Beispiel, erhöhen, verringern usw. Ich weiß, das ist etwas verwirrend. Aber nachdem Sie das Pull-Beispiel abgeschlossen haben, werden Sie es richtig verstehen. Jetzt gibt diese Funktion den aktualisierten Status zurück. Im Moment gebe ich nur das Objekt mit count und current count zurück , was dieser Status Punktzahl plus eins ist. Um diese Funktion aufzurufen, verwenden wir die Versandfunktion. Hier. In der Funktion „Anzahl erhöhen“. Ich rufe einfach den Dispatch an und gebe nichts weiter. Jetzt lösche ich diese Set-Anzahl, und hier schreibe ich State Dot Count. Speichern Sie jetzt die Änderungen und werfen Sie einen Blick darauf. Sehen Sie, wenn wir auf diese Schaltfläche „Erhöhen“ klicken, wird die Anzahl um eins erhöht. Sehen wir uns nun an, wie man verschiedene Aktionen wie Erhöhen und Verringern nennt . Also übergeben wir zuerst das Objekt in der Versandfunktion mit der Typeigenschaft Doppelpunkt in Griechenland. Jetzt müssen wir diesen Typ in dieser Reduzierfunktion behandeln. Sperren wir also diesen Aktionsparameter, damit wir wissen, was wir die Änderungen speichern und einen Blick darauf werfen können. Wenn wir auf diese vergrößerte Schaltfläche klicken, erhalten wir ein Objekt mit der Eigenschaft. Was auch immer wir in dieser Spread-Funktion übergeben, wir können mit diesem Aktionsparameter darauf zugreifen. Verwenden wir also ein Schaltzahnrad um verschiedene, unterschiedliche Aktionen zu verwalten. Sie können if else verwenden, if. Aber ich mag Switch Case, richtig, süß. Und pass hier vorbei, exon dot type und drin, richtig? Erster Fall, der eine Zunahme dieser ist. Ich hatte das geschrieben. Nun zum zweiten Fall, der verringert wird, wird dieselbe Zählung umgeschrieben, aber minus eins. Und zuletzt übergeben wir einen Standardfall und geben den gleichen Status zurück. Wenn wir also einen anderen Typ außer increase und decrease übergeben , wird dieser Standardwert in einer verringerten Zählfunktion ausgeführt. Wir schreiben, weißt du was, oder? Versenden Sie den Objekttyp, verringern Sie, speichern Sie die Änderungen und werfen Sie einen Blick darauf. Siehst du, es funktioniert gut. Lassen Sie uns zusammenfassen, was wir gelernt haben. Reducer verwenden wird verwendet, um komplexe Zustände in der React-Anwendung zu verwalten . Also hier ist die Syntax von User Reducer Hook. Es braucht zwei Argumente. Die erste ist die Reducer-Funktion, in der wir unsere eigene Logik schreiben. Und das zweite Argument ist der Anfangszustand , der Objekt aller Variablen ist. Jetzt gibt dieser Hook ein Array mit zwei Elementen zurück. Deshalb verwenden wir die zusätzliche Strukturierung. Das erste Element ist für den Überstromzustand, reduzieren Sie unseren Ausgangszustand. Und das zweite Element wird ausgelöst indem das gerade, einfach aktualisiert wird. Jetzt neu definierte Reduzierfunktion, die zwei Parameter hat. Die erste wird verwendet, um auf den aktuellen Status zuzugreifen, und zweitens wird eine Aktion reduziert, um verschiedene, unterschiedliche Aktionen zu erhalten. Was auch immer wir in dieser verteilten Funktion übergeben, wir können mit diesem Aktionsparameter in der Reducer-Funktion darauf zugreifen . Und dann können wir mit der Verwendung von switch case verschiedene Aufgaben ausführen. Das war's. In diesem Beispiel habe ich mich bei der Verwendung von type in string wenig geirrt. Wir müssen uns also an zwei verschiedenen Stellen um die Rechtschreibfehler kümmern . Stattdessen können wir also ein Objekt mit dem Namen action erstellen. Und wir verwenden immer Großbuchstaben für dieses Aktionsobjekt. Wann immer wir das sehen, wissen wir, dass es für Reducer ist. Also erstelle ich in diesem Objekt zuerst Erhöhen, Erhöhen und Verringern oder Verringern. Jetzt ersetze ich es auf Displays durch Aktionen, die in der Zerstreuung zunehmen und abnehmen. Schreiben Sie auch Aktionserhöhung und Aktionspunktgrade um. Jetzt gibt es also keine Möglichkeit für Rechtschreibfehler. Und wenn wir den Namen ändern möchten, können wir dieses Objekt direkt aktualisieren und an anderen Stellen wird es automatisch aktualisiert. Jetzt möchte ich diese drei Variablen ausschneiden und am Ende dieser Komponente einfügen. Unser Code sieht also sauber und leicht zu lesen aus. 10. useLayoutEffect: Was wird also verwendet? Layout-Effekt? Sie verwenden den Layouteffekt, der genau so funktioniert wie der Hughes-Effekt, aber der Unterschied besteht darin, wann er ausgeführt wird. Verwenden Sie also die Faktenläufe, nachdem die Kuppel im Browser gedruckt wurde. Normalerweise läuft der Effekt jedoch bevor die Kuppel im Browser gedruckt wird. Wann immer wir also Code ausführen möchten , bevor die Kuppel gedruckt wird, möchten wir die Höhe, Breite oder irgendetwas, das mit dem Layout zusammenhängt, eines Elements messen . Wir können den Layouteffekt verwenden. Und es läuft synchron, was bedeutet, dass es die erste Zeile ausführt und nur dann zur zweiten Zeile wechselt , wenn die Ausführung in der ersten Zeile abgeschlossen ist. Der häufigste Anwendungsfall Layouteffekt besteht darin, die Dimension des Layouts zu ermitteln. Und deshalb wird sein Name verwendet. Layout-Effekt. Lass mich dir zeigen, wann es läuft. In diesem Beispiel gibt es eine Umschaltfläche, bei der dieser Text umgeschaltet wird , und einen Use-Effekt mit Abhängigkeitsumschaltung. Dieser Benutzer wird ausgeführt, wenn sich dieser Umschaltstatus ändert und der Druckverwendungseffekt in der Konsole angezeigt wird. Zuerst importiere ich einen riesigen Layouteffekt aus der React-Bibliothek, und jetzt dupliziere ich diesen Code und ersetze use effect durch use layout effect. Speichern Sie jetzt die Änderungen und werfen Sie einen Blick darauf. Sehen Sie, wann die Komponente gerendert wird, beide Hooks werden ausgeführt Wenn ich jetzt wieder auf diesen Toggle-Button klicke , werden beide Hook ausgeführt. Aber konzentriere dich hier. Layouteffekt verwenden wird immer zuerst ausgeführt. Jetzt denkst du es liegt daran, dass wir es schreiben, bevor du es sagst. Also bewege ich den Layouteffekt nach der Verwendung von Vektor-Hook und schaue mal, sehe, benutze Layout-Effekt wird immer Post laufen. Der Workflow ist also Clostridien, die alle diese Komponenten berechnen und dann den geschichteten Effekt verwenden, dann druckt React alle Elemente auf die Kuppel. Und zuletzt wird ein Vektor ausgeführt. Dieser Prozess ist jedoch sehr schnell. Deshalb können wir es live sehen. Neunundneunzig Prozent Zeit. Wir verwenden, nutzen Effekt in unserem Projekt. Wenn das Projekt nicht so funktioniert, wie wir es möchten, versuchen wir nur, den Layouteffekt zu verwenden. Sehen wir uns nun den häufigsten Anwendungsfall an, offensichtlich Out-Effekt. Im gleichen Beispiel. Ich möchte die Dimension dieses Textes erhalten und dann fügen wir den Abstand oben so hoch wie seine Höhe hinzu. also für Zugriffs-DOM-Elemente Was sollten wir also für Zugriffs-DOM-Elemente verwenden müssen? Richtig? Es ist ein Benutzer. Also erstelle ich einen Benutzer, F- und VS-Code, auto wichtig benutze ref von React. Und deshalb liebe ich diese ESL und Erweiterung. Es ist ein großartiges Produktivitätstool. Was React-Entwickler. Jetzt speichern wir diesen Benutzer in einer Konstante namens Textumbruch und übergeben das href-Attribut an diesen Text. Nun haben wir zuerst versucht, diesen Use-Layout-Effekt zu verwenden, zu verwenden und auszukommentieren. Also in Gebrauch Effekt, umschreiben, Steuerreferenzpunkt aktuell, Punkt, Bounding Client racked bekommen. Mit dieser Funktion können wir alle Dimensionen dieses Elements abrufen. Lass es mich dir ganz schnell zeigen. Speichern Sie also zunächst diese unveränderliche Dimension. Jetzt konsolidieren wir uns und werfen einen Blick darauf. Und wir bekommen, weil wir eine Bedingung hinzufügen müssen , um zu überprüfen, ob dieser Textumbruch nicht null ist. Erst dann müssen wir diesen Code ausführen. Also richtig, wenn x ref dot current nicht gleich null ist und verschiebe diesen Code hinein. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Sehen Sie, wir erhalten das Bemaßungsobjekt mit allen Eigenschaften. Jetzt möchte ich für diesen Text genauso viel Padding Top wie seine Höhe hinzufügen . Schreiben Sie also x ref dot aktuellen Punktstil Punktfüllung oben entspricht invektiven Dollardimension Punkthöhe. Repariere es und speichere es. Sehen Sie, wenn wir auf diesen Umschalter klicken, posten Sie diesen Text hier, und dann bewegt er sich nach unten. Sehen Sie in der Zeitlupe. Das ist jetzt das Problem mit dem US-Effekt. Wir sehen diese Reibung in der Produktion. Jetzt ersetze ich den u-Effekt durch den Effekt „Layout verwenden“. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Sehen Sie, wir haben diese Reibung nicht gesehen, weil Layouteffekt vor dem Drucken der Kuppel ausgeführt wird . Also lasst uns rekapitulieren. Layout-Effekt der Nutzung. Layouteffekt verwenden ist der gleiche wie der Benutzereffekt-Hook. Aber der einzige Unterschied ist, wenn sie den Workflow ausführen, die Nachwelt. Ich berechne alle Mutationen, verwende dann den Layouteffekt und dann druckt das erneute Hinzufügen alle Elemente auf DOM. Und nach dieser Verwendung wird der Effekt ausgeführt. Und der zweite Unterschied besteht darin , dass der Verwendungslayouteffekt synchron und der Nutzungseffekt asynchron ist. Daher verwenden wir zu 99 Prozent der Zeit User Effect in unserem Projekt. Aber wenn dieser Use-Effekt nicht richtig funktioniert, verwenden wir nur den use layout-Effekt. Und ich zeige Ihnen den häufigsten Layouteffekt für Anwendungsfallmissbrauch. 11. useMemo: Was wird gebraucht Memo. Memo-Hook verwenden wird verwendet, um Memoisierung anzuwenden und zu reagieren. Was ist Auswendiglernen? Memoisierung ist eine Technik zur Verbesserung der Leistung von Code. Und es ist nützlich, teure Berechnungen bei jedem Rendern zu vermeiden , wenn sich der zurückgegebene Wert nicht ändert. Lassen Sie uns verstehen , was das Beispiel ist. In diesem Beispiel erstelle ich zwei Zustandsvariablen, Zahl, und diese Zahl dient zur Eingabe. Und übergebe diese Nummer in dieser teuren Funktion, die ich nach der Komponente deklariert habe. Im Grunde gibt diese Funktion dieselbe Zahl zurück. Aber nachdem ich diese unerwünschte Schleife, die ich nur zur Erklärung erstellt habe, in der realen Welt ausgeführt wurde, kann es sich um eine lange Berechnung handeln oder um etwas, das mehr Zeit in Anspruch nimmt und dann den Rückgabewert in der Berechnung speichert variabel. Jetzt ist dieser dunkle Zustand zum Umschalten des Dunkel- und Hellmodus vorgesehen. Und entsprechend dieser dunklen Variablen haben wir die Hintergrund - und Textfarbe geändert. Lass es mich dir zeigen. Wann immer wir den Wert dieser Eingabe erhöhen, wird diese teure Funktion ausgeführt und gibt einen neuen Wert in der Berechnung zurück und druckt ihn hier aus. Und wenn ich auf diesen Toggle-Button klicke, ändern sich Hintergrund- und Textfarbe. Konzentrieren Sie sich nun auf diese Berechnung. Immer wenn wir diese Zahl ändern, rufen wir diese teure Funktion und Konsole auf, die diese Schleife gestartet hat, aber die Aktualisierung dauert 0,5 oder 0,3 Sekunden. Das liegt an unserer kostengünstigen Funktion für unerwünschte Schleifen. Aber wenn wir auf diesen Toggle-Button klicken, dauert es auch einige Sekunden, um das Theme zu aktualisieren. Und UC-Konsole. Wieder wurde die Prince-Schleife gestartet und deshalb fügen wir dieses Delay-Interval-Team ein. Wenn wir also auf den Toggle-Button klicken, rendert React die Komponente erneut. Zuerst wird diese Leitung ausgeführt und sie ruft diese teure Funktion auf. Und das erfordert zusätzliche Arbeit. Und wir können das Team nicht sofort umschalten. Die Lösung ist also, wir diese Funktion nur ausführen , wenn diese Nummer geändert wird. Deshalb verwenden wir dafür den Use-Memo-Hook. Und die gute Nachricht ist Syntax von Memos dieselbe ist wie bei Hughes Effekt-Hook. So schnell habe ich use memo aus der React-Bibliothek importiert und in die Funktionskomponente eingefügt. Verwendung von Memo benötigt zwei Argumente. Die erste ist für die Callback-Funktion und die zweite für Abhängigkeiten. Wann immer sich also eine Variable aus dieser Abhängigkeit ändert, wird nur dann und dann diese Callback-Funktion ausgeführt. Also übergebe ich die Nummer in dieser Abhängigkeit LA. Und innerhalb dieser Callback-Funktion rufen wir diese teure Funktion und übergeben number als Parameter. Jetzt denkst du, was ist der Unterschied zwischen user und use memo? Effekt verwenden und Memo verwenden ist gleich. Der Unterschied liegt jedoch im Benutzer Wir können den Wert zurückgeben und ihn in einer Variablen speichern. Wir müssen eine weitere Zustandsvariable erstellen. Und dann können wir mit der Sollwertfunktion die Schulden aktualisieren. Aber in use memo können wir den Wert zurückgeben und wir können diesen Wert in einer Variablen speichern. Also speichere ich diesen Wert in der Säugetierberechnung. Jetzt entferne ich diese Zeile und am Ort der Berechnung rufen wir Memo-Berechnung auf. Speichern Sie jetzt die Änderungen und werfen Sie einen Blick darauf. Wenn wir die Zahl ändern, dauert es einige Sekunden. Und das ist offensichtlich, weil wir eine unerwünschte Schleife hinzufügen. Aber wenn wir auf diesen Umschalter klicken, dauert es keine zusätzlichen Sekunden. Und wir können sofort die Themen umschalten. Und diese Technik verbessert die Leistung unserer Anwendung, was in der heutigen Welt sehr wichtig ist. Lassen Sie uns zusammenfassen, was wir gelernt haben. Use memo wird verwendet, um die Leistung unserer React-Anwendung zu verbessern . Wir können die Ausführung unerwünschter Funktionen beim erneuten Rendern beenden. Also hier ist die Syntax des verwendeten Memo-Hooks. Es braucht zwei Argumente. Die erste ist die Callback-Funktion, die den Wert zurückgibt. Und hier speichern wir diesen Wert in einer Variablen. zweite Argument ist nun ein Abhängigkeitsarray, in dem wir Variablen hinzufügen können , wenn sich diese Variable ändert, nur dann und dann wird dieser Callback ausgeführt. Mit dieser Variablen. Wir drucken den Rückgabewert. Wir führen alle Nebenwirkungen im Gebrauchseffekt Hooke und alle teuren Funktionen durch, Berechnung im Gebrauch Memo-Hook, so einfach ist das. 12. useCallback: Was wird verwendet Callback. Callback verwenden wird verwendet, um eine memo-weise Funktion zurückzugeben. Und es ist auch nützlich, um zu verhindern , dass Funktionen beim Rendern neu erstellt werden . Ich weiß, das klingt etwas verwirrend, ist es aber nicht. Lassen Sie uns das mit dem Beispiel verstehen. In diesem Beispiel erstelle ich also zwei Zustandsvariablen. erste ist die Nummer für die Nummerneingabe und die zweite ist für das Toggle-Team. Dementsprechend ändern sich unsere Hintergrund- und Textfarbe. Jetzt haben wir eine Funktion namens calculate table, und sie gibt die ersten fünf Zeilen dieser Zahl stable zurück. In der realen Welt kann es so sein wie das Aufrufen von API. Jetzt habe ich hier eine einfache Komponente namens Drucktabelle zum Drucken der Tabelle erstellt eine einfache Komponente namens . Und ich gebe diese Funktion als Requisiten weiter. In dieser Komponente erstelle ich also Zustandszeilen und löse im Benutzersymbol diese Zeile und übergebe diese Berechnungstabellenfunktion. Funktion „Zeilen einfügen“. Damit die Werte von Eddie in Reihen variabel saßen. Und dann drucken Sie das Array dieser Zeile mit dieser Map-Methode, so einfach ist das. Sehen wir uns diese Folie an. Hier. Wir haben eine Eingabeaufforderung. Und danach drucke ich diese Tabelle mit der Bring-Table-Komponente. Und endlich haben wir den Toggle-Button, um das Team umzuschalten Wenn wir also auf den Toggle-Button klicken, ändert sich das Thema. Wenn wir die Nummer ändern, sehen wir die folgende Tabelle. Jetzt zeige ich dir das Problem. Lassen Sie mich zunächst die Konsole öffnen und die Seite aktualisieren. Sehen Sie, wann ich die doppelte Komponente zum ersten Mal rendern wird , wenn diese Drucktabelle ausgeführt wird. Jetzt habe ich die Zahl geändert und die Funktion „Tabelle berechnen“ wird sich ändern. Und es ist die Lese- und Drucktabellenkomponente endete wieder, in der diese Drucktabelle ausgeführt wird, was gut funktioniert. Wenn ich das Team jetzt erneut umschalte, konsultieren Sie diese druckbaren Läufe, was bedeutet, dass die druckbare Komponente erneut gerendert wird. Und wenn wir das Team umschalten, und das ist das Leistungsproblem denn wenn wir einen Status in dieser Komponente ändern, wird diese Funktion neu berechnet. Und selbst wenn unsere Zahl gleich ist, wird sie den gleichen Wert mit sowjetischen Dingen der neuen Instanz zurückgeben , es ist ein neues Ergebnis. Und dann rendert es die druckbare Komponente erneut. Jetzt müssen wir diese unerwünschte Funktionserneuerung beenden. Und das ist der Grund, warum wir Callback Hook verwenden. Und die gute Nachricht ist, dass der Rückruf von use genau so ist wie der Memo-Hook. Das ist also ein kleiner Unterschied in der Verwendung von Callback und Memo-Hook. Also use memory gibt den Memorize-Wert zurück und use Callback gibt eine Erinnerung zurück, die einfach ist. Also zuerst importierte ich use callback von React und füge hier hinzu, benutze Callback. Jetzt akzeptiert es zwei Parameter, wie use memo und use effect. Die erste ist die Callback-Funktion und die zweite ist Dependencies. Abhängigkeiten, ich schreibe Nummer. Im Callback kopiere ich einfach diese Return-Anweisung und füge sie ein. Jetzt können wir diese Funktion in einer Variablen namens calculate table speichern . Und ich entferne diese alte Funktion. Also hier, wenn wir use memo verwenden, erhalten wir nur diesen Wert in dieser Variablen. Aber wenn wir use callback verwenden, dann erhalten wir diese volle Funktion in dieser Variablen. Und wenn wir diese Funktion ausführen wollen, müssen wir so schreiben. Also immer wenn wir die Nummer ändern, wird nur dann und dann diese Funktion ausgeführt. Speichern Sie jetzt die Änderungen und werfen Sie einen Blick darauf. Wenn wir die Zahl erhöhen. Es kann diese Drucktabellenläufe lösen. Und jetzt klicke ich auf den Toggle-Button. Es wird nicht trösten, dass diese Drucktabelle ausgeführt wird. Also beheben wir dieses Problem mit Hilfe von use callback. Jetzt können wir in dieser Funktion value als Parameter übergeben. Zum Beispiel übergebe ich, um zu hören, ich speichere das in der Wertvariablen und Sie können es in dieser Funktion verwenden. Ich erstelle eine neue Variable, nu-Zahl entspricht Zahl plus Wert. Und statt dieser Nummer übergeben wir eine neue Nummer. Wir bekommen also das Doppelte der ursprünglichen Zahl plus zwei. Es hängt von Ihnen ab, wie Sie diesen Parameter verwenden können. Denken Sie daran, jede Verwendung Memo, Sie können das tun. Lassen Sie uns nun zusammenfassen, was wir gelernt haben. Verwenden Sie Callback wird also verwendet , um die Memorize-Funktion zurückzugeben und die Leistung unserer React-Anwendung zu verbessern . Callbacks verwenden Syntax ist die gleiche wie der verwendete Memo-Hook, aber use memory gibt den Memorize-Wert zurück und use callback gibt einige MY is Funktion zurück, und dann verwenden Sie Callback, wir können value als übergeben Parameter, aber in use memo können wir das einfach machen. Ich hoffe du verstehst Callback, Hook und Unterschied zwischen use callback und use memo. 13. Benutzerdefinierte Haken (useFetch): Was ist ein benutzerdefinierter Hook? Benutzerdefinierte Haken sind grundsätzlich wiederverwendbare Funktionen in einfachen Städten. Benutzerdefinierte Hooks an Ihren eigenen Hooks , die Sie für Ihren eigenen Gebrauch erstellen. Und Sie können sie in Ihrem Projekt mehrfach verwenden. Sie haben zum Beispiel eine Logik , in der Sie einen oder mehrere eingebaute React-Hooks verwenden. Und Sie müssen diese Logik in Ihrem Projekt mehrfach verwenden . Anstatt also an jedem Ort dieselbe lange Logik zu schreiben, erstellen Sie Ihren eigenen Hook oder Ihre eigene Funktion, bei der es sich um einen benutzerdefinierten Hook handelt. Und du benutzt es genauso wie wir andere React-Build-in-Hooks verwenden , ganz einfach ist das. Erstellen wir einen der nützlichsten benutzerdefinierten Hooks zum Abrufen von Daten aus der API. Ich liebe diesen Brauch, weil ich ihn häufig in meinen Projekten verwende. Also hier erstelle ich ein einfaches Beispiel, in dem wir API- oder zufällige Benutzerdetails aufrufen API- oder zufällige Benutzerdetails und deren Namen mit der ID anzeigen. Also erstelle ich zunächst eine Zustandsvariable namens Antworten und übergebe ein leeres Array als Anfangswert. Danach verwende ich use effect hook mit MDMA-Abhängigkeiten. Es läuft also nur, wenn die Komponente zum ersten Mal gerendert wird. In den USA übergebe ich Daten von dieser API und konvertiere sie in das JSON-Format und setze diese Daten dann in Antworten ein. Und nach all dem zeige ich diese Daten mit der Map-Methode an. Stellen Sie sich nun vor, Sie möchten Daten von der API-Absicht für 12 Komponenten abrufen . Sie müssen diesen Code also in all diese Komponenten schreiben , was in React keine gute Praxis ist. Wir werden also einen benutzerdefinierten Hook zum Abrufen von Daten erstellen. Also erstelle ich zunächst einen Ordner, benutzerdefinierte Hooks. Wir werden alle unsere benutzerdefinierten Hooks in diesem Ordner speichern , um unseren Code zu organisieren, was für Entwickler eine gute Vorgehensweise ist. In diesem Ordner erstellen wir eine neue Datei namens use fetch nodeJS. Beginnen Sie Ihren benutzerdefinierten Hook-Namen immer mit einem use-Schlüsselwort, was eine gängige Konvention ist. Jetzt schreibe ich füge einen FCE für funktionale Boilerplate hinzu, indem ich diese ESL- und React-Erweiterung verwende . Zuallererst habe ich dieses Datum und einen Vektor aus dieser Komponente verwendet und in Use Patch eingefügt und Benutzer importiert und Daten aus der React-Bibliothek verwendet. Jetzt akzeptieren wir in dieser Funktion einen Parameter , der als URL bezeichnet wird. Wir verwenden diese URL-Variable anstelle der API. Wann immer wir Phagen verwenden, müssen wir in dieser Funktion nur die API übergeben. Sie hier die Statusvariable der Antwort neu und speichern Sie sie. Jetzt zurück zu unserer App-Komponente. Und wir haben gerade versucht, Phagen zu verwenden und Auto Import Schulden aus unserem benutzerdefinierten Hook-Ordner zu reagieren . In dieser für seine Funktion verwendeten Funktion können wir also jede API übergeben und diesen Wert in einer Datenvariablen speichern. Und endlich erreichen Sie diese Antworten mit Datenvariablen. Jetzt entferne ich es, benutze es und benutze es von hier. Wir brauchen sie nicht. Speichern Sie jetzt die Änderungen und werfen Sie einen Blick darauf. Wir bekommen unsere Daten. Wir haben unseren Beitrag erfolgreich erstellt und die nützlichste benutzerdefinierte Hoffnung, die Sie sehen können , heißt ordentlich und sauber. Das ist also nur ein Beispiel. Jetzt liegt es an Ihnen, wie Sie Ihre Logik für verschiedene Anwendungsfälle verwenden können. Versuchen Sie also, Ihre Logik zu denken und anzuwenden und benutzerdefinierte Hooks zu erstellen , die Ihnen bei Ihren zukünftigen Projekten helfen werden. Lassen Sie uns zusammenfassen, was wir gelernt haben. Benutzerdefinierte Hooks sind Ihre Logik, die Sie als wiederverwendbare Funktion erstellt haben. Und dabei können Sie mehrere Hooks verwenden und etwas erstellen , das Ihnen hilft, wiederholte Aufgaben in Ihrem Projekt zu überspringen. Sie können diese benutzerdefinierten Hooks auch einfach in Ihren verschiedenen Projekten verwenden . 14. Formularvalidierung mit FORMIK & YUP: Im heutigen Video werden wir die Formularvalidierung sehen, was ein sehr wichtiges Thema in React ist. Bisher. Formularhandhabung verwenden wir formic und für die Formularvalidierung verwenden wir die Yup-Bibliothek, da dies die Formularvalidierung erheblich erleichtert hat. Ich freue mich sehr darauf und hoffe, du bist es auch. Also lass uns anfangen. Zunächst werden wir sehen, wie wir mit unserer eigenen Form mithilfe einer Pandemie umgehen können. Lassen Sie uns zuerst die Bibliothek installieren, um das Terminal zu öffnen, indem Sie Control plus zurück nehmen für Windows und Command Plus zurück ankreuzen für Mac und schreiben Sie npm für mich installiert. Oder wenn Sie Yan verwenden, schreiben Sie Yan, fügen Sie Formic hinzu und drücken Sie die Eingabetaste. Schließen Sie jetzt das Terminal, wir brauchen es nicht. Und lassen Sie uns zuerst die Grundform erstellen. Also erstelle ich ein Formular und gebe ihm ein Anmeldeformular für Klassennamen. Nun fügen wir hier label oder name und pathname hinzu. Und ein Eingabetyp, Text und ein Name entsprechen dem Namen. Jetzt dupliziere ich diese beiden Zeilen noch dreimal. Also zweites Etikett für die E-Mail und auch Eingabetyp für E-Mail und Name für E-Mail. Als nächstes möchte ich eine Bezeichnung für Passwort, Eingabetyp für Passanten und Namen, auch Passwort und letzte Ebene oder Land und Passwort. Geben Sie type in password und name ein, um das Passwort zu sehen. Und schließlich fügen wir den Schaltflächentyp hinzu, senden die Änderungen ab, speichern die Änderungen und werfen einen Blick darauf. Siehst du, wir bekommen dieses saubere Gedicht und einige grundlegende Stile. Also ich habe Guam sieht gut aus. Sie können diesen Palm-Stil auch erhalten, indem Sie einfach den CSS-Code kopieren und in Ihre Datei einfügen. Lassen Sie uns nun dieses Formular mithilfe der Pattern-Make-Bibliothek behandeln. Zuallererst importiere ich die für make-Funktion verwendete Form dieser Use-Bombardierung ist im Grunde ein benutzerdefinierter Hooks. Zustände verwalten und Ereignisse behandeln. Lass dich nicht verwirren. Sehen Sie das einmal an und Sie sind alle Zweifel werden sich lösen. Also in unserer Komponente wurde abgeleitet, benutze formic und wir übergeben object. Die erste Eigenschaft dieses Objekts sind die Anfangswerte unseres Gedichts. Hier müssen wir also vier Werte übergeben , weil wir mit diesen Poreneingaben umgehen wollen . Deshalb erstellen wir außerhalb dieser Funktion eine neue Variable für unsere Anfangswerte. Und wir schreiben object. Jetzt pass auf hier auf. Wir müssen genau denselben Namen verwenden wenn wir unsere Eingabenamen übergeben. Die erste Eigenschaft ist also name, denn hier übergeben wir name empty string. Als nächstes haben wir E-Mail, leere Zeichenfolge, dann haben wir ein Passwort, leere Zeichenfolge. Und der letzte. Ratet mal auf welche Weise, richtig? Richtig. Es ist das Passwort, weil wir die letzte Eingabe mit dem Namen see password und auch eine leere Zeichenfolge übergeben. Jetzt übergeben wir hier unsere Anfangswerte. also im JavaScript-Objekt Wenn also im JavaScript-Objekt der Eigenschaftsname und der Wertevariablenname identisch sind, können wir diese Wertvariable entfernen. Also entferne ich das und es funktioniert genauso. Deshalb erstelle ich eine Variable mit dem gleichen Namen. In diesem Objekt müssen wir nun eine weitere Eigenschaft übergeben, nämlich onsubmit. Hier übergeben wir die Pfeilfunktion und können auf Werte unseres Formulars zugreifen und diese Werte in der Konsole ausgeben. Protokollieren Sie und drücken Sie Tab. Und wir bekommen console.log. Dies sind kleine Tricks, mit denen Sie schnell Code schreiben können. Also geben wir Werte weiter. Speichern wir das nun in einer Variablen namens formic. Und lassen Sie uns diese Formvariable trösten und sehen was wir in den Änderungen gespeichert haben, und schauen diese Form von Variablen an, Werte, Fehler und viele andere Methoden wie handled, blur, handle, change, handle, submit usw. Verwenden wir diese Methoden. Ich werde dieses Objekt strukturieren , weil ich keine formischen Punktwerte und keine Änderungen am formischen Punkthandle schreiben möchte formischen Punktwerte und Änderungen am formischen Punkthandle da dies unseren Code unordentlich macht. Also zuerst wollen wir Werte , die alle Werte dieses Formulars speichern. Als Nächstes wollen wir mit Unschärfe umgehen, mit Änderungen umgehen und das Absenden behandeln. Dies sind alles vordefinierte Funktionen. Wir müssen also keine von ihnen definieren. Und das ist der Grund, warum Formic für die Formularverarbeitung so beliebt ist. Sie müssen nicht alle diese Funktionen schreiben. Nun, in unserem Formular, wurde ich Wert für diese Namenseingabe übergeben, die Wert Punktname ist. Als nächstes möchte ich ein onblur-Ereignis hinzufügen, das ausgeführt wird, wenn wir leben Eingabefeld. Hier passieren wir einfach die Griffunschärfe. Und zuletzt füge ich onchange hinzu und passe handle change. Jetzt kopiere ich einfach diese drei Attribute und füge sie in alle Eingabe-Tags ein. Wir müssen nur diese Werte ändern. Also hier schreibe ich eine E-Mail. Nächster Parser und zuletzt siehe Parser. Jetzt letztes Ereignis, das im Formular-Tag behandelt wird, fügen wir beim Senden ein neues Attribut hinzu und übergeben Handle Submit-Methode und entfernen diese Zeile. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Füllen wir das Formular aus und klicken auf Absenden. Siehst du, wir bekommen alle Pillenwerte. In dieser onsubmit-Funktion können wir also unsere Logik zum Absenden von Formularen schreiben. Wie einfach und leicht die Handhabung von Formularen durch Formen wird. Und auch unser Code sieht sehr sauber und leicht zu verstehen aus. Sehen wir uns nun an, wie Sie dieses Formular mit dem Bibliotheksbus validieren können. Lass uns die Bibliothek installieren, das Terminal öffnen und npm install yup schreiben und die Eingabetaste drücken. yup-Bibliothek hilft uns also, die Werte unserer Eingabepille zu validieren und Fehler zurückzugeben. Und dann werden wir mit Hilfe des armen Ichs den Fehler so einfach anzeigen. Also schließen wir dieses Terminal. Lassen Sie uns nun unseren Validierungsschema-Beitrag erstellen , indem Sie die Yup-Bibliothek verwenden Ein gültiges JSON-Schema ist im Grunde . Ein gültiges JSON-Schema ist im Grunde eine Bedingung, die wir überprüfen, Dafür erstelle ich in SRC einen neuen Ordner namens Schemas. Und in diesem Ordner erstelle ich eine neue Datei namens index.js. Ich erkläre dir später, warum ich eine Datei mit dem Namen index.js erstelle. Also importiere ich in dieser Datei zuerst alles als yup aus deiner Bibliothek. Jetzt erstelle ich eine Variable namens Anmeldeschema. Du kannst es so nennen, wie du es hören willst. Wir verwenden yup dot object und darin übergeben wir unser Validierungsobjekt. So schnell füge ich einen Namen hinzu. Stellen Sie sicher, dass Sie denselben Namen verwenden wir in unseren Anfangswerten erwähnt haben. Fügen Sie also name, Garland, yup, dot string hinzu, wobei wir überprüfen, ob unser eingegebener Wert string ist oder nicht. Dann bedeutet Punkt drei, was bedeutet, dass mindestens drei Zeichen benötigt werden. Und der letzte Punkt ist erforderlich , um sicherzustellen, dass diese Rechnung nicht leer wird. Wenn wir wissen wollen, woher ich diese Methoden schreibe, kannst du die Dokumentation zu NPM lesen. Jetzt fügen wir unser nächstes Feld namens E-Mail hinzu. Und wieder war die Zeichenfolge abzulehnen. Dann haben wir eine E-Mail-Methode , um die E-Mail-Adresse zu überprüfen. Und der letzte ist erforderlich. Eine weitere Sache hier, in fast allen Funktionen, können wir unsere benutzerdefinierte Fehlermeldung übergeben, die wir in unserem Formular anzeigen möchten. Zum Beispiel möchte ich in dieser erforderlichen Funktion bitte Ihren Namen eingeben. Jetzt. Gleiche gilt für diese E-Mail-Funktion. Ich möchte bitte eine Bestätigungs-E-Mail eingeben. Und dann muss ich schreiben, bitte gib deine E-Mail ein. Jetzt ist unsere nächste Rechnung Passwort. Überprüfen Sie zunächst die Zeichenfolge erneut. Jetzt können Sie hier eine Bedingung hinzufügen, die sich auf Ihre Wahl bezieht, mindestens sechs, maximal 15. Aber ich schlage vor, dass Sie reguläre Ausdrücke für die Validierung verwenden . Sie können auf Google und Google Exploration oder Passwort suchen . Und ich gebe Ihnen diesen Link zu regulären Ausdrücken im Beschreibungsfeld. Davon können Sie kopieren. Hier haben wir einen regulären Ausdruck für ein Passwort. Also kopier das. Und in unserer Schemadatei erstelle ich eine neue Variable namens password rejects und füge sie hier ein. Jetzt haben wir hier eine weitere Methode namens matches hinzugefügt. Und das erste Argument ist die Ablehnung unseres Passworts. Dann geben wir unsere Fehlermeldung weiter. Bitte gib ein gültiges Passwort ein. Und zuletzt übergeben wir die erforderliche Funktion mit Nachricht. Bitte gib dein Passwort ein. Nun, letzte Eigenschaft, die C-Passwort, Doppelpunkt, yup-Punkt-Zeichenfolge ist . Jetzt müssen wir dieses C-Passwort überprüfen, genau wie dieses Passwort. Dafür haben wir eine andere Methode, als eingehende Ausdrucksweise LA bezeichnet wird. Und um diesen Passwortwert zu erhalten, schreiben wir yep dot ref und übergeben dann unseren Dateinamen , der password ist. Und das zweite Argument ist unsere Fehlermeldung, das Passwort, stimmt nicht überein. Und zuletzt fügen wir die erforderliche Funktion mit Nachricht hinzu. Bitte geben Sie das Bestätigungskennwort ein Jetzt exportieren wir dieses Schema aus unserer Datei und speichern es. Jetzt oder Komponente. Zuerst importieren wir das Anmeldeschema aus dem Schemaordner. Und hier müssen wir diese Indexdatei nicht schreiben , da React die Datei index.js als Standarddatei verwendet, wenn wir nur den Ordnernamen schreiben. Und deshalb habe ich diese Datei index.js genannt. In dieser Verwendung von Formic haben wir nun eine Eigenschaft, um dieses Schema zu validieren , das Validierungsschema. Und hier übergeben wir das Anmeldeschema. Jetzt bekommen wir alle Fehler bei Erwachsenen variabel. Also fügen wir das hier hinzu. Und feuert all diese Fehler ab. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Siehe West wir haben ein leeres Objekt. Jetzt klicke ich auf den Submit-Button und z, wir bekommen das alle Fehler. Jetzt schreibe ich den Namen und sehe, dass unser Namensfehler weg ist. Jetzt fügen wir E-Mail und Passwort hinzu. Ein Großbuchstabe, ein Kleinbuchstabe, eine Zahl und ein Sonderzeichen c. Unser Passwortfehler ist ebenfalls weg. Jetzt fügen wir ein anderes Passwort hinzu. Also bekommen wir dieses Passwort, nicht übereinstimmender Fehler. Und wenn wir dasselbe Passwort schreiben, sind alle Fehler weg. Also bekommen wir Adder in der Konsole. Und jetzt müssen wir diese Fehler in unserer Form zeigen. Bei Anzeigefehlern füge ich eine DU hinzu und gebe ihr einen Klassennamen in unserem Container. Und darin werden wir unseren Fehler anzeigen. Jetzt füge ich einfach eine Bedingung hinzu, nämlich wenn error dot name verfügbar ist, dann zeige ich den Fehler an. Ich verwende Absatz mit ClassName-Formularfehler und drucke dann Fehler Punktname, speichere die Änderungen und schaue sie mir an. Jetzt schreibe ich nichts mehr und klicke auf Submit. Siehst du, wir bekommen unseren Namensfehler. Aber ein kleiner Fehler hier, nämlich wenn wir nicht einmal die Namenseingabe berühren und andere Felder schreiben, bekommen wir auch den Fehler , der nicht gut ist. Lass uns das beheben, diese Verwendung Wyoming hat eine weitere Eigenschaft namens uns. Also lasst uns das trösten, die Änderungen speichern und einen Blick darauf werfen. Zuerst bekommen wir ein leeres Objekt. Jetzt klicke ich auf dieses E-Mail-Feld und nichts passiert. Aber wenn wir das Eingabefeld verlassen haben, dann E-Mail, fügen wir dieses Objekt hinzu. Jetzt sind wir im Passwortfeld. Und wenn wir diese Rechnung verlassen haben, indem auf eine andere Pille klicken oder die Tabulatortaste drücken, erhalten wir ein Passwort in diesem Objekt. Also füge ich in unserer Handfläche eine weitere Bedingung hinzu, diesen Punktnamen und n. Speichern Sie nun die Änderungen und schauen Sie sich das an. Jetzt klicke ich auf dieses E-Mail-Feld und dann auf Leptis-Eingabe, dann bekommen wir diesen Namensfehler nicht. Wenn wir auf die Schaltfläche Senden klicken oder diese Namenseingabe leer leben, erhalten wir nur dann und dann diesen Fehler. Kopieren wir also diesen Fehlerbehälter und fügen ihn nach allen Eingabepillen ein. Jetzt ändern wir für E-Mail Adresse, E-Mail. Diese E-Mail. Und brained Fehler punkten E-Mail. Welches Passwort wir ändern Fehler dot Passwort, tut dot Passwort und drucken Fehler dot Passwort. Und zuletzt für die Bestätigung des Passworts. Wir ändern die Ära. Siehe Passwort, sieht kein Passwort und druckt Fehler dot c Passwort. Und ich entferne diese Konsole, speichere die Änderungen und werfe einen Blick darauf. Klicken Sie nun auf den Submit-Button und wir erhalten alle Aarons Namen und z, wir bekommen unterschiedliche Fehler. Und ich schreibe drei oder mehr Zeichen. Es ist jetzt weg. Also fühle ich alle Pillen. Und dann klicken Sie auf den Submit-Button und wir erhalten alle Werte in der Konsole. Jetzt können wir alle Eingabepillen löschen , nachdem wir das Formular abgeschickt haben. In der Eigenschaft onsubmit haben wir also die Actions-Methode. Und nach der Konsole schreiben wir Excellence Dot Reset, Formular. Speichern Sie es und schauen Sie es sich an. Ich spüre alle Details. Und wenn ich auf den Submit-Button klicke, werden alle Eingabefelder gelöscht. Jetzt können wir dieses Kaltlot herstellen, indem wir eine Herstellungskomponente verwenden. Dies ist die zweite Methode, um die Handfläche mithilfe von Comics zu handhaben. Ich importiere für mich Formular und baue Komponenten. Jetzt wähle ich einfach die Pull Form aus und drücke Strg plus Umschalt plus P in Windows und command plus plus P in Mac. Und schreibe, wickle die Eingabetaste und rechts. Und drücken Sie Enter. Jetzt übergeben wir Anfangswerte gleich zwei Anfangswerten. Nun hör zu, Schema entspricht dem Anmeldeschema. Und für onsubmit erstellen wir eine neue Funktion namens onsubmit und kopieren diesen Code und fügen ihn hier ein. Also geben wir submit equals on Submit weiter. Jetzt verwenden diese Bombenangriffe die Render-Requisiten-Methode , um das Gedicht Schreiben Sie also geschweifte Klammern und wir haben Eingabeaufforderungen, Pfeilfunktionen und wir bewegen unsere Handfläche hinein. Diese Sonden haben also alle Methoden, die wir hier bekommen. Also werden wir es nach allen Änderungen zerstören. Ich weiß, es klingt kompliziert, ist es aber nicht. Nach Abschluss dieses Tutorials werden Sie es richtig verstehen. Jetzt ersetzen wir unser Formular-Tag. Welche Formularkomponente? Stellen Sie sicher, dass Sie auch das schließende Tag aktualisieren Entfernen Sie jetzt dieses onsubmit. Wir brauchen es nicht. Jetzt haben wir eine fehlgeschlagene Komponente, die den Ersatz unserer Eingabefelder darstellt. Also schreibe ich hier, wir übergeben type equals an text und name ist gleich name. Und schließen Sie diese Feldkomponente. Stellen Sie sicher, dass Sie den gleichen Namen schreiben , während wir die Anfangswerte übergeben. Diese Feldkomponente funktioniert genauso wie dieses Eingabefeld. Wir müssen diese drei Attribute nicht übergeben. Form macht es das von selbst. Und das ist die Macht des Formens. Hier können Sie beliebig viele Attribute in ein Eingabefeld übergeben. Platzhalter bedeutet beispielsweise, dass Sie Ihren Namen eingeben, die Änderungen speichern und einen Blick darauf werfen. Sehen Sie, wir bekommen InputField, genau wie diese Namenseingabe. Entfernen wir also unsere Eingabepille und auch diesen Platzhalter. Ich will es nicht. Jetzt kopiere ich diese Feldkomponente und ersetze sie durch alle Eingabefelder. Für E-Mail gebe ich den Typ an E-Mail und Name weiter. E-Mail. Nun für Passwort, Hochpass-Typ zu Passwort und Name, auch Passwort und Passwort bestätigen. Ich übergebe Typ an Passwort und Name, siehe Passwort. Jetzt letzten Schritt, wir müssen bei Rs destrukturieren, gibt die Pille von diesen Eingabeaufforderungen ein. Also schreibe ich einen Objekt-Komma-Test. Entfernen Sie nun dies für die Herstellung und entfernen Sie auch für Omega von wichtig. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Es funktioniert genauso wie zuvor. Sie können jede Methode verwenden, die Sie möchten. Es liegt ganz bei dir. Hier. können Sie Jack Box und andere Eingaben hinzufügen Mit dieser Feldeigenschaft können Sie Jack Box und andere Eingaben hinzufügen. Wenn wir wissen wollten, wie das geht, können Sie die Formatdokumentation lesen. Hier. Im Beispielabschnitt finden Sie Beispiele für alle Arten von Formularen. 15. BONUS : React Router v6: In diesem Tutorial werden wir React-Router von Grund auf sehen. Verschwenden wir also keine Zeit und fangen an. Hier erstelle ich diese neue React-App mithilfe der NP x Create React-App und entferne dann alle nicht benötigten Dateien. Jetzt installieren wir zuerst die React-Router-Bibliothek, öffnen das Terminal durch Drücken von Control plus bacteria und geben npm install React Router down ein. Wenn Sie Yan verwenden, geben Sie Yan had React Router dome ein und drücken Sie die Eingabetaste. Also verwenden wir React Router dom oder erstellen verschiedene Routen in unserer Anwendung. Im Grunde definieren wir, auf welchem Pfad welche Komponenten angezeigt werden sollen. Zum Beispiel stellen wir eine Anfrage von www dot code plus u.com. Dann wollen wir die Home-Komponente zeigen. Und wenn wir www dot code bless you.com anfordern, geht es weniger darum, dann wollen wir über Komponente anzeigen. Sehen wir uns nun die Implementierung an. Also zuerst, wenn Sie React Router dom in Ihrem Projekt verwenden möchten , wie Sie die volle Verpflichtung mit einer Komponente ergreifen können. Sie wissen also, welche App-Komponente wir einige Komponenten vom React-Router importieren , dom, oder? Browser Router als Router, und wickeln Sie unser JSX mit dieser Router-Komponente ein. Denken Sie daran, ohne diesen React-Router funktioniert nicht. Um es jetzt zu definieren, Wir haben zwei weitere Komponenten. Also wichtige Routen, die verwendet werden, um zu definieren, in welchem Teil Sie zeigen möchten, dass Sie alle Routings sind. Ich erkläre es dir gleich. Und eine weitere Route, die verwendet wird, um unseren tatsächlichen Routing-Namen und Komponentendetails zu definieren. Fügen wir unsere Routen-Komponente vor der React-Router-Version sechs Diese Routen werden als Switch bezeichnet. Jetzt fügen wir unsere Route hinzu. Jetzt müssen wir hier zwei Eingabeaufforderungen bestehen. Der erste ist schlecht, und zwischen diesen doppelten Anführungszeichen schreiben wir unseren Pfadnamen. Für zu Hause fügen wir also nur weniger vorwärts hinzu. Wir wissen das, wenn wir nur google.com oder eine der Websites schreiben und Verunglimpfungen hinzufügen. Italien dido geht auf die Homepage dieser Website. Deshalb schreiben wir hier nur Schrägstriche. Und dann haben wir Element gleich zwei in geschweiften Klammern. Wir fügen unsere Komponenten hinzu. Erstellen wir zunächst einige Seiten. Also erstelle ich in SRC einen neuen Ordner namens pages. In diesem Ordner erstellen wir eine Datei namens home dot js und schreiben RFC für React Boilerplate und fügen hier die Homepage hinzu. Erstellen Sie nun eine neue Datei namens profile oder JS und verwenden Sie dieses Boilerplate und ersetzen Sie auch die Textprofilseite. Und wir erstellen eine letzte Seite mit dem Namen users.js. Fügen Sie eine Textvorlage hinzu und ersetzen Sie die Textseite des Benutzers. Jetzt zurück zu unserer App-Komponente. Und in Element füge ich unsere Home-Komponente hinzu und schließe diese. Dupliziere diese Zeile jetzt noch zweimal. 19 ist der Pfad, der weniger profiliert ist und unsere Profilkomponente passiert. Und endlich, aber Benutzer aufschneiden und unsere Benutzerkomponente voreinnehmen. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Siehst du, das ist unsere Homepage. Jetzt in der URL habe ich weniger Profil übergeben und wir bekommen die Profilseite. Oder wenn wir weniger Benutzer weitergeben, erhalten wir eine Benutzerseite. Erstellen wir nun eine weitere Seite namens northbound dot js. Und wir fügen Boilerplate hinzu und schreiben 404-Seite nicht gefunden. Wir werden diese Seite lösen, wenn jemand etwas anderes passiert, das wir aber nicht definieren. Also zurück zur App-Komponente und wir fügen eine weitere Route und einen Pfad hinzu, um eine Komponente zu starten, die Element nicht gefunden wurde. Es bedeutet also im Grunde, dass wir, wenn wir einen anderen Pfad übergeben , der nicht von diesen Pfaden stammt, diese nicht gefundene Komponente anzeigen. Und achte darauf, dass ich diese nicht gefundene Route immer am Ende aller Routen schreibe . Manchmal bringt es andere durcheinander. Wenn wir es oben deklarieren, speichern Sie die Änderungen und werfen Sie einen Blick darauf. Wenn wir hier etwas anderes weitergeben, dann bekommen wir diese nordwärts gerichtete Seite. Lassen Sie uns nun eine nützlichere Eigenschaft von React-Router-Dom sehen . Lassen Sie uns eine einfache Navbar erstellen. Lassen Sie mich die anderen Dateien schließen. Also erstelle ich einen neuen Ordner namens components. Darin erstelle ich eine neue Datei namens near ab.js. Tippe nun bei AFC und drücke die Eingabetaste. Jetzt entferne ich diese und füge kein Tag mit der Klasse in der Nähe hinzu. Und darin erstellen wir ein Tag, einen Zusatz zur Homepage , der weniger ist. Und mit dem Bus nach Hause. Dupliziere diese Zeile jetzt noch zweimal. Und zweitens aber zum Profil und Fahrprofil hier. Jetzt ist der letzte Pfad für Benutzer und richtige Benutzer. Jetzt spar dir das. Und in unserer App-Komponente fügen wir unsere Navbar-Komponente ganz oben auf den Routen hinzu. Also dieser Balken ist jetzt oben fixiert. Und darunter sehen wir alle Routen. Wir müssen also nicht jetzt hinzufügen, sondern in allen Komponenten die Änderungen speichern und einen Blick darauf werfen. Siehst du, wir bekommen alle Links. Wenn wir jetzt auf einen dieser Links klicken, gelangen wir zu diesem Pfad. Aber können Sie sehen, dass unsere Bewerbung unterdrückt wird? Wir wollten nicht, oder? Dafür haben wir eine Komponente im React-Router-Dom, die in der Navbar-Komponente verknüpft ist. Wir importieren den Link vom React-Router, dom, und entfernen diesen ein Tag und einen rechten Link zu. Jetzt schreiben wir hier den Pfad , der für wertlos ist, genauso wie bei diesem Profil. Und das Gleiche gilt für diese Benutzer. Speichern Sie es und schauen Sie es sich an. Sehen Sie, wenn wir jetzt auf diesen Link klicken, unsere Seite nicht unterdrückt und das Routing funktioniert reibungslos. Jetzt können wir dies verbessern, indem wir die aktuelle Route hervorheben. Ich füge unserem Nerva- und Hover-Effekt auf einem Tag einige grundlegende Stile hinzu. Du kannst die Styles aus meinem GitHub-Repository kopieren. Jetzt möchte ich den Hintergrund der aktuellen Route-Links auf Schwarz setzen und die Schriftfarbe ändern. Wir müssen also wissen, welcher der aktive Link hier ist. Dafür haben wir eine Komponente, die jetzt link ist. Dieser Link ist eine erweiterte Version dieser Link-Komponente. Importiere das. Und jetzt wähle ich einen Link aus und drücke Strg plus D in Windows und Command plus d in Mac. Damit erstellen wir mehrere Cursor und ersetzen diesen Link durch Nav-Link. Jetzt gibt uns dieses Nibbeln die aktive Klasse, die in unseren Links hinzugefügt wurde. Speichern Sie die Änderungen und werfen Sie einen Blick darauf. Klicken Sie nun mit der rechten Maustaste auf einen dieser Links und gehen Sie zu Inspect. Siehe jetzt Link in der aktiven Klasse zu unserem Benutzerlink. Wenn wir zum Profil wechseln, wird die aktive Klasse aus dem Benutzerlink entfernt und dann zur Profilerstellung hinzugefügt. Nun zurück zur CSS-Datei der Nagelleiste und füge Navbar-Space hinzu, einen aktiven Punkt, und füge in geschweiften Klammern Hintergrund, Farbe und Farbe zu f, f, e, 400 hinzu. Tagesordnungen. Wirf einen Blick darauf. Siehst du, wir bekommen diesen netten aktiven Link. Jetzt haben wir einige wichtige Hooks , was in unserer Anwendung sehr nützlich ist. Zuerst wird navigiert verwendet. In der vorherigen Version des React-Routers. Dieser Haken ist als US-Geschichte bekannt. In dieser Profilkomponente erstelle ich also eine Schaltfläche namens C, andere Benutzer. Wenn also jemand auf diese Schaltfläche klickt, sollte es die Umleitung auf den Benutzerraum sein , den wir verwendet haben Navigationshaken. So wichtig, benutze navigiere von React, Router, dom. Und in unserer Komponente schreiben wir zuerst use navigate und speichern ihre Wertvariable namens navigate. Jetzt erstelle ich eine neue Funktion namens Redirect to Users. Und in geschweiften Klammern schreiben wir navigate. Und wir gehen hier unseren Weg, nämlich Slash-Benutzer. Und wenn Sie diese vier Wörter nicht weniger schreiben , wird sie auf einen verschachtelten Pfad umgeleitet , der Profil-Slash-Benutzer sein wird. Wenn wir direkt auf eine andere Seite lesen möchten, fügen Sie vor dem Pfad einen Schrägstrich hinzu. Jetzt im button onclick event übergeben wir dieses Rendern an die Benutzerfunktion, speichern die Änderungen und werfen einen Blick darauf. Siehst du, es funktioniert. Zuletzt haben wir Params Hook verwendet. In diesem Beispiel haben wir also die Route unseres Benutzers, in der wir alle Benutzerdetails oder Profile anzeigen können . Wenn dann jemand auf einen bestimmten Benutzer klickt, müssen wir zeigen, dass Benutzer auf einer anderen Seite verkaufen. Eine Route wird also zur letzten Route des Benutzers, nämlich der Benutzer-ID. Jetzt geben wir Daten von Benutzern aus dem Backend weiter, indem wir diese ID verwenden. Wie können wir also diese Route definieren, dass ich eine neue Route erstelle? Aber zwei Benutzer, es ist weniger Doppelpunkt-Benutzer-ID. Und für das Element erstellen wir eine neue Seite. Erstellen Sie also eine neue Datei auf Seiten, die als Benutzerdetails bezeichnet werden. Und schreibe unseren AFC und speichere ihn. Jetzt zurück zur App-Komponente. Hier übergeben wir die Komponente Benutzerdetails. Wenn also jemand nur zu Benutzern umleitet, diese Benutzer als Komponente gerendert. Und wenn jemand zu Benutzern weniger etwas umleitet, dann macht es Benutzerdetails Komponente, so einfach ist das. Sehen wir uns nun an, wie diese Benutzer-ID in dieser Komponente übergeben wird. Gehen Sie also zur Komponente Benutzerdetails. Und hier verkörpere ich, benutze Params von React Router Dome. jetzt in der Komponente, rechts, Verwenden Sie jetzt in der Komponente, rechts, params und speichern Sie sie in einer Variablen namens parameters. Diese Parameter haben alle Werte unserer Routenparameter. Lassen Sie uns diese Verkaufsteilnehmer trösten und einen Blick darauf werfen. Sehen Sie, wenn wir zu weniger Benutzern umleiten, erhalten wir userID auf eins. Also können wir es destrukturieren und eine Benutzer-ID schreiben. Denken Sie daran, dass dies genau dieselbe Variable ist , die wir auf unserer Route passieren. Und ich zeige hier Benutzerdetails der Benutzer-ID an. David, und sieh es dir an. Sehen Sie, wir bekommen unsere ID. Jetzt können wir Daten aus Ihrem Backend weitergeben, indem wir diese ID verwenden. Also ich hoffe du verstehst React Router dom. Wenn wir das genauer wissen wollen, schauen Sie sich die Dokumentation an. Link ist unten in der Beschreibung. Wenn Sie Zweifel haben, können Sie mich fragen und ich sehe Sie im nächsten Tutorial. Auf Wiedersehen.