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.