React-Hooks beherrschen: Moderne React-Anwendungen mit Projekten erstellen

1. Einführung in den Kurs: Willkommen zum Kurs über das Beherrschen von React-Hooks und Erstellen von Webanwendungen mit modernem React Mein Name ist Faisel und ich werde dein Kursleiter für diesen Kurs sein Ich werde Sie auf dieser gesamten umfassenden Reise in die Welt der React-Hooks begleiten dieser gesamten umfassenden Reise in die Welt der React-Hooks Als leidenschaftlicher Entwickler, Unternehmer und Pädagoge habe ich diesen Kurs entwickelt, um Ihnen zu helfen , das wahre Potenzial von React-Funktionskomponenten mit diesem erstaunlichen Konzept der React-Hooks In der heutigen schnelllebigen Technologiewelt Beherrschung von React-Hooks ein entscheidender Faktor Sie ermöglichen es Ihnen, saubereren und effizienteren Code zu schreiben und gleichzeitig komplexe Probleme auf einfache Weise zu lösen komplexe Probleme auf einfache Weise Egal, ob Sie gerade erst mit React beginnen oder ob Sie ein fortgeschrittener Tabloper sind oder ob Sie jemand sind, der schon etwas fortgeschritten ist, dieser Kurs hat für jeden etwas zu bieten In diesem speziellen Kurs sprechen wir zunächst darüber, was React-Hooks sind, warum Hooks wichtig sind und warum dieses Konzept von Hooks überhaupt existiert Dann sprechen wir über Hooks wie uns State Hook und wir verstehen, wie man davon Gebrauch macht. Wir sprechen über Hooks wie useFhok, use effect hook, wir behandeln use In diesem speziellen Kurs werden also viele Hooks behandelt, und am Ende lernen wir auch, wie Sie Ihre eigenen benutzerdefinierten Hooks erstellen können Während dieser Reise des Lernens und Verstehens von Hooks entwickeln wir nun Lernens und Verstehens von Hooks auch viele Projekte. Okay, wir erstellen ein paar Projekte, die sich der Verwendung dieser Hooks befassen. Sie lernen also im Grunde nicht nur die Konzepte, sondern können diese Konzepte auch in reale Projekte umsetzen. Und genau das macht diesen Kurs so praxisnah. Ich verwende also nur wenige Folien und konzentriere mich im Grunde auf alle praktischen Erklärungen. Darauf werde ich mich konzentrieren. Ich halte mich grundsätzlich an die IDE und stelle sicher, dass ich alles anhand von Beispielen in der ID selbst erkläre . Am Ende dieses Kurses kann ich Ihnen garantieren, dass Sie mit dem Konzept der React-Hooks nicht nur über ein solides Fundament in ein solides Fundament in der Welt verfügen, sondern auch das Selbstvertrauen haben werden, dynamische, skalierbare React-basierte Anwendungen zu erstellen . Dieser Kurs ist perfekt für Entwickler, die mit modernen React-Methoden über die aktuellen Trends auf dem Laufenden bleiben und nebenbei einige praktische Projekte aufbauen möchten, um ihr Verständnis zu vertiefen Ich freue mich sehr, Sie durch den Kurs zu führen. Bist du bereit, deine Reaktionsfähigkeiten zu verbessern und in die Welt der React-Hooks einzutauchen deine Reaktionsfähigkeiten zu verbessern und in die Welt der React-Hooks einzutauchen Wenn ja, lassen Sie uns diese Reise antreten, und ich werde Sie alle im Kurs sehen 2. Willkommen bei React-Hooks: Eine funktionale Revolution: Hallo, da. Jetzt ist es an der Zeit , dass wir anfangen, über React-Hooks zu sprechen und zu verstehen, was sie sind. Alles klar? Also, wann immer Sie irgendeine Art von Webanwendungen erstellen und wenn Sie irgendeine Art von Funktionalität entwickeln, okay? Welche Programmiersprache Sie auch verwenden, welches Framework Sie auch verwenden, es wird immer Szenarien geben, in denen Sie den Elementen auf der Webseite dynamisches Verhalten hinzufügen möchten auf der Webseite dynamisches Verhalten , oder? zum Beispiel hier auf eine Schaltfläche klicke, möchte ich vielleicht, dass eine bestimmte Seite oder ein bestimmter Teil der Seite aktualisiert wird, nur wenn Sie auf diese Schaltfläche klicken. A Die Sache hier ist , dass nur dieser Teil aktualisiert werden soll und nicht die gesamte Seite. Aber was bei der traditionellen Webentwicklung passiert, ist, dass, wenn Sie auf die Schaltfläche klicken, die gesamte Seite neu geladen wird, nur um diesen bestimmten Teil zu aktualisieren Das ist traditionelle Webentwicklung. Aber Sie wissen, dass Sie mit React eine Möglichkeit haben , Komponenten dynamisches Verhalten hinzuzufügen. Machen Sie sie interaktiv und responsiv ohne dass die Seite komplett neu Okay? Das ist also mit Hilfe des Hook-Konzepts möglich. Alles klar? Nun, Hooks sind nichts anderes als spezielle Funktionen, mit denen Sie einer Komponente ein dynamisches Verhalten hinzufügen können . Und es geht einfach nicht darum, die Seite zu aktualisieren , ohne sie komplett neu zu laden, okay? Es gibt noch viel mehr Dinge, die mit React-Hooks möglich sein können Das Aktualisieren der Seite ohne vollständiges Neuladen ist also nur ein Beispiel , das ich Ihnen zum besseren Verständnis gegeben habe Alles klar? Zum Beispiel habe ich diese Codebasis hier drüben. Okay, das ist aus der Code-Sandbox. Es ist eine öffentlich verfügbare Codebasis, die von jemandem entwickelt wurde Und hier habe ich diesen Code gesehen, dem es einen Zähler gibt, der mit React erstellt wurde. Okay. Also hier kann ich Inkrement sagen, Sie können es sehen, und das ist Dekrement jetzt auf diese Schaltflächen klicken, wird es erhöht und dekrementiert, ohne dass die Seite neu geladen wird Und das ist mit Hilfe von React-Hooks möglich. Okay? Nun, das ist eine Möglichkeit. Es gibt eine beliebige Anzahl von Möglichkeiten. In React sind verschiedene Arten von Hooks verfügbar, die Sie nutzen können, um verschiedene Arten von Dingen zu erstellen. Und jeder existierende Hook hat eine Art Spezialität, in der Sie ihn in Ihrer Anwendung verwenden können. In Ordnung. Also, was sind Hooks? Hooks können Sie Ihrer Anwendung auf einfache Weise einige interaktive Funktionen hinzufügen auf einfache Weise einige interaktive Funktionen , und es hilft Ihnen, Ihre App interaktiver zu gestalten , wenn sich die Dinge während der Interaktion ändern anstatt eine statische Webseite zu erstellen, oder? Das ist also sehr nützlich, wissen Sie, diese Art von Funktionalität, wie diese Art von Funktion, ist sehr nützlich, wenn Sie, sagen wir, eine Art Formular erstellen, und je nachdem, welcher Benutzer tippt oder welche Art von Bearbeitung Sie für die Benutzereingabe vornehmen möchten, jede Art von Datenaktualisierung. Zum Beispiel hat der Benutzer hier etwas eingegeben und Sie möchten vielleicht , dass an verschiedenen Stellen der Seite etwas aktualisiert an verschiedenen Stellen der Seite All diese Updates können reibungslos durchgeführt werden, um Ihren Benutzern ein besseres Erlebnis zu bieten, oder? Und das macht Ihre Web-App sehr ansprechend und reaktionsschnell. Nun, hier in der offiziellen Dokumentation von React-Hooks werden Sie sehen, dass Sie mit Hooks andere React-Funktionen als Ihre Komponenten verwenden können , okay? Und wie gesagt, es gibt verschiedene Dinge die Sie mit React-Hooks machen können, und das ist es, was hier als React-Funktionen bezeichnet wird hier als React-Funktionen Okay? Wo wir jetzt über Hooks sprechen, es gibt auch eingebaute Hooks, die React bereitstellt, und Sie können sie kombinieren, um auch Ihre eigenen zu erstellen. Sie können also sogar Ihren eigenen benutzerdefinierten Hook erstellen, oder? Und hier auf der linken Seite wirst du die Liste sehen, okay? Also benutze Action State, benutze Callback, benutze Context Das sind alles Hooks, oder? Das sind ziemlich viele. Okay. Wir werden über die wichtigsten sprechen. Zum Beispiel haben einige der Hooks, die häufig verwendet werden, den Status use. Wenn Sie also an React arbeiten, werden Sie feststellen, dass state häufig verwendet wird. Verwenden Sie Ref, wenn es häufig verwendet wird. Use Effect ist auch ein Hook, immer in der React-Codebasis verwendet wird. Wir werden also darüber sprechen, wir werden über Hooks sprechen, die sehr verbreitet sind. Und sobald Sie ein paar Hooks haben, wird es für Sie sehr einfach sein, Ihre eigenen React-Anwendungen zu erstellen , die die React-Funktion direkt in den Komponenten nutzen oder nutzen . Ordnung. Also das sind React Hooks. Es gibt einige , von denen wir lernen und verstehen müssen , wie wir sie nutzen können und warum sie existieren, oder? Jeder React-Hook hat einige Fähigkeiten, die er bietet. Und je nach Bedarf entscheiden Sie, welchen Hook Sie in Ihrer Anwendung implementieren möchten . Alles klar? Also, es geht um React Hooks. Ich hoffe, das hat dir einen guten Überblick darüber gegeben was Hooks sind und warum sie in React verwendet werden sollten. 3. React-Status enthüllt: Die Grundlagen dynamischer Apps: Hallo, da. Jetzt ist es an der Zeit, dass wir anfangen über Zustände in React zu sprechen, und es ist wichtig, dass wir dieses Konzept verstehen , damit wir State Hook in React nutzen können , der einer der am häufigsten verwendeten Hooks in den React-Anwendungen ist , oder? Was ist also ein Staat? Nun, ein Status ist jede Art von Information, die Ihre Webanwendung möglicherweise speichern möchte. In Ordnung. Jetzt können Sie diese Anwendung natürlich hier sehen. Okay. Und hier oben hast du einige Einstellungen. Okay? Nun, diese Einstellung ermöglicht es mir , einen hellen Modus oder einen dunklen Modus zu aktivieren, damit ich ihn einschalten kann, okay. Es gibt auch diesen Knopf. Ich denke, das ist okay. Ich glaube, das ist für Übersetzungen. In Ordnung. Aber das ist auch eine Einstellung. Wenn ich die Website in einer anderen Sprache sehen möchte , kann ich von hier aus eine andere Sprache wählen. Wenn ich den Dunkelmodus nicht möchte, kann ich den Modus von hier aus ändern, oder? Also, was hier passiert, ist diese Website, React Dot EV speichert eine Art Einstellung oder eine Präferenz für mich als Benutzer, oder? Ich bin also ein Benutzer. Ich interagiere mit dieser Website. Ich richte die Einstellung als Dunkelmodus ein. behalte diese Einstellung also im Hinterkopf, hey, dieser Benutzer möchte diese Website im dunklen Modus sehen oder lesen, und wann immer ich sie besuche, wird mir die Präferenz angezeigt. Wann immer ich sie besuche, wird mir die Website auf diese bestimmte Weise angezeigt , oder? Das ist also eine Art von Information, die es über seinen Benutzer gespeichert hat. Richtig? Stellen Sie sich das wie ein Lesezeichen vor, das Sie beim Lesen eines Buches verwenden würden Stellen Sie sich vor, Sie lesen einen Roman, und während Sie die Kapitel durchgehen, behalten Sie ein Lesezeichen, um sich daran zu erinnern, wo Sie aufgehört haben, richtig? Also dieses Lesezeichen, das sich ändert, wenn Sie weitermachen oder manchmal das vorherige Kapitel erneut aufrufen, das Lesezeichen würde sich ändern, das Lesezeichen würde Es steht also für Ihre aktuelle Position im Buch. Es ist eine Information, an die Sie sich über Ihre Lesereise zu erinnern versuchen, oder? Es ist also eine Information, oder? Das heißt, diese Information , die von jeder Art von Webanwendung in der React-Welt gespeichert wird jeder Art von Webanwendung in der , wird als Zustand bezeichnet. Okay. Der Status ist also wie das Lesezeichen, über das wir sprechen, oder sogar wie diese Einstellung, weil es sich an diese Informationen über den Benutzer erinnert, oder? Ein Lesezeichen ist auch etwas , an das sich die Anwendung über den Benutzer erinnern kann, wenn es darum geht, wohin der Benutzer gelangt ist Was ist die Reise des Benutzers, richtig? Einfach ausgedrückt Staaten sind eine Art zu reagieren, wie Staaten reagieren. Ist eine Möglichkeit für Reaktionskomponenten bestimmte Informationen zu speichern, die sich im Laufe der Zeit ändern können und an die man sich erinnern muss. Alles klar? Merken Sie sich diese Definition. Zustände in React sind also eine Möglichkeit für Reaktionskomponente , bestimmte Informationen zu speichern, die sich im Laufe der Zeit ändern können, und sie müssen gespeichert werden. Okay? Nun, in dieser speziellen Definition sind zwei Dinge wichtig. Also würde ich einfach zu der Definition hier im Notizblock wechseln , okay? Und ich glaube, das ist gut , weil Sie auch die Definition sehen können Ordnung. Also es gibt zwei Dinge, die ich gesagt habe, was wichtig ist, okay? Ich würde sagen, es gibt ein paar Dinge, okay? Zum einen können sich die Informationen ändern. Okay? Das ist etwas, das du im Hinterkopf behalten musst. Die Informationen können sich ändern. Und diese Information wird als Zustand der Reaktion angesehen, okay? Und daran muss man sich erinnern. Alles klar? An das Beispiel, das ich gegeben habe, muss man sich erinnern, oder? Während meiner ganzen Reise. Wenn ich jetzt zur Registerkarte „Lernen“ wechsle , meine ich hier, wenn ich zur Registerkarte „Sammeln “ wechsle, ändert sich das nicht in den weißen Modus. Es ist immer noch der Dunkelmodus, oder? Die Anwendung wird also daran erinnert, dass dieser Benutzer die gesamte Anwendung im Dunkelmodus sehen möchte , oder? Das Gleiche gilt für Lesezeichen. Stimmt? Die Anwendung würde sich daran erinnern , dass der Benutzer bis zu diesem Zeitpunkt mit dem Lesen fertig war. Es wird sich also erinnern und es wird sich weiter erinnern. Wenn Sie morgen die Anwendung, die Leseanwendung oder das Buch öffnen , ist es nicht so, als ob das Lesezeichen auf die erste Seite geändert wurde , oder? Wenn Sie also interaktive Anwendungen für Mitarbeiter erstellen, werden Sie häufig in Situationen geraten, in denen sich bestimmte Teile Ihrer Benutzeroberfläche als Reaktion auf die Benutzerinteraktion ändern sollten Zum Beispiel verändert ein Button-Klick, wie ich schon sagte, hier ein Button-Klick die gesamte Website, oder? Und es wird Szenarien geben , in denen Sie vielleicht auch bestimmte Teile der Website ändern möchten , okay? Beispiel auf eine Schaltfläche klicken, ein Formular einreichen oder einfach mit der Maus über ein Element fahren, okay, mit dem Mauszeiger auf das Okay? Also das alles könnte mit Hilfe des Staates geregelt werden, okay? Ich hoffe, das ist ziemlich klar. Okay? Also, wenn Sie sich an diese Definition hier erinnern, ist State in React ein Weg für eine React-Komponente. Um an einigen Informationen festzuhalten , die sich im Laufe der Zeit ändern können, und sie müssen auch in Erinnerung bleiben. Okay? Das ist eine wirklich gute und einfachste Definition , die ich dafür haben könnte. Okay? Nun, es wird einige Fragen geben, die du vielleicht hast, okay? Du wirst sagen, hey, warum benutzt du nicht einfach Variablen, okay? Komm her. Sie sagten, dass der Zustand in React eine Möglichkeit für die React-Komponente ist , Informationen zu speichern , die sich im Laufe der Zeit ändern können. Sie können das auch mit Variablen machen, oder? Sie können einige Informationen in Variablen speichern, und diese Informationen können sich auch ändern, vorausgesetzt, sie sind nicht als Konstante deklariert, oder? Das ist mit Variablen möglich. Warum also dieses neue Staatskonzept und die Einführung unnötiger Komplexität? Die Sache hier ist, dass sich Staaten von Variablen unterscheiden. Wie? Ich gebe Ihnen einen Überblick, okay, aber Sie werden ein vollständiges Bild erst verstehen , wenn Sie es in Aktion sehen Aber ich gebe Ihnen einen Überblick darüber, wie sie sich unterscheiden. Der Zustand in React, der Zauber des Zustands in React besteht darin, dass React bei jeder Änderung die Komponente oder einen Teil davon automatisch neu rendern muss, um diese Änderungen auf der Benutzeroberfläche widerzuspiegeln Das ist die Magie des Zustands. Okay? Also die Updates, das Spiegelbild der Updates. Sie also darauf klicken, zum Beispiel hier, wenn ich darauf klicke, können Sie sehen, dass die gesamte Webseite oder diese bestimmte Seite automatisch neu gerendert wird . Diese Komponente wird auf der Grundlage dieses Schaltflächenklicks automatisch neu gerendert . Okay? Morgen habe ich vielleicht eine Schaltfläche, die eine Änderung in bestimmten Teilen der Anwendung einführen könnte. Also beim Klicken auf diese Schaltfläche. Status ändert sich, und weil sich der Status ändert , wird der Teil der Anwendung, der mit diesem Status verknüpft ist , erneut gerendert. Okay? Ich bin mir nicht sicher, ob Sie das verstehen können, aber die Magie liegt im erneuten Rendern, was mit Variablen nicht möglich ist Okay? Bei Variablen müssen Sie alles in React manuell handhaben. Aber bei Staaten ist für alles gesorgt , weil es sich um eine Funktion handelt , die React bereitstellt. Und das wirst du in Kürze sehen , wenn ich dir eine Demo davon gebe, okay? Die Magie des Zustands in React besteht also darin, dass React jedes Mal, wenn er sich ändert, weiß, dass die Komponente automatisch neu gerendert wird, um die Änderungen auf der Benutzeroberfläche widerzuspiegeln . Okay? Das ist wichtig. Nun, eine weitere Frage, die einige Schüler haben könnten, ist diese. Okay, wie unterscheidet es sich von Requisiten oder Eigenschaften, die wir an die Komponente weitergeben Okay. Nun, ich möchte hier hinzufügen, dass Requisiten, die auch als Eigenschaften bekannt sind, wie eine Einstellung oder ein Attribut sind , das man an eine Komponente weitergibt, okay? Sie sind schreibgeschützt, zuallererst können Sie die Eigenschaften auch nicht ändern, oder? Und sie wurden nur in eine Richtung weitergegeben, z. B. von der übergeordneten Komponente zur untergeordneten Komponente, oder? Requisiten sind also anders. Der Anwendungsfall ist anders Es ist wie einige Informationen, Einstellungen oder Attribute , die Sie möglicherweise an eine bestimmte Komponente weitergeben möchten . Sie unterscheiden sich von Staaten, oder? Denken Sie also daran, dass ein Reaktionszustand eine Möglichkeit für eine Komponente ist, bestimmte Informationen zu speichern . Das Festhalten an Informationen ist also ein wichtiger Teil dieser Definition, und diese Informationen können sich im Laufe der Zeit ändern, und sie müssen gespeichert werden. Das ist wichtig. Okay? Wie unterscheidet es sich von Variablen , wenn Sie in einem Interview gefragt werden? Ja, es ist anders, weil React es mit React-Komponenten funktioniert. Staaten arbeiten mit Reaktionskomponenten. Sie sind an Reaktionskomponenten gebunden, und React weiß, wie die Komponente automatisch neu gerendert wird, wenn sich der Status ändert. Okay? Das ist mit Variablen nicht möglich, oder? Und sie unterscheiden sich von Eigenschaften, okay, weil sie schreibgeschützt sind. Eigenschaften sind schreibgeschützt, ich meine, richtig? Und Staaten sind unterschiedlich. Ich hoffe also, das ist ziemlich klar. Ich hoffe, ich konnte das für Sie in sehr einfachen Worten aufschlüsseln , okay? Sie werden viel mehr Klarheit gewinnen. Sobald Sie anfangen, Zustände zu verwenden und wenn Sie Ihr erstes Programm sehen , das Reaktionszustände verwendet, werden Sie verstehen, wie toll das ist, oder? Ich hoffe also, das war nützlich. 4. Zustand in funktionalen Komponenten mit React-Hooks beherrschen: Jetzt ist es an der Zeit, dass wir den US State Hook hier drüben in die Hand nehmen und reagieren, okay? Und aus demselben Grund habe ich dieses spezielle Projekt ins Leben gerufen. Es ist ein sehr einfaches Projekt. Okay. Hier können Sie sehen, dass dies der Code ist, den ich mit Wheat and React generiert habe. Und hier habe ich diese App-Komponente. Und diese App-Komponente rendert im Grunde eine Überschrift. Okay? Hier drüben wird nur Hallo gedruckt. Okay? Und diese App wird hier in mittleren Punkten gerendert, okay? Viele Punkte SX. Ich meine, okay? Es gibt also buchstäblich nichts in der App-Komponente, und wir werden lernen, wie man Zustände in React mit Hilfe von Hooks nutzen kann, und wir werden das mit Hilfe von Hilfe tun , indem wir tatsächlich ein Beispiel erstellen, und das Beispiel wird ein berühmtes Gegenbeispiel sein , weißt du? Im Grunde ist dies meiner Meinung nach eines der besten Beispiele, um mehr über Staaten zu erfahren , da Sie den Wert des Zählers aktualisieren können. Erhöhen Sie den Wert, verringern Sie ihn und spielen Sie damit herum. Alles klar? Ganz zu schweigen von der Ausgabe, das ist die Ausgabe, die Sie von dieser Anwendung sehen. Ordnung. Also, was ich tun würde, ist zuallererst, da wir den Use State Hook nutzen wollen, okay? Also werde ich Ihnen zunächst sagen, was Use State ist. use state ist also ein Hook, der uns von React zur Verfügung gestellt wird und es uns ermöglicht , der Funktionskomponente Zustände hinzuzufügen. Das ist also eine funktionale Komponente, oder? Funktionale Komponente, also Komponenten, die mit Hilfe von Funktionen erstellt werden , richtig, in React. Und wenn du State hier drüben hinzufügen willst, wollen wir hier einen Zähler anzeigen, richtig? Der Zähler ist also eine Information , die wir anzeigen möchten. Der Zähler, wir sollten in der Lage sein, sowohl den Zähler zu erhöhen als auch den Zähler zu dekrementieren Also sollten wir da drüben zwei Knöpfe haben, oder? Also, um den Überblick über die Zählernummer zu behalten, um zu verfolgen, was die Zählernummer ist, brauchen wir den Status. Und wie fügen wir einer funktionalen Komponente einen Status hinzu? Wir nutzen den US-Staat, oder? Das ist also ein Hook, der uns von React zur Verfügung gestellt wird und der uns das Leben erleichtert, wenn wir Funktionen wie State in Funktionskomponenten verwenden. Ordnung. Jetzt komme ich her. Wie nutzt du das? Okay? Also ich sage Import und ich sage hier drüben, Status verwenden, so etwas in der Art. Okay? Und Sie können anhand von React sehen, dass es den US-Bundesstaat automatisch gefüllt hat. In Ordnung. Also, wir importieren Use State Hook aus dem React-Modul. Jetzt hat das React-Modul diesen benannten Export , den wir importieren können, oder? Und das werden wir hier nutzen. Okay? Also, hier drüben, in der App, werde ich einen Status definieren , der als Count bezeichnet wird. Okay? Also werde ich const sagen und dir zuerst die Syntax zeigen und dann erkläre ich dir, was die Syntax bedeutet und was hinter den Kulissen passiert. In Ordnung. Also werde ich zählen sagen, und ich werde hier die Anzahl festlegen und ich werde hier den Use-Status verwenden. Etwas in der Art. Und ich übergebe hier ein Argument, das Null ist , und ich werde es mit einem Semikolon beenden Okay? Also haben wir unserer Anwendung einen Bundesstaat hinzugefügt. Dieser Zustand wird als Anzahl bezeichnet, oder? Und das ist eine Funktion , die uns hilft, diesen bestimmten Status zu aktualisieren. Okay? Jetzt verwenden wir hier den Use-Status, um einen Status zu erstellen. Was nun passiert, ist, dass jedes Mal, wenn Sie use state verwenden, dies eine eingebaute Funktion ist, die ein Array mit zwei Elementen Okay? Es gibt ein Array mit zwei Elementen zurück. Das erste Element ist der Bundesstaat selbst. Und das zweite Element ist eine Funktion zur Aktualisierung dieses bestimmten Status. Okay? Also hat es zwei Elemente zurückgegeben, und wir haben hier Destrukturierung verwendet, Array-Destrukturierung, weil das in Form von Arrays zurückgegeben wird Also haben wir die Array-Destrukturierung verwendet und den Namen des Zustands erhalten, den Status als Anzahl und die Funktion als Set Count die Funktion als Set So funktioniert State also, okay? Denken Sie daran, dass es den Status und eine Funktion zur Aktualisierung dieses bestimmten Status zurückgibt . Ordnung. Also das ist etwas , das wir zählen müssen. Du wirst mich fragen, was ist diese Null hier drüben? Okay? Null ist also nichts anderes als der aktuelle Wert oder der Startwert , mit dem der Status initialisiert werden soll Wenn dieser Zähler also erstellt wird, sein Anfangswert Null Okay? Also ich hoffe, es ist klar, was diese Leitung macht. Okay, um es einfach auszudrücken, wir erstellen hier einen Zustand, und wann immer wir einen Zustand in React erstellen, verwenden wir den Use-State-Hook wie diesen, bei dem Sie jede Art von Standard- oder Anfangswert übergeben können , die Sie haben möchten, okay? Und use state gibt ein Array zurück, das aus zwei Dingen besteht. Einer ist der Status selbst und der andere ist die Funktion zur Aktualisierung dieses Zustands. Okay? Also haben wir sowohl den Status als auch die Funktion in diesen beiden Dingen hier drüben unter Verwendung des Konzepts der RAD-Strukturierung ermittelt. Alles klar? Ich hoffe, das ist klar darüber, was wir tun. Was ich jetzt tun würde, ist hier, anstatt Hallo zu sagen, ich würde Gegenwert sagen, okay? Ich sage Gegenwert. Und jetzt ist dieser Zustand wie eine JavaScript-Variable, oder? Ich kann also diese Syntax verwenden und die Anzahl hier anzeigen. Sobald ich das speichere und wenn ich hierher komme, werden Sie sehen, dass der Zählerwert Null ist. Okay? Wenn du hier fünf machst. Und wenn ich das speichere, siehst du, dass der Zählerwert fünf ist. Wir sehen also den Anfangswert als Null und Fünf. Also bleibe ich bei Null. Wenn Sie möchten, dass der Zähler bei fünf beginnt, können Sie hier fünf als Anfangswert angeben. In Ordnung. Das ist erledigt. Wie aktualisieren wir jetzt den Status? Sie haben also diese Set-Count-Funktion, mit der Sie den Status aktualisieren können . In Ordnung. Also was ich tun würde, ist, hier drüben einen Button zu haben. Natürlich würden wir Updates mit dieser Schaltfläche auslösen. Okay. Und ich nenne diesen Button als Inkrement. Und ich werde noch einen Knopf hier drüben haben und diesen Knopf hier drüben als Dekrement bezeichnen, okay? Wir werden zuerst an Inkrement arbeiten und schauen wie wir den Wert eines Zählers erhöhen können Okay? Also sage ich bei Klick hier drüben. Das ist ein Klick. Und hier muss ich Set Count auslösen, richtig? Set Count akzeptiert also einen Parameter, dem es sich um den aktualisierten Zählwert handelt. Also würde ich hier eine Pfeilfunktion haben, und ich würde Set Count sagen, ungefähr so, und ich würde den aktuellen Wert von count plus eins sagen. Okay? Damit möchte ich es initialisieren, oder? Und ich werde herkommen. Sie können diese beiden Schaltflächen sehen. Inkrementieren, Erhöhen , Und Sie können sehen, dass wir hier gerade die Zählung erhöht haben , oder ? Haben wir noch etwas anderes gemacht? Wir haben gerade die Anzahl erhöht, und allein durch die Erhöhung der Anzahl wird die Komponente neu gerendert und Sie sehen, wird die Komponente neu gerendert und Sie sehen der aktualisierte Wert von count hier angezeigt wird. Okay. Lassen Sie uns dasselbe auch für Dekrement tun. Wenn Sie also auf Dekrementieren klicken, passiert vorerst nichts. Aber was du tun kannst, ist, das hier rüber zu kopieren und du kannst es zusammensetzen und anstatt es zu erhöhen, sage ich minus eins. Und ich werde das speichern Und wenn du herkommst, kannst du es jetzt so dekrementieren, so erhöhen und du wirst sehen, dass du einen sehr schönen Zähler in Aktion hast Und sieh dir die Menge an Code an, die du geschrieben hast. Du hast kaum ein paar Codezeilen geschrieben, oder? Es gibt eine Zeile, und das sind die zwei Zeilen, also im Grunde drei Zeilen, richtig? Das hast du getan, oder? Und React macht intern so viel. Okay? Lassen Sie mich Ihnen sagen, wann immer Sie den Zähler hier aktualisieren, rendert React die Komponente weil es weiß, dass sich der Wert dieses Zustands geändert hat und dieser Status mit dieser bestimmten Komponente verknüpft ist. Es löst ein erneutes Rendern aus und mit Hilfe des erneuten Renderns wird die Komponente neu gerendert und Sie sehen, wird die Komponente neu gerendert und dass der aktualisierte Wert angezeigt wird Das ist viel effizienter als das Rendern der gesamten Seite. Okay? Es aktualisiert nur bestimmte Teile der Anwendung unter dem Gesichtspunkt der Effizienz Ordnung. Also das ist eine sehr gute das ist eine sehr gute Funktion von React Use State Hook, okay, die wir gerade aktiv verwenden. Okay? Wir können das sogar aufschlüsseln. Okay, was wir im Moment tun, ist, dass wir die Logik hier drüben mit Hilfe der anonymen Funktion haben . Okay. Was Sie tun können, ist der Einfachheit halber, Sie können hier eine konstante Schrittzählung vornehmen, okay, so etwas Das ist also eine Funktion , die ich gerade erstelle. Okay. Und hier drüben, okay, tut mir leid. Also, was du tun kannst, ist hier, inkrementieren Ups. Es wird also eine Pfeilfunktion sein, und was Sie tun können, ist sagen, dass „Anzahl setzen“ gleich „Anzahl plus eins“ ist Okay? Und du kannst , dass zählen gleich zählen plus eins ist, es mit einem Semikolon beenden und das Ganze gut beenden, das auch mit Semikolon beenden, mit Semikolon beenden Und ich nehme das hier drüben. Ich sage inkrementierte Anzahl. Okay. Also das ist es, was wir tun. Wir behalten bei, wir definieren jetzt hier separate Funktionen. Ich kann hier Dekrementieren, Dekrementieren, Zählen sagen , und das kann negativ sein. Ups, hier negativ Okay? Und genauso wird es ein Dekret sein. So wie das Okay? Und du kannst den Wert erhöhen, du kannst den Wert verringern, okay? Und du kannst erhöhen oder verringern , wie du willst Das ist also etwas, das hier möglich ist. Okay? Also ja, ich hoffe, es war klar, wie Sie State Hook nutzen den Use State Hook nutzen können , um Ihren Reaktionskomponenten Zustände hinzuzufügen. Okay. Was wir hier als Zusammenfassung gemacht haben, wir haben einen Zählstatus hinzugefügt, für den wir den State-Hook verwenden, und dieser Use-State-Hook gab den Status zurück, ebenso wie die Funktion zum Aktualisieren des Status Und wir haben bei diesen beiden das Konzept der RAD-Strukturierung verwendet , richtig? Hier drüben haben wir diesen Anfangswert als Null für den Staat definiert , okay? Und wir haben zwei Knöpfe. Damit ändern wir den Statuswert. Und wann immer wir den Statuswert ändern , passiert das, Komponente wird neu gerendert und die Anzahl wird automatisch aktualisiert. Okay? Also ich hoffe, das ist ziemlich klar und ich hoffe, Sie haben ein gutes Verständnis dafür, was Staaten sind und wie Sie Staaten in React nutzen können. Okay? Also, eine Sache, die ich dir sagen möchte, ist dieses Ding hier drüben, okay? Es gibt diese Frage, die Studenten normalerweise haben. Warum nicht Variablen anstelle von Zuständen verwenden? Okay? Also ich möchte erwähnen, dass die Magie des Zustands in React darin besteht, dass er sich ändert, okay? Stellen Sie sich also vor, all das mit Variablen zu handhaben. Stellen Sie sich vor, Sie haben eine Zählvariable und verwenden hier nicht den State-Hook. Okay? Sie müssten das Komponentenhandbuch neu rendern oder aktualisieren. Okay, was nicht gut ist. Hier weiß React automatisch , dass Sie die Komponente neu rendern müssen , um die Änderungen in der Schnittstelle widerzuspiegeln. Und das ist wirklich, wirklich nützlich und hilfreich, wenn Ihre Anwendung groß wird, oder? Wenn Ihre Anwendung groß wird, verwenden Sie mehrere Statusvariablen, Sie verwalten eine Menge Dinge. In diesem Fall wird das wirklich, wirklich hilfreich. Okay? Und es unterscheidet sich von Requisiten , weil Sie Requisiten in den untergeordneten Komponenten nicht ändern können Sie sind schreibgeschützt, und Status ist etwas anderes, das Ihnen im Vergleich zu Variablen und Requisiten eine bessere Kontrolle und Verwaltung ermöglicht und Requisiten eine bessere Kontrolle und im Vergleich zu Variablen und Requisiten eine bessere Kontrolle und Verwaltung zu Variablen Alles klar? Ich hoffe, das war hilfreich und ich hoffe, Sie konnten mitmachen. 5. Müheloser Umgang mit mehreren Zustandsvariablen: Im Moment haben wir also diese Anwendung mit zwei Schaltflächen, Inkrement und Dekrement, und wir verwenden den State-Hook, um einen Status Komponente zu erhöhen und zu verringern für diese bestimmte Komponente zu erhöhen und zu verringern und zu verwalten Wir verwenden hier eine funktionale Komponente. Die Sache hier drüben ist, dass wir nur einen Staat haben. Wenn Sie nun mit funktionalen Komponenten von React arbeiten , dank des Use-State-Hooks sind Sie dank des Use-State-Hooks nicht auf eine einzige Zustandsvariable beschränkt. Sie können so viele Zustandsvariablen deklarieren, wie Sie benötigen. Wenn nun die Statuswerte nichts miteinander zu tun haben, wird es Szenarien geben, in denen Sie mehrere Informationen im Auge behalten möchten mehrere Informationen Zum Beispiel behalten wir hier den Überblick über die Zählung, okay? Nun möchten Sie vielleicht einen weiteren Wert im Auge behalten, und wenn diese Werte nichts miteinander zu tun haben, ist es sinnvoll, sie in separaten Zustandsvariablen zu speichern Und dies kann Ihnen helfen, Ihren Code übersichtlicher zu gestalten, indem Sie verwandte Daten gruppieren und die nicht verwandten Daten trennen . Alles klar? Lassen Sie uns nun sehen, wie wir in diesem Beispiel hier einen weiteren Staat hinzufügen können. Hier erhöhen wir also einfach die Anzahl um eins und dekrementieren sie ebenfalls um Nehmen wir an, ich möchte eine Anpassung haben Ich möchte Ihnen eine Anpassung für meine Benutzer geben , bei der der Benutzer mir sagen kann, ob ich die Anzahl um einen oder einen anderen Wert erhöhen möchte. Okay? Also, was ich tun werde, ist, hier drüben einen weiteren Bundesstaat hinzuzufügen. Ich nenne diesen Status als Schritt. Okay. Und in diesem Schritt wird festgelegt, wie hoch und um wie viel verringert werden soll Okay? Also, was ich tun werde, ist diese ähnliche Syntax zu replizieren Okay? Wir sagen Use State, okay, hier drüben und Ups Und hier drüben nenne ich das einen Schritt, und ich nenne es einen festen Schritt, ungefähr so Okay? Und der Standardwert , den ich haben werde, ist eins, okay? Weil der Standardwert für Inkrement und Dekrement, den ich haben oder den Benutzern geben möchte, eins ist Okay. Jetzt ist das erledigt. Jetzt sind wir hier. Was ich tun werde, ist, dass ich hier drüben einen Beitrag geben werde . Okay. Also lass es uns hier sagen. Lassen Sie mich zurückgehen und ich sage Eingabe. Also werde ich das hier kurz vor dem Inkrementieren und Dekrementieren hinzufügen vor dem Inkrementieren und Dekrementieren , kurz nach H eins. Okay? Also sage ich hier Input, so etwas in der Art. Okay. Und für die Eingabe, okay, ich nehme das selbstschließende Etikett. Das brauche ich hier nicht. Und hier drüben kann ich Typ sagen. Typ ist das, was hier ein Typ ist. Wir arbeiten also mit Zahlen. Also werde ich hier Nummer sagen. Okay. Und ich sage auch Wert. Was ist nun der Wert für diese spezielle Eingabe? Also muss ich das an die State-Variable binden. Also sage ich, komm her. Okay. Ich gehe zur nächsten Zeile und sage „Keine Veränderung“. Also im Grunde genommen, wenn der Benutzer etwas in diesem speziellen Eingabefeld ändert etwas in diesem speziellen Eingabefeld , lasse ich Änderungen zu, richtig, ich wünschte, ich möchte den Status aktualisieren, oder? Das werden wir tun. Also sage ich bei Veränderung, und hier drüben werde ich eine Veranstaltung haben. Ich sage E, um die Pfeilfunktionen zu verwenden , und ich sage hier Schritt setzen, okay, ich gebe den E-Punkt-Zielpunktwert ein. Die Sache hier drüben ist, dass dieser Wert als Zeichenfolge übergeben wird , oder? Also kann ich sagen, hier einlesen und ich kann das komplett in den gesendeten Teil zusammenfassen Okay, was passiert, ist dass wir sagen, Zielpunktwert festlegen Also im Grunde ist das das Element, und wir sagen, dass wir den Wert von diesem Element erhalten , dass wir den Wert von diesem Element und ihn an setstep übergeben. Was ist Setstep hier? Set Step ist die Funktion , die für die Aktualisierung dieses Status verantwortlich ist. Sie wird bei Änderung aufgerufen. Alle Änderungen in diesem Eingabefeld werden also in den Status übernommen. Okay? Jetzt ist es gebunden, oder? Jetzt, beim Inkrementieren und Dekrementieren, muss ich hier Step Over benutzen Das ist eine Änderung, die ich vornehmen muss. Okay. Lassen Sie uns nun testen, wie unsere Anwendung aussieht. Sie können sehen, dass die Standardeinstellung eins ist Ich kann das Dekrement hier erhöhen. Wenn ich die Standardeinstellung auf zehn setze und anfange zu inkrementieren, siehst du neun, 19, 29, 39, und ich kann auch dekrementieren Wenn ich hier fünf sage, kann ich das hier sehen, es wird entsprechend aktualisiert Je nachdem, welchen Wert ich hier ändere, spiegelt er die Änderung wider. Das kannst du sehen. Also hier, in diesem Beispiel, verwenden wir zwei Zustandsvariablen, ich würde sagen, eine ist Anzahl, eine andere ist Schritt für Schritt, um den Zähler zu erhöhen Stimmt das? Also ja, es mehrere Zustandsvariablen in ist absolut möglich, mehrere Zustandsvariablen in einer einzigen Reaktionskomponente zu haben. Sie können mehrere Status verwenden, um unabhängige Informationen zu verfolgen , die Sie möglicherweise innerhalb einer bestimmten Komponente verfolgen möchten innerhalb einer bestimmten Komponente Okay? Du kannst das sogar verschönern, wenn du willst Also hier, diese App sieht nicht so gut aus. Wir sind nicht beeindruckt, oder? Also was du tun kannst, ist hier, du kannst kommen und ich werde hier etwas CSS hinzufügen. Okay. Also hier drüben sage ich zum Beispiel für Eingabefeld, okay? Ich sage hier Eingabe. Für die Eingabe sage ich Breite von 50 Pixeln. Okay. Und ich sage Paarung von fünf Pixeln, okay? Etwas in der Art, und ich sage hier Rand, Rand von zehn Pixeln Okay, Flasche. Wir fügen eine Flasche hinzu. Ich sage ein Pixel fest und füge den Farbcode wie C und Radius hinzu. Okay, für einen Radius von vier Pixeln ungefähr so. Mal sehen, wie unsere Eingabe aussieht. Eingabe sieht anständig aus. Du kannst sehen. Okay. Und wir können Schaltflächen auch ein bisschen CSS hinzufügen. Die Knöpfe, die wir haben, sehen ziemlich roh aus, oder? Hübsche Milchknöpfe. Damit wir Polster haben können. Ich kann hier eine Polsterung von fünf Pixeln und hier von zehn Pixeln sehen , okay? Und Sie können einen Spielraum von Entschuldigung sehen, fünf Pixel. Okay. Botel, ich kann nichts sagen. In Ordnung. Und ich kann Radius sagen. Ich kann sagen, ein Radius von, sagen wir , vier Pixeln, der wahrscheinlich dem der Eingabe ähnelt. Und ich kann hier eine Hintergrundfarbe hinzufügen, Hintergrundfarbe von Hash 007b, FFI habe E, Farbcode Sie können hier sogar hellblau hinzufügen, wenn Sie möchten, um die Dinge einfach zu halten Also sage ich einfach hellblau oder sage hier einfach blau. Blau, richtig? Und du kannst Farbe natürlich als Weiß sehen. Das ist also für Text. Und dann kannst du Coso Cursor als Zeiger verwenden, okay? Und dann können Sie den Button- und Doppelpunkt-Hover-Effekt haben. Okay. Also, was ist der Hover-Effekt dafür Wie wird das Hintergrundfarb-Update dunkelblau sein. Okay. Also das ist erledigt und lass uns sehen, ob das und lass uns sehen, wie das aussieht. Okay, das sieht ziemlich anständig aus, ich würde sagen, okay, besser als die frühere Version, du siehst, es ist ein ordentliches CSS. Du kannst hier, äh, noch viel mehr hinzufügen, okay, wenn du willst. Okay. Also oben hier habe ich diesen App-Container. Ich habe Spielraum. Sie können einen Rand von, sagen wir, 20 Pixeln haben. Okay. Also habe ich einen Rand von 20 Pixeln hinzugefügt, und das sieht anständig aus. Okay. Also ich denke, die App sieht im Moment anständig aus, oder? Und Sie können das CSS weiter verbessern, wenn Sie möchten. Okay. Aber da wir lernen, denke ich, dass das absolut in Ordnung ist. Wir können sehen, wie die Funktionalität funktioniert und wie die React-Konzepte zum Leben erweckt werden. Ordnung. Also ich hoffe, das war nützlich und ich hoffe, du hattest Spaß. 6. Die asynchrone Natur von React: Was du wissen musst: Jetzt ist es an der Zeit, über Statusaktualisierungen zu sprechen. Jetzt haben wir diese Zähleranwendung, mit der wir den Zähler auf der Grundlage der Tastenklicks erhöhen oder verringern können der Grundlage der Tastenklicks erhöhen oder verringern . Alles klar? Nun, wann immer Sie Statusaktualisierungen durchführen, müssen Sie sich an ein paar Dinge erinnern. Zuallererst ist wichtig Statusaktualisierungen asynchroner Natur sind, was bedeutet, dass sie nicht synchron sind Und was React macht, ist dass es mehrere Statusaktualisierungen zusammen stapelt Okay? Nun, wann immer Sie mehrere Statusaktualisierungen durchführen, sollten Sie ein Update oder eine Funktion verwenden Jetzt werden Sie fragen, was eine Aktualisierungsfunktion ist? Updata-Funktion ist also eine Pfeilfunktion oder eine einfache Funktion, die übergeben wird, wenn der Status einer bestimmten Variablen oder einer bestimmten Komponente in React aktualisiert einer bestimmten Variablen oder einer bestimmten Komponente in Okay? Lassen Sie mich Ihnen dafür ein Beispiel geben. Alles klar? Nehmen wir an, wir haben diese Schrittzahl, okay, ich kann sie um eins erhöhen oder was auch immer der Schritt Okay? Also, ich würde mich hier noch ein Muster hinzufügen lassen, okay? Also füge ich noch einen Button hinzu. Okay. Und ich sage inkrementieren oder lass mich hier plus zwei hinzufügen. So eine Sache Okay. Also, das wird es zweimal erhöhen, okay? Und ich sage hier zweimal inkrementieren. Ordnung. Diese Funktion gibt es nicht. Wir werden also herkommen, um die Zählung zu erhöhen, und ich werde das duplizieren und ich sage inkrementieren Zweimal, so etwas. Okay? Also, was ich tun möchte, ist, das zweimal zu erhöhen Also habe ich das einmal erhöht, und ich werde das hier zweimal erhöhen Okay? Wenn ich herkomme, wirst du diesen Knopf sehen. Idealerweise sollte der Zählerwert nun zweimal erhöht werden, wenn Sie auf diese Schaltfläche klicken sollte der Zählerwert nun zweimal erhöht werden Also von fünf, wenn es fünf ist, sollte es sieben werden. Wenn es Null ist, sollte es zwei werden. Warum? Weil ich den Status zweimal aktualisiere, oder? Lass mich dir ein Beispiel zeigen oder lass mich dir eine Demo davon zeigen, okay? Ich habe die Datei gespeichert und wenn ich zwei plus zwei mache, werden Sie sehen, dass sie nur um eins erhöht wird. Okay? Lassen Sie mich von Null aus aktualisieren, es werden eins, zwei, drei und so weiter sein. Okay? Es erhöht es nicht um zwei Und der Grund dafür ist, dass Statusaktualisierungen asynchron sind, okay? Es fasst also mehrere Statusaktualisierungen zusammen. Was jetzt passiert, ist hier drüben, diese Zahl oder Zählung plus eins zu schreiben Das entspricht Null plus eins hier drüben und Null plus eins hier drüben. Es entspricht dem. Warum es dem entspricht, weil der Anfangswert von state Null ist. Wenn der Anfangswert Eins ist, entspricht dies dem Schreiben von Eins plus Eins und Eins plus Eins. Der vorherige Wert. Im Grunde genommen aktualisierst du die Zählung hier auf zwei, richtig? Dies wird also bei der Ausführung dieser zweiten Zeile nicht berücksichtigt . Der Anfangszustand der Zählung wird berücksichtigt. Und der Grund dafür ist, dass es asynchron ist und die verschiedenen Updates zusammen gepatcht werden Also mache ich einfach Control C. Okay. Also das wird nicht funktionieren , richtig. Also werde ich eine Aktualisierungsfunktion verwenden. Okay? Wir müssen also ein Update oder eine Funktion für mehrere Statusaktualisierungen verwenden . Also werde ich das einfach so kommentieren. Okay. Ich werde das hier drüben zusammenfügen. Um die Funktion updata zu nutzen, verwenden wir hier eine sehr einfache Pfeilfunktion , die uns bei der Durchführung des Updates helfen wird Okay? Also hier, ich sage Zählung oder vorherige Zählung hier drüben, etwa so. Und ich nehme das hier drüben. Nun, die vorherige Zählung hier drüben, diese spezielle Variable hat den Wert des vorherigen Zählwerts. Okay? Also ich nehme das hier her und das wird hierher kommen, ungefähr so. Okay. Und jetzt schauen wir uns die Ausgabe an. Wenn ich jetzt aktualisiere, wenn ich plus zwei plus zwei plus zwei plus zwei mache, können Sie sehen, dass es jetzt zweimal inkrementiert wird Stimmt das? Also das funktioniert gut. Und was wir geändert haben, ist, dass wir jetzt diese Pfeilfunktion hier drüben verwenden, okay, die einfach den vorherigen Wert von count nimmt und ihn um eins erhöht Nun, das ist nur eine Konvention hier, bei der ich diese Variable namens PIV Count verwendet habe der ich diese Variable namens PIV Count verwendet habe Normalerweise ist es eine Konvention. Normalerweise würden Sie sehen, wenn Sie Code online lesen, werden Sie sehen, was auch immer die Zustandsvariable ist. Der erste Buchstabe wird in Großbuchstaben umgewandelt, so wie C hier ein Großbuchstabe ist, und PIV wird hier unter oder vor dem Namen des Bundesstaates hinzugefügt , was darauf hinweist, dass es sich um einen früheren Wert Okay? Sie können hier auch C und C verwenden, C und C. Die Ausgabe wird sich nicht ändern. Okay? Also das ist nur eine Konvention. Wenn ich einen Refresh mache und es erneut abspiele, können Sie sehen, dass es hier zweimal inkrementiert wird Wenn Sie also mehrere Statusaktualisierungen zusammen durchführen möchten , okay, es ist am besten, diese Art von Syntax zu verwenden , bei der wir ein Update oder eine Funktion verwenden Okay? Hier wird der vorherige Wert des Zustands in C übernommen und um eins erhöht Und dann wird für den nächsten Aufruf der vorherige Wert, also die Aktualisierung die Aktualisierung nach der Zählung von diesem speziellen Code hier , hierher übergeben und dann um eins erhöht Du wirst also keine Bugs bekommen, wenn du die Dinge auf diese Weise machst. Okay? Es ist ein sehr häufiges Problem, bei dem Entwickler Dinge auf diese Weise tun und sagen: Hey, mein Code ist inkonsistent und ich sehe nicht die gewünschte Ausgabe Und der Grund dafür ist einfach, weil Updates asynchron sind, okay? In diesem speziellen Fall ist das Aktualisieren einer Funktion also hilfreich. Hier, in diesem speziellen Fall, , wenn Sie Code auf diese Weise schreiben Updates in die Warteschlange gestellt Okay? Also dieser erste wird ausgeführt, und dann steht der nächste in der Warteschlange. Und sobald der erste abgeschlossen ist, dieser ausgeführt, und bis dahin ist er in der Warteschlange Okay? So können Sie also mehrere Updates stapeln oder gleichzeitig durchführen. Denken Sie daran, dass Statusaktualisierungen in React für Komponenten von Natur aus asynchron sind und Sie die Aktualisierungsfunktionen für mehrere Statusaktualisierungen verwenden müssen für mehrere Statusaktualisierungen Nun, welche Updata-Funktionen, wie gesagt, es sind einfache Pfeilfunktionen, die Sie übergeben Zur Updater-Funktion hier drüben. Das ist also die Funktion , die verwendet wird, um den Status zu aktualisieren Okay? Und Sie übergeben hier die Updater-Funktion , um den Wert zu aktualisieren Ordnung. Also ich hoffe, das war nützlich und ich hoffe, Sie konnten mitmachen. 7. Arrays und Objekte in React State Management navigieren: Hallo, da. In diesem Video werden wir also eine Anwendung erstellen, die uns helfen wird, mehrere Zähler zu verwalten, richtig Wenn ich also sage, dass es uns hilft, mehrere Zähler zu verwalten, können Sie der Seite im Handumdrehen Zähler hinzufügen. Sie können sogar einzelne Zähler einzeln erhöhen einzelne Zähler Also lass es mich dir zeigen. Ich habe diese Theke hier drüben, okay? Ich kann ihn um eins, zwei, drei, vier erhöhen . Das ist Zähler eins Okay, ich kann einen Zähler hinzufügen, wie ich will. Ich habe hier fünf Zähler hinzugefügt. Ich kann den einen je nach meiner Wahl erhöhen. Und du kannst sehen, dass jeder Zähler hier seine eigene Zählung hat, okay? Es überschneidet sich in keiner Weise und es hat eine eigene Taste, über die das Ereignis abgehört wird Und jedes Mal, wenn Sie auf diese bestimmte Schaltfläche klicken, der Status, der diesem bestimmten Zähler entspricht wird der Status, der diesem bestimmten Zähler entspricht, inkrementiert, oder die Anzahl, die diesem bestimmten Zähler entspricht , wird inkrementiert und nicht Okay? Und Sie können je nach Bedarf so viele Zähler hinzufügen , wie Sie möchten, okay, solange Sie möchten. In Ordnung. Du kannst diese Anwendung sogar erweitern, um eine Schaltfläche zum Herunterfahren hinzuzufügen, um hier einen Schritt hinzuzufügen, okay? Mit Schritt können Sie also eine Zahl nehmen, die entscheidet, ob sie um eins erhöht werden soll oder um welche Zahl sie Pi erhöht. Okay? Sie können das also tun, und Sie können sogar eine Schaltfläche hinzufügen, um den Zähler zu löschen. Wenn Sie also einen bestimmten Zähler löschen möchten, können Sie ihn auswählen und löschen. Das sind also die Verbesserungen , die vorgenommen werden können, okay. Aber im Moment wird das Beispiel genau das sein. Es ist eine Liste mit mehreren zusammengestellten Zählern. Mit einer eigenen Anzahl, die angezeigt wird, und einem eigenen Inkrementmuster, das uns helfen kann Anzahl des jeweiligen Zählers zu erhöhen Alles klar? Bereit? Also lass uns gleich loslegen. Also hier, ich bin in der Anwendung, und ich habe diese Datei-App Punkt JSX, der ich ein paar Importe oben habe, und ich habe diese Funktion oder eine funktionale Komponente, die mit dem Export erstellt wird, und sie zeigt gerade einfach Hallo an, oder? Und Sie können Hallo als Ausgabe hier sehen. Okay? Nun, der Punkt , den ich hier in diesem Video demonstrieren möchte, ist der Punkt, über den ich sprechen werde, ist, dass Sie Arrays, Objekte und noch komplexere Datenstrukturen in einem Zustand speichern können Arrays, Objekte und noch komplexere Datenstrukturen in einem Zustand Okay? Der Zustand ist also einfach nicht auf eine normale Variable beschränkt. Es ist nicht so, dass Sie einen einzelnen Wert in einem Zustand speichern können, aber Sie können komplexe Dinge wie Arrays, Objekte und noch mehr haben , Objekte und noch mehr Okay? Und darauf wird sich dieses Beispiel richten, okay? Wenn Sie sich also die Anwendung ansehen , die wir stapeln werden, okay, wir brauchen eine Liste von Zählern, oder Also, mit der App werde ich hier drüben einen Staat erstellen Okay. Also sage ich const. Okay. Und statt Zähler werde ich hier Zähler sagen, so etwas in der Art, und ich werde Zähler setzen sagen Okay. Und ich sage, benutze State hier drüben. Okay. Und wir brauchen hier drüben einen Initialisierungsblock, richtig? Also werde ich das auf Standard initialisieren und Standard wird das hier sein. Okay? Also werde ich ID sagen, und ID wird eins sein, und ich werde sagen, Wert und Wert ist Null. Okay? Also diese Variable oder dieser Zustand hat im Grunde die Liste aller Zähler in Form eines Arrays, und jeder Zähler hier drüben ist ein Schlüssel-Wert-Paar Sie können sehen, dass das ein Zähler ist, okay, der seine eigene ID und seinen eigenen Wert Okay? Also das ist Zähler eins, und es ist ein Objekt für Zähler eins, und Sie haben hier eine Reihe von Zählern. Man kann sagen, das enthält eine Reihe von Zählern und ein einzelner Zähler ist nichts anderes als ein Objekt, dessen Attribut ID und Wert Okay? Also so wird es hier weitergeführt. Ich werde das einfach auf neue Zeilen übertragen, sodass es hier auf einem einzigen Bildschirm sichtbar ist. Okay? Also das ist klar, okay, warum wir so etwas haben. Okay? Also, das nächste, was ich hier hinzufügen möchte, ist eine Funktion, okay? Ich sage const, füge hier Zähler hinzu. Okay. Und das ist eine Funktion, die uns helfen wird neue Zähler zur Schnittstelle hinzuzufügen, oder? Es ist also eine Pfeilfunktion, und hier drüben werde ich ein Semikolon hinzufügen, und ich werde die Logik hier drüben haben Nun, um die Zähler hinzuzufügen, was wir tun müssen Also lass mich dieses Array nehmen. Also das ist das Array. Okay. Lass mich das in einer Zeile zusammenfassen. Das ist der Zähler, oder? Um noch einen Zähler hinzuzufügen, muss ich nur das Ganze nehmen. Okay? Ich muss Komma sagen und das hier drüben mit der ID hinzufügen. Stimmt? So füge ich einen weiteren Zähler hinzu. Wenn ich noch einen hinzufügen muss, sage ich Komma, ich füge dasselbe hinzu und rechne das in drei um, richtig So füge ich also Zähler hinzu, oder? Nun, wie kann ich diese Logik hier implementieren, richtig? Also, was ich tun muss, ist zuerst die Liste aller aktuellen Objekte, die existieren, okay? Und ich muss am Ende noch ein Objekt anhängen , dessen ID um erhöht wird. Ich wiederhole Die Logik hier, die ich implementieren muss, besteht also darin , die Liste aller aktuellen Objekte , die für den Zähler existieren, im Array zu haben aller aktuellen Objekte , die für den Zähler existieren, und dann am Ende ein weiteres Objekt hinzuzufügen, am Ende ein weiteres Objekt dessen ID um eins erhöht wird Sie können sehen, wie würden wir das machen? Also werde ich das hier loswerden. Okay, dieses Ding. Und was ich tun muss, ist aufrufen Erstes Set Counter als Erstes Set Counter aufrufen , weil wir das hier aktualisieren müssen, richtig? Also sage ich drei Punkte. Ich werde diesen Spread-Operator verwenden. Ich sage hier Zähler. Okay? Also verteile ich den vorhandenen Wert der Zähler hier drüben. Okay? Tut mir leid, das muss drin sein, es ist ein Funktionsaufruf, oder? Hier drüben. Okay. Also verteile ich zuerst den vorhandenen Wert der Zähler und dann sage ich ID, Doppelpunkt, ich sage Zähler Punktlänge plus eins hier drüben Und ich sage Wert Null. Das wäre also meine Logik, im Grunde neue Zähler hinzuzufügen. Ich hoffe, das macht hier Sinn. Okay? Wir haben also eine neue Pfeilfunktion namens Zähler hinzufügen erstellt, oder? Und wir rufen Set Counter auf. Warum rufen wir Set Counter an? Weil es die Statusaktualisierungsfunktion für Zähler ist, oder? Nun, wie aktualisieren wir den Status? Mit welchem Wert aktualisieren wir ihn? Also was auch immer existiert, also müssen wir ein Array hinzufügen. Okay? Wir müssen hinzufügen und das bestehende Array mit einem neuen Array aktualisieren. Okay? Wir müssen das bestehende Array , das es enthält, aktualisieren. Also das ist das bestehende Array, richtig, das hält. Es hat ein Objekt. Was wir tun müssen, ist, den Spread-Operator zu erstellen und alle Zähler hier zu verteilen. Okay? Und dann müssen wir am Ende noch einen hinzufügen. Wir müssen sagen, dass ID Punktlänge plus eins des Zählers ist und der Wert Null ist Okay. Sobald wir das tun, wird es zur bestehenden Liste hinzugefügt, und jetzt hat Counter hier zwei Zähler, einen mit ID eins und einen mit ID Und wenn Sie dann wieder bei den Zählern anrufen, wird es sich sowohl hier verteilen als auch den dritten hinzufügen und so weiter Okay? Also ich hoffe, diese Logik ist ziemlich klar. Wir verwenden hier den Spread-Operator und erstellen ein neues Array, das sich selbst durch das bestehende für Zähler ersetzt selbst durch das bestehende für Zähler Kunst? Also das wird an der Theke gemacht. Also, was wir tun müssen, ist , hierher zu kommen. Und ich muss einen Button hinzufügen. Ich muss das Y hier aktualisieren. Ich sage Button. Ich sage auf Klick. Was sollte ich beim Klicken aufrufen? Ich nenne hier Add Count und sage, das ist Plural, also sage ich hier Add Count. Okay, so und ich sage an der Theke, so etwas Okay. Und ich werde diesen Knopf hier schließen. Okay. Und wir müssen auch den Zähler anzeigen , oder? Wie zeigen wir an? Also zeigen wir es als ungeordnete Liste an, eine einfache ungeordnete Liste, die diese HTML-Tags verwendet Okay? Und ich sage Zähler mit Punktkarte Also verwenden wir hier die Karte. Okay. Und hier muss ich Zähler sagen. Okay, also für jedes Element in den Zählern sage ich Zähler, das heißt, ich akzeptiere das als Parameter und ich habe das im Grunde, ich habe diese Pfeilfunktion hier drüben. Okay? Und was ich hier machen würde, ist, dass ich hier drüben eine Liste erstellen würde. Okay, so etwas. Also werden Ali und ich eine Liste erstellen. Okay. Nun, was diese Liste haben wird, sie wird einen Schlüssel haben. Natürlich müssen wir einen Schlüssel hinzufügen , damit das Rendern optimiert wird. Es wird also eine eindeutige ID haben, nämlich die Zählerpunkt-ID. Okay. Und hier muss ich den Zähler anzeigen, und wir können die Zählerpunkt-ID anzeigen. Ich brauche eine Benutzeroberfläche, die sagt: Okay, also die Benutzeroberfläche, die ich anzeigen muss, ist Zähler eins, Doppelpunkt, und dann hat es hier eine Schaltfläche. Okay. Dann hat es einen Knopf. Hoppla. Dann hier drüben, da ist ein Knopf Das ist die Benutzeroberfläche, die ich haben möchte, oder? Ich habe also einen Zähler, und einer ist nichts anderes als die ID, die Zähler-ID. Ich füge hier einen Doppelpunkt hinzu. Okay? Ich sage Zählerpunktwert. Okay. Ich möchte den Wert anzeigen , weil Null der Wert ist. Und dann brauche ich einen Knopf. Okay? Also füge ich einen Button hinzu. Ich nehme es in die neue Zeile und sage Button. Okay. Und beim Klick muss es ein On-Click-Event geben. Ordnung. Und auf einen Klick. Okay, so etwas in der Art. Ich muss es mit einer Funktion verknüpfen. Okay? Es wird eine Inkrementzählerfunktion , die es noch nicht gibt Okay, ich nehme einfach ein leeres Ding hier drüben. Ich lasse das einfach leer. Okay? Und hier sage ich Inkrement Inkrement. Das ist es. In Ordnung. Und ich muss diesen Text hier loswerden. Das dient nur zu Erklärungszwecken. Ich speichere das und lasse uns die Benutzeroberfläche sehen. Können wir es sehen? Ja. Können wir den Zähler hinzufügen? Lass es uns versuchen. Wirst du sehen? Fantastisch, oder? Increment funktioniert nicht, weil wir diese Funktion nicht erstellt haben Wir rufen hier nur ein leeres Ding an, oder? Also, wie das funktioniert, wie Add Counter funktioniert. Erstens pflegen wir den Zähler auf diese Weise. Okay? Also, wenn das nicht klar ist, lass es mich dir auf klarere Weise erklären. Okay. Ich werde hier jeden Schritt machen, um sicherzugehen, dass du es verstehst. Okay? Also das ist der Zeitpunkt, an dem der Zähler eins ist, okay? Zähler. Count ist eins. Okay. Wenn der Zähler zwei ist, okay. Zähler zwei. Was passiert, ist, wenn Sie einen Zähler hinzufügen, dieser wird ebenfalls aktualisiert. Das wird also auf dieses Ding aktualisiert. Okay. Ist noch einer. Das ist ID zwei. Okay? Wenn der Zähler drei wird, gibt es drei Zähler, okay? Oder 1 Sekunde. Lass mich sagen, wann einer kontert. Okay. Ich kopiere das einfach, wenn zwei zählen und wenn drei zählen. Also das ist Zweizähler und das ist Dreizähler. Okay? Nun, wenn es drei Zähler gibt, fügen Sie hier das dritte Element hinzu. Das ist der dritte Zähler hier drüben. So werden Zähler verwaltet. Okay? Ich hoffe, das macht Sinn. Das ist also der Fall, wenn es nur einen Zähler gibt. Okay, der Zähler ist also vertreten. Der Zähler kann also durch zwei Dinge dargestellt werden. Eine ist die ID des Zählers und die andere Sache ist der Wert. Okay? Also haben wir zunächst einen Zähler mit der ID eins und dem Wert Null. Damit haben wir es initialisiert, oder? Und wir rendern es, wie wir es eingeben Also wenn du hier runter scrollst, okay? Wir sagen, für jeden Zähler sollten Sie hier die Kartenmethode weil wir hier die Map verwenden , weil in einem Array gespeichert wird. Es ist eine Reihe von Objekten, oder? Jeder Zähler wird auf diese Weise dargestellt, oder? Der Zähler wird auf diese Weise dargestellt. Und um mehrere Zähler darzustellen, erstellen wir ein Array, oder? Das ist ein Array. Sie können sehen, dass die Elemente hinzugefügt werden. Okay? Wenn drei Zähler drei Zähler hinzugefügt werden , können Sie sehen, dass drei Elemente vorhanden sind, oder? Wir sagen also Zähler mit Punktkarte. Okay? Für jeden Zähler müssen wir die Zähler-ID anzeigen. Leider zeigen wir die Zähler-ID nicht an, aber wir fügen sie dem Schlüssel hinzu, und wir zeigen die Zähler-ID so an. Okay, wir sehen Zähler eins und der Wert wird angezeigt. Und beim Klicken müssen wir das Inkrement ausführen, was wir gerade nicht tun Okay? Und wenn wir „ Hinzufügen“ sagen, wenn wir auf diese Schaltfläche klicken, fügen Sie hier den Zähler hinzu. Was passiert ist, dass diese Funktion aufgerufen wird. Diese Funktion fügt diesem Array ein Element hinzu. Sie können hier sehen, dass dieses Element zum Array hinzugefügt wird , aber es stellt sicher, dass die ID um eins erhöht wird Okay? Also, wie fügt es ein Element zum Array hinzu? Es verbreitet die vorhandenen Elemente. Es erzeugt ein neues Element, neues Array, indem das bestehende Element verteilt und am Ende ein neues Element angehängt Wie ist es also, ein neues Array zu erstellen? Es erstellt hier ein neues Array indem es das bestehende Array verteilt und am Ende ein neues Element an das Array und sicherstellt , dass seine ID um eins erhöht wird So macht es das. Okay? Also das ist erledigt. Ich lösche das nicht. Ich habe das nur in Form von Kommentaren. Ich denke, das ist gut, um den Zweck zu verstehen. Wenn Sie immer noch verwirrt sind, sollte, wenn Sie sich das ansehen, alles geklärt sein, oder? Denn so sieht der Zähler aus , wenn drei Zähler erstellt werden So würde der Staat aussehen. Okay. Jetzt ist das erledigt. Jetzt muss ich einen Inkrementzähler haben Alles ist erledigt, oder? Inkrementzähler. Also das funktioniert gut, wenn ich aktualisiere Es wird zuerst auf eins initialisiert, und wenn ich mehrere Zähler hinzufüge, können Sie sehen, dass die ID ebenfalls inkrementiert wird Okay? Also werde ich herkommen. Also ich würde hier Const sparen. Okay? Ich sage Inkrement. Zähler. Okay, Inkrementenzähler, so etwas wie das hier drüben. Okay. Ich lasse die ID hier drüben weitergeben und eine Pfeilfunktion. Hoppla, Pfeilfunktionen, so etwas, das mit einem Semikolon endet Nun, wie können wir den Zähler erhöhen? Wir haben also die ID des Zählers, richtig? Wie bekommen wir den Ausweis? Wir holen es her und wir müssen es hier rüber geben. Okay? Wie bestehen wir es? Also können wir das hier drüben sagen. Das ist eine Pfeilfunktion, also werde ich sie einfach entfernen. Ich sage Inkrementzähler. Und ich sage Counter Dot ID, etwa so. Also geben wir die ID des Zählers weiter. Wir wissen also, welcher Zähler erhöht wird. Okay? Also, was wir tun müssen, ist dieses Array zu durchsuchen und wir brauchen den Zähler. Wessen Inkrementschaltfläche angeklickt wird oder wessen ID übereinstimmt, und wir müssen den Wert erhöhen und den Wert auf den inkrementierten Wert hier drüben aktualisieren den inkrementierten Wert hier drüben Okay, wie machen wir das? Also, was wir tun müssen, ist, dass Ala herkommt. Ich sage zuerst Zähler mit Punktkarte. Okay? Und ich werde hier eine Suche durchführen. Ich werde das gesamte Array hier durchgehen. Ich werde sagen, wie ich suchen werde, ich werde sagen, dass Counter-ID gleich ID ist. Okay? Und wenn es gleich ist, was machen wir dann? Wir erhöhen. Okay, ich muss die Logik für das Inkrement hinzufügen, sonst hast du den Zähler einfach hier drüben Okay? Du nimmst keine Änderung vor. So würde die Logik funktionieren. Okay? Und außerdem sollte die Ausgabe an die Zähler gehen , weil wir den Status aktualisieren müssen, oder? Also füge ich das Ganze hinzu, um Zähler zu setzen. Okay? Also, wie wird die Logik hier funktionieren? Also, was wäre die Inkrementlogik hier drüben? Ich würde sagen, ich würde ein Paar lockige Zahnspangen hinzufügen. Okay? Ich würde sagen, verteile den Zähler hier drüben und aktualisiere seinen Wert hier. Okay, ich sage Zählerwert plus eins. Okay? Also, das wird verteilen den aktuellen Zähler zusammen mit seinem Attribut verteilen, und es wird den Wert hier überschreiben, und es wird den Wert um eins erhöhen Okay? Zunächst werden alle Attribute unverändert gelassen. Also verteilt es zuerst den Zähler hier, und dann aktualisiert es das Wertattribut des Zählers mit dem neuen Wert. Okay? Und das ist es, was zurückgegeben wird. Und wenn das kein Match ist, dann wird das nur ausgeführt, wenn es wahr ist. Wenn dies keine Übereinstimmung ist, wird der aktuelle Zähler zurückgegeben. Okay. Ich hoffe, das macht Sinn. Und wenn ich dann herkomme, lassen Sie uns das testen. Und wenn ich grüße, siehst du, dass es gut funktioniert, oder? Sie können sehen, dass die gesamte Anwendung nicht neu geladen wurde auch nachdem wir die Funktion hinzugefügt haben, okay? Aber nur die relevanten Teile wurden neu geladen, weil die Zähler immer noch da sind Das gesamte Neuladen, so sieht das gesamte Neuladen der Anwendung aus. Alles ist zurückgesetzt Stimmt? Das wurde also nicht gemacht, obwohl wir eine neue Funktion hinzugefügt haben, oder? Das ist also das Schöne an React in den Staaten hier drüben. Sie können also sehen, dass diese Anwendung wie erwartet funktioniert, okay? Und ich hoffe, das gibt Ihnen einen guten Überblick darüber wie Sie komplexe Datenstrukturen wie Arrays, Objekte und noch komplexere Datenstrukturen im Status haben können , Objekte und noch komplexere Datenstrukturen im Und hier erfahren Sie, wie Sie es nutzen können. Okay? es ist ein ziemlich gutes Beispiel, ich würde sagen, es hilft Ihnen die Macht von Staaten zu verstehen und wie Sie mit Staaten zusammenarbeiten können , um Wunder zu bewirken. Ordnung. Also ich hoffe, du konntest mir folgen, und ich hoffe, du weißt es, also das sind einige grundlegende CSS , die ich eingerichtet habe. Okay? Es ist nicht viel, okay? Aber ganz einfache Dinge, wie Container-Styling, H-one-Styling , Eingabe-Styling, Border-Styling , Sorry, Button-Styling und Hover-Styling Ich habe so einfaches CSS, das bereits mit dieser speziellen Datei verknüpft war Okay? Also ich hoffe, das war nützlich und ich hoffe, Sie konnten mitmachen. 8. Projekt-Spotlight: Formulareingaben mit dem useState Hook von React verwalten: Hallo, da. Jetzt ist es an der Zeit, dass wir darüber sprechen, wie Sie mit React ein Formular erstellen und alle Daten mit Hilfe von State verwalten und State Hook in Komponenten verwenden können. Ordnung? Also das werden wir bauen. Ich habe den Temo tatsächlich hier drüben. Und Sie können sehen, dass es verschiedene Arten von Formularelementen gibt verschiedene Arten von Formularelementen , mit denen wir herumspielen Also zuerst haben Sie ein normales Textfeld. Okay, und du hast eine Checkbox. Sie haben Optionsfelder, Sie haben ein Auswahlfeld und Sie können hier live sehen, wie alle Formulardaten aktualisiert werden. Lassen Sie mich Ihnen eine Demonstration geben. Was auch immer ich hier eingebe oder was auch immer ich auswähle, es wird hier angezeigt. Okay? Also hier, wenn ich sage, hey, du kannst diesen Text hier oben sehen. Okay, ich kann sagen, ich liebe React, so etwas. Und du kannst alle Updates sehen, die ich mache, sie werden auch in Echtzeit wiedergegeben. Ich kann die Optionsfelder auswählen. Sie können sehen, wie Option eins hier angezeigt wird. Wenn ich zu Option zwei wechsle, siehst du Option zwei hier. Das Gleiche gilt für die Checkbox. Ich kann aktiviert und deaktiviert sehen und auch für die Auswahl Sie können Option eins, Option zwei sehen. Ordnung. Das ist also ein Formular, das vollständig von React mit Hilfe von U State Hook verwaltet wird . Sie können sehen, wie es einen Teil der Anwendung aktualisieren kann, wenn sich ein anderer Teil ändert, ohne die Seite zu aktualisieren Das ist das Schöne an React, oder? Damit du sehen kannst, wie es funktioniert. Selbst wenn Sie zu einem beliebigen Zeitpunkt etwas aktualisieren, werden Sie sehen, dass das Update übernommen wird ohne dass die Seite aktualisiert oder neu geladen wird Ordnung. Also werden wir das in der Praxis aufbauen und wir werden jeden Schritt durchgehen , wie Sie das bauen können. Und dieses Wissen wird wirklich hilfreich sein wenn Sie planen, React für, Sie wissen schon, zum Erstellen von Formularen zu verwenden , dynamische Formulare mit einigen robusten Validierungen Also hier sind wir in der IDE, und das ist der Startcode, den ich hier habe. Es ist eine Komponente namens App-Komponente. Okay? Der Name ist die App selbst. Befindet sich in der Datei App Dot JSX, verknüpft mit einem CSS namens App Dot CSS, und die CSS-Datei hat buchstäblich nichts Ordnung. Also müssen wir daran arbeiten. Es zeigt einfach einen Header hier drüben an oder ich sollte sagen, eine Überschrift namens Hallo auf der Webseite, okay? Also werden wir mit dieser Anwendung beginnen. Das Erste, was wir tun werden, ist , den Usestate hier drüben zu verwenden, in Ordnung Achten Sie darauf, den Nutzungsstatus oben zu importieren, okay? Ich habe bereits ein importiertes. Also werden wir den Staat nutzen. Ich werde konstant sagen. Ich werde einen Status namens Formulardaten erstellen lassen, und ich werde einen Satz Formulardaten haben. Funktion hier drüben, und dann werde ich den US-Zustand so verwenden, ja, womit soll das initialisiert werden? Das ist interessant. Das ist also im Grunde ein Objekt, das die gesamten Formulardaten enthält. Wir haben also Text hier drüben, oder? Wir haben eine Checkbox, und die Initialisierung der Checkbox ist hier falsch. Wir haben ein Radio, das so initialisiert wird , dass es leer ist oder keine Daten als Das ist auch leer. Und dann müssen wir hier drüben so etwas auswählen. Okay. So wie es ist. Das ist also die erste Initialisierung. Es ist ein Objekt mit diesen Attributen. In Ordnung. Jetzt fange ich an, das Formular hier drüben zu erstellen. Okay? Also ich habe diesen H-One. Ich ändere das, ich ändere den Text als Beispiel. Okay. Ich werde sehen, ob das ist. Okay. Das ist erledigt. Und hier, dann habe ich diesen Klassennamen als Formularcontainer, ungefähr so, Formularcontainer. Das wird später für CSS hilfreich sein. Ich werde ein Fm-Tag haben, das ist das HTML-Fm-Tag. Okay. Und jetzt fange ich an, nacheinander an den Elementen zu arbeiten. Also das erste Element, das ich haben werde , ist Texteingabe, okay. Und das nächste, an dem ich arbeiten werde ist die Checkbox, ungefähr so. Okay? Also behandeln wir zuerst diese beiden und dann fahren wir mit dem nächsten fort. Ordnung? Also ja, das Textfeld Was müssen wir für das Textfeld oder die Texteingabe tun? Ein Recht? Also muss ich es zuerst als TIF haben. Okay? Ich werde das TIF als okay bezeichnen. Ups Okay, ich habe hier mit meinen Schlüsseln Mist gebaut, aber das wäre der Klassenname Und ich nenne das hier Formularfeld. Okay. Und das wird in eine neue Zeile übergehen. Und das Formularfeld, ich werde zuerst ein Etikett haben. Okay. Also das Etikett ist, was ist das Etikett, es wird Text sein. Wir müssen den Text eingeben. Sie können ein beliebiges Etikett wie einen Namen oder ähnliches hinzufügen, wenn Sie möchten. Okay. Eingabefeld, es ist ein Eingabefeld. Welche Attribute muss ich dafür einstellen? Also werde ich zuerst sehen, dass es sich um Text handelt. Okay. Dann ist der Name Text hier drüben. Okay? Name ist Text. Okay. 1 Sekunde, also drücke ich einfach die Tabulatortaste, sodass es eingerückt ist. Okay. Name ist Text. Was ist der Wert? Also muss ich ihn mit dem Wert verknüpfen, und der Wert ist hier drüben, Formulardaten, Text, so etwas in der Art, okay? Und dann brauche ich hier kein Kleingeld. Okay. Was sollte bei Veränderung passieren? Wir sollten eine Funktion namens Handle Change aufrufen. Okay. Obwohl diese Funktion noch nicht definiert ist, okay? Also müssen wir auch diese Funktion definieren. Ich lasse hier einfach eine leere Funktion erstellen , damit wir nicht in einem Fehler landen. Also sage ich const, handle change hier drüben. Okay. Und ich lasse E weitergeben. Okay. Und ich lasse es einfach leer. Okay. Überhaupt kein Problem. Hoppla. Es ist also ein Syntaxfehler Ja, sieht einfach gut aus. Ordnung? Es ist eine Pfeilfunktion, oder? Also ich habe nur diesen Handle-Change, und wenn du kommst, verbinde ich ihn mit Handle Change. Alles klar? Also, womit auch immer du es initialisierst, okay? Da du dieses Textfeld mit dem Status hier drüben verknüpfst , was auch immer du den Text initialisierst, wenn ich ABC sage und wenn ich das speichere, wirst du sehen, dass ABC hier oben ist, richtig? Weil das die Initialisierung ist, oder? Also habe ich es vorerst leer gelassen. Okay? Aber das ist das DIV oder das ist die Komponente, oder das ist die, ich sollte sagen, das ist die Benutzeroberfläche für die Texteingabe. Alles klar? Fahren wir nach der Texteingabe mit dem nächsten fort, wir haben eine Checkbox. Lassen Sie mich also zunächst den Text kopieren. Ups. Ich nehme das Zeug hier drüben. Okay. Es ist auch ein Formularfeld. Es hat ein Etikett. Statt Eingabe werde ich diese Eingabe loswerden. Hier, kann ich sagen, statt hier zu beschriften. Okay, hier drüben wird auf dem Etikett stehen, wie dieses Kästchen funktionieren wird , ich werde Eingaben machen. Okay. Und hier drüben sage ich, dass Typ gleich Checkbox ist. So etwas, okay? Name, sage ich, Checkbox. Ich lasse den Namen und die gleiche Eingabe aktiviert. Okay? Das ist eine geprüfte Eigenschaft, die ich mit Formulardaten verknüpfe. Ich sage Formulardaten mit Punkt und Checkbox. Okay? Das ist erledigt, und bei Veränderung sage ich, den Wandel in den Griff bekommen. Es gibt also eine einzige Funktion, die wir jetzt haben, okay, um alle Änderungen zu handhaben, oder? Und ja, ich werde es schließen. Es ist eine selbstschließende Tag-Eingabe oder Sie können es auch separat schließen lassen. Okay? Also das ist fertig, Etikett, und hier nach der Eingabe hast du wahrscheinlich 1 Sekunde Zeit. Sie können also eine Checkbox haben. So etwas wie das. Und du kannst das Kontrollkästchen hier drüben sehen, oder? Die Checkbox ist also fertig, okay? Das Formular sieht nicht hübsch aus. Mach dir darüber keine Sorgen, denn wir haben noch kein CSS, oder? Also werde ich jetzt einen Kommentar haben. Ich sage Radiobuttons. Okay? Wie arbeiten wir jetzt an Radiobuttons? Okay? Also müssen wir ein Optionsfeld erstellen, oder? Also werde ich das zusammenfügen. Okay? Das ist deine Struktur, und ich werde die Eingabe hier loswerden. Okay. Oder was ich tun kann, ist, mich an diese Eingabe zu halten. Wir werden die Typen ändern. Das ist Radio hier drüben. Okay? Und tippe hier drüben, denn Radio ist Radio. Kopiere dieses Radio. Text ist Radio. Okay? Formulardaten haben Radio gelehrt, Option vier aktiviert. Das wird also nicht da sein. Es wird hier überprüft. Okay? Geben Sie named ein, und ich muss hier auch einen Wert hinzufügen, okay, Wert. Der Wert entspricht, ich sage Option eins. Okay, so etwas. Und ich kann sagen, dass Radio genauso gut ist wie Option eins, okay? Und wenn sich etwas ändert, gibt es Veränderungen. Okay? Und hier kann ich sagen, nach Eingabe nach Bezeichnung. Okay. Also das ist das Label-Tag. Okay. Okay, okay, das ist im Input. Also, wenn ich das speichere, okay, ich sehe Radio hier drüben, aber ich muss noch ein Etikett hinzufügen, das das umhüllt, oder? Also sage ich Etikett. Und ich werde das schließen, dieses Schließen folgt der Eingabe, und wir brauchen ein Etikett mit der Aufschrift Option eins, etwa so. Okay? Also du kannst dir Option eins hier drüben ansehen. Okay? Ich werde das Gleiche komplett duplizieren. In der Tat. Okay. Und ich scrolle hier runter. Nach dem Tag zum Schließen Labels öffnet sich ein weiteres Label, Radio, und das ist Option zwei, und die Radio-Option hier ist zwei dafür, und Text ist zwei. Okay. Also das ist es. Okay? Ich finde, das sieht gut aus hier drüben. Okay? Es gibt kein CSS, also mach dir darüber keine Sorgen. Okay. Aber das sind unsere Radiobuttons. Wir haben ein paar Optionen. Okay? Jetzt ist das erledigt. Wir haben TIF, okay? Und jetzt müssen wir 1 Sekunde machen. Dafür ist DIF hier drüben. Nach diesem DIF füge ich hinzu. Okay. Was müssen wir hinzufügen , um Dropdown hinzuzufügen? Okay. Jetzt zum Dropdown, ich brauche das TIF. Okay, also scrolle ich nach oben. Ich kopiere diesen Texteingabe-Tipp. Komm runter. Okay. Und hier drüben werde ich das zusammenbauen. Okay? Nun zum Dropdown. Was wir tun müssen, ist hier drüben, auswählen. Das ist ausgewählt. Und statt Eingabe. Also müssen wir hier nicht Eingabe sagen, wir müssen hier auswählen, oder? Und ein Label ist da, aber dieses wird ausgewählt sein. Ich kann also sagen, dass wir das nicht brauchen. Das ist sehr eingabespezifisch, oder? Ich werde das einfach los und wir sagen auswählen. Etwas wie das hier. Okay. Und für Select werden wir in Select mehrere Optionen haben. Okay? Also das ist Option eins. Aber für Select müssen wir einige Eigenschaften festlegen. Ich sage also, der Name von Select ist gleich. Was ist der Name? Es ist ausgewählt. Okay. Was ist der Wert hier drüben? Der Wert ergibt sich also aus Daten, die gelehrt wurden, auswählen, in etwa so. Was ändert sich? Was Veränderung angeht, heißt es Veränderung handhaben, oder? Also sage ich, den Wandel hier regeln. Okay. Kommen wir nun zu den Optionen, wir haben hier eine Option. Der Optionswert ist gleich leer. Keine Option. Okay. Und bei der ersten Option geht es darum, eine Option auszuwählen. Okay. Also zeigen wir das zuerst an. Okay, wähle eine Option. Etwas wie das hier. Okay, also du kannst sehen, wähle eine Option, oder? Also, ich muss das replizieren , okay, überall. Also kopiere ich das und gehe am Ende. Du kannst das ein - und zweimal einfügen. In Ordnung. Also das ist erledigt. Okay. Nun, der Wert für den nächsten ist Option eins. Okay. Und hier kannst du Option eins haben. Und der Wert für zwei ist Option zwei. Und hier. Option zwei. Option zwei. In Ordnung. Also das ist erledigt. Sie haben Option eins und Option zwei. In Ordnung, das ist also erledigt. Jetzt brauchen wir nur eine Checkbox oder ich glaube, Checkbox ist schon hinzugefügt, Dropdown, Optionsfeld. Das ist also erledigt. Was wir jetzt tun müssen, ist, dass wir auch alle Daten anzeigen müssen, oder? Also hier, nach dem letzten oder vor dem letzten, wenn ich sagen sollte. Okay, hier, ich füge einen Fernseher hinzu. Okay. Das ist der DF und ich nenne ihn. Ich füge hier einen Klassennamen hinzu. Klassenname wie der von Formulardaten. Okay. Und hier drüben sage ich H drei. Ups, H drei, es sollte H drei sein. Es tut mir leid. Also das ist H drei hier drüben. Okay. Und ich sage Formulardaten, so etwas. Okay. Jetzt zeigen wir die Formulardaten nacheinander an. Okay? Also, wie werden wir das Ganze präsentieren? Zuerst werden wir ein P-Tag haben. Okay? Innerhalb des P-Tags werden wir einen starken Tag haben. Okay, stark. Innerhalb von stark sagen wir Text. Also werden wir alles eins nach dem anderen anzeigen. Also sagen wir Text. Okay. Und hier draußen, stark, sage ich von Theta Ich nehme dieses Ja-Skript. Ich sage Form Theta. Tita hier drüben. Punkttext Okay. Und wenn das nicht da ist, dann sage ich in A in A. Okay. Okay. Also das ist erledigt. So zeigen wir an, wie das Display funktionieren würde. Du kannst sehen. Okay, FM-Datenpunkttext oder N. Wenn Fm-Datenpunkttext also nichts ist, dann wird NA angezeigt. Und wir müssen das für alle tun, also kommen wir her. Wir replizieren das für Radio Radio und wir werden Formdata Dot Radio hier drüben sehen Andernfalls wird das okay sein, also für Radio wird das nicht funktionieren oder das wird funktionieren Es funktioniert nicht für Checkboxen. Okay? Also füge ich hier eine Checkbox hinzu. Okay? Das ist zur Kontrolle. Kiste hier drüben. Bei Checkbox müssen wir also besondere Vorsicht walten lassen. Okay? Denn wenn Formulardaten oder Checkbox wahr sind, dann müssen wir aktiviert und unmarkiert anzeigen, oder? Also sage ich Fragezeichen, sonst falsche Bedingungen. Ich benutze hier die Tonermaschine. Ich sage geprüft und ungeprüft. Etwas wie das hier. In Ordnung. Das Radio ist fertig. Wir haben ausgewählt. Okay, ich werde sehen, wähle so etwas aus. Und hier sehe ich Select. Okay. Das ist erledigt. Okay. Wir zeigen die Daten an, wir haben auch die Ansicht für die Anzeige der Daten. In Ordnung. Nun, was wir tun müssen, ist, die wichtigste Funktion hier drüben zu implementieren, nämlich den Umgang mit der Änderung. Also werde ich hier nach oben scrollen. Okay? Wir holen E her, was das Event ist. Also sage ich const und ich sage, der Name hat einen Wert, wir haben den Typ und wir haben hier nachgesehen. Okay, das ist es, was wir erstellen und ich sage hier E Dot Target. Okay. Also, hier drüben, was wir tun müssen , ist, nachdem wir das erstellt haben, müssen wir das Formular einrichten. Okay? Also sage ich, Formulardaten festlegen. Also, was ich hier gemacht habe , ist in Zeile Nummer eins, ich habe das E-Punkt-Ziel hier drüben neu strukturiert. Ich habe es in einzelne Elemente strukturiert, und ich sage, Punktformdaten setzen. Okay. Ich werde dieses neue Objekt hier drüben herstellen, okay? Ich sage dreimal, formiere Daten, also nutze ich das, was ich hier destrukturiere. Okay. Hm Daten, Komma und für den Namen, was ich tun würde, ist, wenn der Namenstyp dem Kontrollkästchen entspricht, oder? Also müssen wir den überprüften Wert haben, oder? Also sage ich überprüfter Doppelpunktwert. So wie das hier. Okay? Das ist erledigt, und ja, das ist auch getan. Wenn ich das speichere, lassen Sie uns sehen, was das Ergebnis ist. Sie können also sehen, dass das Ding aktualisiert wird, Checkbox angekreuzt und angekreuzt. Option eins, Option zwei, und Sie können sehen, dass Option eins, Option zwei widergespiegelt wird. Es funktioniert also absolut gut, oder? Wir können On-Handle-Änderung verwenden , um die Formulardaten zu aktualisieren. Okay? Also strukturieren wir die Formulardaten hier neu, was auch immer Formulardaten sind, welche Formulardaten auch immer hier existieren. Okay? Und dann aktualisieren wir die Werte. Die Anwendung funktioniert also einwandfrei. Was wir tun würden, ist, es einfach ein bisschen zu verschönern. Ordnung. Also ein bisschen Verschönerung ist wichtig Okay, damit es ein bisschen vorzeigbarer aussieht. Also fange ich damit an, mit etwas CSS hier drüben für den Formularcontainer, okay, ich werde hier eine maximale Breite von 400 Pixeln haben Okay. Ich habe hier einen Spielraum , den ich auf 50 Pixel und Auto setzen werde. Ich gebe diese beiden Dinge weiter. Okay. Ich nehme Polster hier drüben. Padding, lass uns auf 20 Pixel einstellen. Okay? Grenzradius. Okay. Den Grenzradius setze ich auf acht Pixel. Wahrscheinlich. Lass uns sehen. Okay. Und ich werde die Hintergrundfarbe sehen. Okay. Macrons Farbe kann, sagen wir, weiß sein , so etwas Okay, sicher. Abded war sich sicher. In Ordnung. Du kannst wählen, wie du willst. Okay. Ich setze Box Shadow hier drüben auf Null, Null, zehn Pixel Rch PA, und ich setze den Wert hier drüben auf Null, Null, Okay, Null, Null Eins. Also darauf stelle ich es ein. In Ordnung. Und ja, das ist es. Ich schätze, Font Family Weekend, okay? Wenn du eine Schriftfamilie brauchst, dann sage ich hier sensif. In Ordnung. Dieser Formularcontainer, die Etiketten H zwei und H drei, werden hier eine textile Mittellinie haben eine textile Mittellinie und die Farbe wird der von Grau entsprechen. Okay, wahrscheinlich so etwas. Okay, oder dunkle Farbe. A. Abhängig von Ihrer Wahl, okay, oder Sie können es hier einfach auf Schwarz setzen. Okay. Das ist auch gut. Okay, h2h3. Okay, jetzt ist das erledigt Ich nehme ein Formularfeld. Also alle Formularfelder. Okay. Wie machen wir das? Also werden wir hier drüben die Marge unten haben. Ich setze den unteren Rand auf 20 Pixel. Okay, speichern Sie es. Und ja, das ist es. Lassen Sie mich bei Bedarf später darauf zurückkommen. Etikett. Also ich sage hier „Anzeige des Schlosses“ für Beschriftungen. Okay, du kannst sehen, Änderung in der Benutzeroberfläche. Ich sage Schriftgröße. Die Schriftgröße beträgt 14 Pixel. Okay. Ich werde hier drüben Gewicht haben. Das Gewicht des Pulses hier drüben, okay? Und dann sage ich, Marge unten. Marge unten von fünf hier drüben. Okay. Und Farbe. Lassen Sie uns Farbe als Hashwert drei, drei beibehalten. Okay. Ja, wir sind fertig Für Label sage ich Eingabe, und ich muss hier als Text eingeben Okay. Typ ist also gleich Text. Okay? Etwas wie das hier. Okay. Was den Text angeht, werde ich sagen, Breite von 100%. Okay, das ist es, das Erste. Jetzt habe ich hier eine Polsterung von zehn Pixeln. Okay. Ich werde Select auch zum CSS hinzufügen. Wählen Sie aus. Okay. Und dann sage ich Grenze. Ups. Es wird also ein Semikolon-Rand sein Nun zum Rand sage ich ein Pixel, fest, Hastac CCC. Okay? Es ist ein weißer grauer Farbcode, okay, Radius. Vier Pixel hier drüben. Okay. Und eine Schriftgröße von 16 Pixeln. So wie es ist. Okay? Das sieht okay aus. Ordnung. Wenn du dir die App ansiehst, sieht sie okay aus. Nicht schlecht. Okay. Lassen Sie uns weiter daran arbeiten. Also habe ich diese Eingabe für ich habe das CSS für Text. Lassen Sie uns auch etwas CSS für die Checkbox hinzufügen. Also sage ich Checkbox. Okay. Und ich sage Margin Right. Okay. Rand rechts. Fügen wir zehn Pixel hinzu. Lass uns sehen. Okay. Und für Radio werde ich auch etwas für Radio hinzufügen. Für Radio füge ich hier einfach einen Rand von fünf Pixeln hinzu. Okay, ein bisschen Ausrichtung hier drüben. Okay. Und jetzt richten wir die Formulardaten aus, also sage ich Formulardaten. Formulardaten gehören der Klasse D für die Daten an, die unten angezeigt werden. Okay, also sage ich Margin Bottom. Rand oben, ich fange mit 30 Pixeln an. Da haben wir etwas Platz. Wir haben etwas Platz und Polster. Ups, eine Polsterung von sagen wir zehn Pixeln hier drüben. Okay. Ich füge eine farbige Hintergrundfarbe hinzu. Okay, Hintergrundfarbe ist wir können die Hintergrundfarbe als etwas behalten. Ich habe tatsächlich einen Farbcode, okay? Es ist E neun, f7f9, so etwas in der Art. Es ist quasi eine weiße Farbe. Man kann das sehen und die äußere Farbe ist in diesem Sinne nicht gut. Also werde ich diese Farbe nehmen und wahrscheinlich CCC oder wenn ich hier oben nach oben scrolle Das ist ein Ufer. Das ist nicht gut. Also kann ich das auf F neun von neun ändern. Okay. Also vielleicht sieht das okay aus, okay? Also das ist grau und das ist bläulich Okay. Also ja, das ist das Styling , das ich jetzt verwende. Und Hintergrundfarbe, ich habe auch einen Rand. Rand eines Pixels, durchgehend. Okay. Und Hash, ich habe den Farbcode A drei, D zwei, D sechs. Sie können den Farbcode verwenden oder etwas Ähnliches wählen, je nach Ihren Vorlieben Es ist ein blaues Farbschema, das ich verwende. Okay, SN-Blau. Ich füge einen Grenzradius von vier Pixeln und zehn hinzu. Okay. Ich sage Formulardaten, P-Tags. Okay. Was machen wir mit der P-Steuer? Ich sage Schriftgröße von 16 Pixeln. Okay? Lass uns die Farbe sehen, ich sage Hash 555. Das ist erledigt? Okay. Stark. Also, wenn du stark sagst, okay, sage ich Farbe 333. Okay. Ich finde, das sieht anständig aus. Okay? Lassen Sie uns etwas hinzufügen, denn ich denke, das ist erledigt. Okay? Sonst wird nichts benötigt. Ich denke schon. Jep Ich finde, das sieht anständig aus. Okay? Die Anwendung funktioniert also einwandfrei, Sie sehen können. In Ordnung. Und CSS sieht auch anständig aus. Wenn du dich weiter verbessern, mehr improvisieren willst , kannst du das auf jeden Fall tun Okay. Aber ja, das ist sehr vorzeigbar Und was auch immer Sie eingeben, Sie können sehen, wie es aktualisiert wird Okay? Also ja, so können wir die Formulardaten verwalten. Wir verwenden hier einen Zustand, okay , der ein Objekt mit allen Attributen hat. Jetzt werden diesem Formular mehr Felder hinzugefügt, wurden mehr Attribute hinzugefügt, und Sie können sie auf die gleiche Weise verwalten. Ordnung. Ich hoffe, das war auch nützlich, aufschlussreich und hilfreich Oh 9. PROJEKT: Einen benutzerdefinierten Farbauswahl-Tool mit React erstellen: Hallo, da. Jetzt ist es an der Zeit, dass wir mit dem Aufbau eines Projekts beginnen, bei dem es sich um eine Anwendung zur Farbaufnahme handelt, die React Has verwendet. Nun, das wird uns helfen, viele React-Konzepte zu stärken und viel zu üben, okay? Das könnte auch ein großartiges Portfolio-Projekt sein , das man in Interviews und Lebensläufen vorstellen kann, oder? Das ist die Anwendung. Hier siehst du ein paar Farbkacheln, die du auswählen kannst. Und sobald Sie eine der Farbkacheln auswählen , werden Sie den Farbschalter auf diese Weise sehen, oder? Und außerdem , wenn du eine andere Farbe hinzufügen möchtest, kannst du hier drüben auswählen und du kannst die Farbe ändern lassen, oder? Das ist also völlig dynamisch, wie Sie sehen können. So oder in dem Moment, in dem ich den Slider ziehe, wirst du sehen, dass sich alles ändert, oder? Es ist also sehr dynamisch, okay. Auf diese Weise können Sie sehen, es ist sehr dynamisch, oder? Also das ist der Farbwähler , den wir fellen werden, okay Und das wird uns helfen, viele React-Konzepte zu üben, oder also ohne weiteres Lassen Sie uns also ohne weiteres direkt in den Editor springen und loslegen. Ordnung. Also hier sind wir im Codierungseditor, und hier habe ich zunächst ein grundlegendes React-Tap-Setup mit App Dot GSX, das Markup zurückgibt, das Sie sehen, und hier sehen Sie die Ausgabe, nämlich den Farbwähler Im Moment gibt es also buchstäblich nichts in dem Projekt. Wir geben H einfach ein Tag zurück , das die Ausgabe als Farbauswahl-Header ausgibt, oder? Jetzt müssen wir mit der Erstellung der Anwendung beginnen. Also werden wir mit diesen Staaten beginnen. In Ordnung. Und ganz oben unterstelle ich schon Stage Hook. In Ordnung. Also, was ich tun muss, ist, einen Staat zu erstellen, und die Sache, die ich im Auge behalten muss, ist natürlich, dass du es schon erraten hast, es ist die Hintergrundfarbe, oder? Denn damit spielen wir in dieser Anwendung herum, richtig Okay? Also Hintergrundfarbe hier drüben. Und ich werde sagen, Hintergrundfarbe festlegen, okay? Also Hintergrundfarbe, so etwas. Okay. Und ja, das ist erledigt. Und dann muss ich es hier benutzt haben. Also sage ich „Status verwenden“ und ich lasse eine Standardfarbe initialisieren Die Standardfarbe kann also weiß sein, okay? Und dann kann ich speichern. Okay? Also das ist erledigt. Wir haben den Staat festgelegt. Am Ende füge ich ein Semikolon hinzu. Okay. Jetzt muss ich hier ein Interface hinzufügen, damit die Kacheln grundsätzlich farbig dargestellt werden, richtig? Und das wären im Grunde die Kacheln, auf die der Benutzer klicken und die Hintergrundfarbe ändern kann auf die der Benutzer klicken und die Hintergrundfarbe , oder? Also werde ich hier ein Array hinzufügen . Ich kann hier Farben sehen, und es kann gerade ein leeres Array sein. Okay. Ich werde in Kürze hier ein paar Farben hinzufügen. Okay. Aber wir müssen das Array auch rendern, oder? Also, welche Farben wir auch sehen, wir müssen sie rendern und wir haben ein Array. Okay? Also was ich tun werde, ist Etev hier drüben hinzuzufügen Ich werde diesem Diff einen Klassennamen hinzufügen , damit ich später CSS hinzufügen kann, und ich nenne das als Farbpalette, ungefähr so Okay. Also hier, ich sage Farben auf der Karte. Ich werde hier Map verwenden, Map Method, und ich werde Color, MA Index sagen. Okay? Diese beiden Dinge werden wir nutzen. Okay? Benutze die Pfeilfunktionen und hier sind wir. Okay. Darin würde also alles, was Sie hinzufügen, für jedes Element im Array implementiert werden . Okay? Und was wir mit jedem Element im Array machen wollen, wir wollen es anzeigen, richtig? Also werde ich hier einen TeV hinzufügen. Ups. Also füge ich ein TeV hinzu, ungefähr so Und warum hat es sich nicht von selbst geschlossen? Okay. Also werde ich es manuell schließen. Ordnung. Also hier sind wir hier, wir haben Fernsehen, okay? Und ich füge einen Schlüssel hinzu, etwa so. Okay. 1 Sekunde. Also sage ich, Schlüssel ist gleich und ich sage Index. Okay. Und Klassenname. Und ich sage Box. Ich füge einfach unser CSS hier hinzu. Entschuldigung, Klassenname hier drüben , damit ich später CSS hinzufügen kann. Okay? Und das kann ich bei Klick hier sagen. Also beim Klicken muss ich natürlich, also beim Klicken gab es eine Interaktion, oder? Und ich muss eine Interaktion hinzufügen. Die Interaktion besteht darin, dass die Hintergrundfarbe beim Klicken ändert, oder? Und dafür brauche ich eine Funktion, die wir momentan nicht haben, was absolut okay ist. Also lasse ich das einfach leer. Stimmt? Jetzt ist das erledigt. Okay? Wir haben diesen Tag. Wir haben das hier drüben. Okay? Und was ich tun muss, ist, dass ich hier nach oben scrolle. Wir können hier im Array einige Farben hinzufügen. Okay? Nun, welche Farben sollten wir hinzufügen? Okay, ich habe einige Farbcodes, also werde ich sie manuell eingeben. Okay? Also kann ich FF, Null, Null, Null, Null sagen , okay? Lass mich das speichern und wir sehen hier keine Veränderung. Okay. Okay, wir sehen keine Änderung, weil wir es tatsächlich tun, ich rendere nur das Tippen hier drüben, Namen der Schlüsselfarbe, und ich zeige nur den Klick hier drüben an. Ich sehe also nichts, weil, okay, es gibt nichts in der Entwicklung, aber was ich hier machen werde, ist, da der Klassenname dafür hier Farbfeld ist, füge ich hier einfach eine Breite von 50 hinzu, sagen wir, okay? Und ich füge hier eine Höhe von 50 Pixeln hinzu. Ich werde das hier speichern. Okay. Also sehen wir die Ausgabe noch nicht. Was wir tun müssen, ist, dass ich hierher scrolle und es mir ansehen lasse. Okay, es gibt also einen Fehler, den ich gemacht habe. Das sollte hier nicht lockig sein. Okay? Das sollte Italien sein, runde Klammer. Okay. Und ich nehme einfach diese runde Klammer und ersetze sie durch diese lockige Paese Okay. Also die ganze Sache, die Div-Sache sollte hier in einer runden Klammer stehen. Und wenn ich das speichere, sehe ich noch nichts, aber es wurde ein Div hinzugefügt, okay? Wir müssen diesem Div nur eine Hintergrundfarbe hinzufügen. Also sage ich Stil, okay. Also Stil der Hintergrundfarbe. Hier, so etwas, Colin Color. Okay. So wie es ist. Jetzt werden Sie sehen, wie das DIF hier gezeigt wird. Okay? Also was passiert ist, ich sage es dir, das ist die Farbe. Das ist der Farbcode für Rot. Okay? Wenn du das googelst, weißt du, was dieser Farbcode ist. Und was ich mache, ist, dass ich diese Farbe nehme. Oder alle Elemente im Array, ich iteriere es durch, okay, mit dieser Farbpunktkarte Okay? Und ich akzeptiere diese beiden Parameter in dieser Pfeilfunktion, Farbe und Index, richtig? Jetzt erhalte ich für jedes Element im Array die Farbe und den Index. Okay? Ich meine, rendern einen TiVo, dessen Schlüssel Index ist. Das mache ich zur Optimierung, zum Beispiel zum besseren Rendern von React. Ich habe einen Klassennamen, und mit diesem Klassennamen setze ich die Breite und Höhe auf 50 Pixel, sodass sie sichtbar sind, weil das DIV buchstäblich nichts enthält, und dann setze ich den Stil hier auf den Farbwert, den wir hier haben. Das ist also, was eingestellt wird. Und dann habe ich einen On-Click-Event-Listener , den ich noch nicht bearbeitet habe, okay? Du kannst sagen, ich habe dafür keine Funktion definiert, okay? Also habe ich das gemacht, okay, und das ist es. Also, ich nehme mir ein paar Farbcodes, die ich habe, und füge sie hier ein. Also füge ich es hier ein und Sie können sehen, dass es eine lange Reihe ist. Okay? Sie können Ihre eigenen Farbcodes hinzufügen oder auf diesen verweisen. Wenn du also hier googelst, Farbcode, und nach diesem suchen kannst, wirst du sehen, dass das der Farbcode ist, okay? Und du kannst auf diese Website gehen, zum Beispiel colorhx.com, und du kannst dir jede Art von Farbcode holen, okay Also Farbnamen. Also hier kannst du den absoluten Nullpunkt sehen. Sie haben die Liste aller Farben zusammen mit ihren Farbcodes. Sie können also diejenigen auswählen, die Sie anzeigen möchten, oder Sie können meine nehmen. Okay? Das ist absolut in Ordnung. Okay. Aber ich zeige Ihnen nur , wie Sie auch Ihre eigenen Farbcodes bekommen können. Okay? Also habe ich das hinzugefügt und ich werde es speichern. Also sobald ich es speichere, wirst du sehen, dass alle Farbcodes drüber angezeigt werden. Ab jetzt siehst du also nur diese Buttons. Okay? Es gibt kein Styling. Es passiert nichts, wenn du darauf klickst , oder? Es ist einfach da. Okay. Was ich jetzt tun werde, ist eine Funktion zu schreiben, die den Klick verarbeitet. Also sage ich const, ich sage handle color change Jetzt nenne ich das nicht ohne Grund Farbwechsel. Warum? Denn beim Klicken auf dieses DIV sollte sich die Farbe für die gesamte Seite ändern, oder? Deshalb sage ich das. Ich sage hier Farbe. Okay. Und was ich hier tun werde, ist, ich würde sagen, Hintergrundfarbe einstellen. Okay, und ich gebe Farbe weiter, so etwas. Okay. Und das leihe ich mir aus. Okay. Und was ich jetzt tun werde ist, dass ich herkomme. Und was wir tun müssen, ist hier, statt einen leeren Pfeil hier drüben zu haben, sage ich, den Farbwechsel vornehmen, und ich gebe die Farbe weiter . Okay? Die Funktion ändert also tatsächlich die Hintergrundfarbe oder die Farbe , die Sie hier eingeben. Das mache ich. Wenn ich jetzt Blau auswähle. Okay, es funktioniert also nicht. Lass mich sehen, was das Problem ist. Okay, auf einen Klick, ich sage alles richtig. Okay, kümmere dich um den Farbwechsel. Ich gebe die Farbe auch weiter. Okay, ich schließe im Div. Okay, ich habe das Problem hier verstanden. Hier aktualisieren wir gerade den Status, oder? Diese Funktion haben wir aufgerufen, um den Status hier zu aktualisieren. Hintergrundfarbe hat also den aktualisierten Wert Farbe, oder? Was Sie nun tun müssen, ist, dass Sie es noch nicht in den Hintergrund der TIF-Datei oder der Seite stellen. Also, was du hier tun musst, ist dass wir herkommen, okay? DV-Klassenname, Farbpalette. Okay, nicht dieser, wir fügen ihn dem übergeordneten Div hier Okay? Also hier, was ich tun werde, ist, in der Root-DV Stil zu sagen, okay? Und was ist der Stil? Stil ist Hintergrundfarbe. Okay. Also hier haben wir die Hintergrundfarbe. Lassen Sie uns sehen, wie das funktioniert. Sie können also sehen, dass sich die Hintergrundfarbe jetzt ändert, oder? Du kannst sehen. Also ja, das ist es. Okay. Die Funktionalität funktioniert einwandfrei. Okay. Und was ich hier tun werde, ist, dass ich auch einen Klassennamen hinzufüge, damit ich ihn später verwenden kann. Ordnung. Ich sage App. Wir werden diese Klasse in CSS verwenden. Okay. Aber vorerst hoffe ich, dass Sie sich darüber im Klaren sind, wie der Farbwechsel funktioniert. Okay? Das ist erledigt. Nun, was müssen wir als Nächstes tun? Was machen wir als Nächstes? Als Nächstes benötigen wir auch einen benutzerdefinierten Farbwähler Wenn ein Benutzer also eine andere Farbe als die hier verfügbaren auswählen möchte andere Farbe , würde ich einen benutzerdefinierten Farbwähler hinzufügen, also sage ich Und hier drüben sage ich Klassenname. Okay, du fügst einen Klassennamen hinzu. Der Klassenname kann ein benutzerdefinierter Farbwähler sein. Etwas wie das. Okay. Jetzt hier drüben wirst du Input haben. Okay. Wir werden hier Anregungen entgegennehmen. Also sage ich Typ. Geben Sie als Farbe ein. In Ordnung. Und dann hier, Wert. Also, was ist der Wert? Der Wert kann eine Hintergrundfarbe sein. Okay? Nun, die Hintergrundfarbe ist ein Zustand. Denken Sie daran, dass wir den Status der Hintergrundfarbe beibehalten und ihn anhand dieser Tipps auch beim Klicken aktualisieren. Okay? Also weisen wir diesem Farbwähler den Wert zu, der in der Hintergrundfarbe steht Okay? Und was wir tun müssen, ist Veränderung. Okay, wir brauchen eine Veranstaltung. Wenn sich hier irgendwas ändert, akzeptiere ich E, o und ich sage Farbwechsel übernehmen, und ich übergebe den E-Punkt-Zielpunktwert. Etwas wie das hier. Okay. Das ist erledigt, ich speichere das und wir werden hier eine Farbauswahl sehen. Sie können sehen, dass es nicht schön gestylt ist. Mach dir darüber keine Sorgen, aber du kannst die Dynamik hier sehen. Das ist React, oder? Also benutzen wir hier den Staat, das Konzept des Staates, um ein dynamisches Gefühl in unseren Hintergrund zu bringen , okay? Und Sie können sehen, wie das funktioniert. Okay, es sieht gerade nicht schön aus, ich sage es dir. Also, wenn du hier rübergehst, das ist eine ganzseitige Anwendung, sie sieht nicht schön aus. Richtig, es ist natürlich nicht schön, weil es buchstäblich kein CSS gibt, oder? Also müssen wir CSS hinzufügen, um es ein wenig zu verschönern. Aber ja, ich hoffe, ihr habt ein Gefühl dafür, was passiert. In Ordnung. Nun werden wir etwas CSS hinzufügen, okay? Also fange ich in der CSS-Datei an. Stellen Sie einfach sicher, dass die CSS-Datei hier verlinkt ist und dass sie hier importiert wird. Importieren Sie das Punktstrich-App-Punkt-CSS. Und stellen Sie sicher, dass sich diese Datei im selben Ordner befindet. Wenn sie sich nicht im selben Ordner befindet, stellen Sie sicher, dass Sie den richtigen Pfad haben. Okay? Es ist im selben Ordner, also bezeichne ich es als Punkt Forward Slash App Dot CSS Okay? Also hier, was wir tun müssen, ist die Punkt-App Okay zu sehen. Und ich sage Schriftfamilie. Und so. Und ich werde all das sagen. Okay? Und am Ende gab es ein Semikolon Ich kann Textine sagen, oder? Und ich sage Zentrum Lass mich sehen, ob das ist. Okay? Also Veränderungen die ich sehen konnte, ein paar gute Veränderungen. Ordnung. Und jetzt kann ich die Polsterung sehen Okay? Polsterung, wir können 50 Pixel hinzufügen Oder lassen Sie mich eine Polsterung von Null Pixeln vermeiden. Okay, lass uns sehen, was passiert. Ich sage eine Mindesthöhe von 100. Okay. Und dann sage ich Farbe. Okay, also Farbe, lassen Sie uns hinzufügen. Ich habe einen Farbcode mit F 0f0f0, ungefähr so. Es sieht so aus, als ob Sie eine weiße Farbe oder einen hellen Text für den Dunkelmodus sagen können. In Ordnung. Also das ist erledigt. Wir werden das CSS für die App so beibehalten. Ich lasse H gehen. Okay? Und ich sage Farbe. Okay. Also Farbe, ich behalte die gleiche. Okay. Das sieht cool aus. Ich denke, uns geht es allen gut. Okay? Fügen wir nun das CSS für die Farbpalette hinzu. Ich sage Farbpalette, so etwas. Und hier sage ich Display Flex. Ich werde ein Flex-Display hinzufügen. Sie können sehen, wie es horizontal wurde. Okay? In dem Moment, als wir diese Immobilie hinzugefügt haben. Ich sage, begründen Sie den Inhalt in der Mitte. Spar dir das. Okay. Und ich sage Abstand von zehn, zehn Pixeln. Jedes Element wird also Abstand von zehn Pixeln Ich habe diese Änderung nicht gespeichert. Aber hier, wenn du siehst, gibt es keinen Abstand dazwischen, oder? Es funktioniert gut, aber es gibt keinen Abstand dazwischen. Also möchte ich etwas Platz hinzufügen. Also habe ich dieser Lücke zehn Pixel hinzugefügt. Die Datei ist noch nicht gespeichert. Sobald ich speichere, wirst du sehen, wie sich das geändert hat, oder? Und wenn du hier drüben hinschaust, kannst du zehn Pixel sehen, oder? Das funktioniert gut. Okay. Also hier Abstand von zehn Pixeln, und jetzt sage ich hier Rand, Rand von oben. Sag Null Pixel. Okay, zehn Pixel. Tut mir leid. Nicht Null. Das ist okay. Alles klar. Und Farbbox, wir haben 50 Pixel, 50 Pixel. Ich sage Cursorzeiger. Coso behält zwei Zeiger, und ich sage Grenze Okay, Rahmen zwei Pixel, durchgehend, und ich sage Hash FF Okay. Also das ist es und lassen Sie uns sehen, ob das so ist. Okay. Also, wir haben eine Flasche und wir haben diesen Schwebeeffekt , der gut aussieht, würde ich sagen Ordnung. Jetzt müssen wir auch die Farb-Pika-Eingabe stylen Das sieht nicht so gut aus, oder? Also sage ich tot und ich sage benutzerdefinierte Farbe Pica. Okay. Nochmals, ist das ein Kurs, den wir haben? Lass mich nach unten scrollen. Okay, ja. An diesen Kurs erinnere ich mich. Das ist ein benutzerdefinierter Farbwähler. Und darin haben wir Input, oder? Also sage ich hier Custom Color Picker. Okay. Und dazu müssen wir, sagen wir, Marge hinzufügen. Im Moment gibt es also buchstäblich keinen Rand zwischen diesen Schaltflächen und dem Farbwähler Also sage ich, fügen wir einen Rand von 20 Pixeln wie diesen hinzu. Okay, jetzt gibt es eine Lücke. Jetzt kann ich das kopieren. Hier fügen wir auch das CSS für die Eingabe hinzu. Okay? Also werde ich dafür sagen, werd das los. Wir brauchen keinen oberen Rand, also sage ich Cursorzeiger. Okay, das ist erledigt. Ich sage Grenze als keine. Okay. Wir brauchen keine Flaschen, also siehst du, das sieht cool aus. Polsterung, nicht so cool, wir müssen etwas Polsterung mit zehn Pixeln hinzufügen, okay? Und wir fügen Radius oder Radius hinzu . Fügen wir einen Poder-Radius von fünf Pixeln hinzu. Okay. Und wir können hier Farbe hinzufügen. Links. Okay? Das ist erledigt. Ich denke, das ist es, und wir müssen den Hover-Effekt hinzufügen. Also sage ich benutzerdefinierte Farbauswahl, Eingabe, Doppelpunkt-Hover. Okay? Also, was ist der Hover, ich sage Hintergrundfarbe 55. Also so Okay? So weit, so gut. Okay. Also, wenn du herkommst, das ist eine ganzseitige Anwendung, du wirst sehen, wie sie die Farbe anzeigt und hier kannst du das auch ändern, oder? Nun, falls aus irgendeinem Grund, wenn Ihnen dieser weiße Fleck neben dem gesamten Div, auf dem Sie das Bild rendern, nicht gefällt dieser weiße Fleck neben dem gesamten Div, auf dem Sie das Bild rendern, nicht gefällt Das Ganze wird im Ala Pico gerendert und da ist dieser Diesen weißen Fleck haben wir nicht hinzugefügt. Was Sie tun können, ist hier, wenn Sie die Standardstile zurücksetzen möchten Sie können hier einen Stern hinzufügen. Sie können Margin, Margin Null sagen und ich sage Padding Null Okay, lassen Sie uns das speichern und sehen. Okay, du kannst sehen, dass es weg ist, oder? Also ja, das funktioniert absolut einwandfrei. Wenn Sie möchten, können Sie hier oben über dem Farbwähler eine Art Kappe hinzufügen hier oben über dem Farbwähler eine Art Kappe Sie können also hier und hier zur Codebasis kommen, wenn Sie sehen, dass wir diese App hier haben, oder? Also diese App, was Sie tun können, ist innerhalb dieser App, wir haben C-Picker Wenn Sie also mit einer App kommen, können Sie hier einen Abstand von 40 Pixeln wie diesen hinzufügen Und wenn Sie die Datei speichern, haben Sie oben eine ordentliche Polsterung, mit der Sie herumspielen können Okay? Also das sieht anständig und ziemlich gut aus. Du kannst hier so mit dem Colopicker herumspielen. Okay, du kannst sehen, wie es die Farbe verändert, oder? Also ja, hier geht es um den Farbwähler, und dieser Farbwähler hat uns geholfen , das Konzept von Zuständen zu stärken und wie Zustände bei Reaktionskomponenten eine wichtige Rolle spielen können Und Sie können sehen, wie es die Hintergrundfarbe im Wesentlichen verändert Es ändert das UY, ohne dass Sie die Seite aktualisieren. Das ist wirklich, wirklich gut, und das ist der Grund, warum ich React liebe. Alles klar? Ich hoffe, du konntest mir folgen, und ich hoffe, das war nützlich. 10. Erste Schritte mit useEffect: Hallo, da. Jetzt ist es an der Zeit, dass wir über den Use-Effect-Hook in React sprechen. Nun, was ist Use Effect Hook? Okay? Also hier habe ich ein neues React-Projekt mit kommentiertem Code , der uns helfen wird, dieses Konzept zu verstehen, und dann werden wir auch das Praktische tun , um es noch besser zu verstehen . Einfach ausgedrückt: Mit Effect Hook in React können Sie Code automatisch ausführen , wenn sich etwas ändert oder wenn eine Komponente geladen wird. Okay? Also, wenn ich sage, dass Komponenten geladen werden, heißt das, dass die Komponente zum ersten Mal gerendert wird oder dass sie montiert wird, okay? Es gibt also vielleicht verschiedene Dinge, die Sie tun oder ausführen möchten, oder Sie möchten vielleicht etwas tun, wenn sich etwas in der Anwendung ändert oder wenn eine Komponente geladen wird, okay Es ist also so, als würde man eine Aufgabe so einstellen, dass sie nach den Bildschirmaktualisierungen ausgeführt wird oder wenn eine bestimmte Art von Daten bereit ist, okay? Wenn Sie nun online nach Use-Effekt suchen, finden Sie eine gängige Definition, dass Sie mit Use Effect Hook in React Nebenwirkungen in Funktionskomponenten ausführen können . Okay? Sie werden diesen Begriff Nebenwirkungen sehen. Das bedeutet, dass es ausgeführt wird , nachdem die Komponente gerendert wurde, und es kann für Aufgaben wie das Abrufen von Daten, das Aktualisieren der Kuppel oder das Einrichten von Abonnements jeder Art verwendet werden das Aktualisieren der Kuppel oder das Einrichten , wenn Sie möchten Okay? Nun, diese Aufgaben, die wichtig sind, aber sie haben nicht direkt mit dem Rendern zu tun, okay? Sie sind als Nebenwirkungen bekannt, okay? Und das ist es auch, wovon ich hier spreche. Mit Effect Hook in React können Sie Code automatisch ausführen , wenn sich etwas ändert oder wenn eine Komponente geladen wird. Okay? Jetzt, nachdem die Komponente geladen wurde, möchten Sie vielleicht Daten von der API abrufen , oder? Oder vielleicht möchten Sie die Daten von der API abrufen , wenn sich etwas in der Anwendung ändert, Zum Beispiel wird ein Status aktualisiert, oder? Vielleicht möchten Sie also die neuen Daten vom Server abrufen. In diesem Fall können Sie also den Use Effect Hook verwenden. Und dieses Abrufen von Daten wird auch als Nebeneffekt bezeichnet, oder? Es ist also im Grunde eine Aufgabe, die Sie nach Ihrer Hauptaufgabe erledigen müssen , oder? Das ist also der Nutzen von Effect Hook Hook , um es wirklich einfach auszudrücken. Okay. Und hier ist eine Syntax. Okay? Das ist die Syntax, wie Sie sehen können. Also habe ich Use Effect, okay? Und innerhalb dieser Klammern, okay? Also 1 Sekunde. Ich schneide das einfach hier drüben ab. Ich nutze Use Effect auf diese Weise. Ich muss das immer oben importieren, wenn ich es verwende, und wenn ich es hier einfüge, habe ich diese Funktion drin. Das ist also eine Funktion, die Sie sehen können, der ausgewählte Teil. Und das besteht im Grunde aus dem Code, den Sie als Nebeneffekt ausführen möchten, oder der Aktion, die Sie ausführen möchten. Dieser Code wird als Pfeilfunktion übergeben, Dieser Code wird als Pfeilfunktion übergeben wie Sie hier sehen können. Okay. Nun, dieser Code kann so etwas wie ein EPA-Anruf sein, wie ich schon sagte, oder die Aktualisierung eines Abonnements oder irgendetwas , das Sie tun möchten, oder? Und hier drüben haben Sie eine Reihe von Abhängigkeiten. Okay? Also, das bedeutet, das ist die Abhängigkeit, okay? Das heißt, das wird im Grunde beobachtet, okay? Und wann immer sich diese Abhängigkeit ändert, wird dieser Code ausgeführt. So funktioniert es, oder? Wenn Sie hier also die Definition sehen, können Sie mit Use Effect Hook in React den Summencode automatisch ausführen Das ist dieser Code, es ist dieser Code, den Sie hier erwähnt haben, oder? Das ist also der Summencode, dem Sie automatisch ausführen können wenn sich etwas ändert oder wenn eine Komponente geladen wird. Okay? Wenn sich etwas ändert, was ist das dann hier? Das ist also die Abhängigkeit , von der wir sprechen. Okay? Wenn sich diese Abhängigkeit ändert Sie eine Abhängigkeit angegeben haben , ist dies natürlich optional. Wenn Sie eine Abhängigkeit angegeben haben, wird dieser Code immer dann ausgeführt wenn sich die Abhängigkeit ändert. Und hier können Sie sehen, dass es sich verschiedene Varianten des Use-Effect-Hooks handelt , in denen er verwendet werden kann. Das ist der erste. Okay. Nun, hier drüben gibt es kein Abhängigkeits-Array. Sie können sehen, dass es kein Abhängigkeitsarray gibt. Wenn ich spezifizieren möchte, kann ich das Abhängigkeitsarray so angeben, aber hier gibt es kein Abhängigkeitsarray. Also ohne das Abhängigkeitsarray oder ohne Angabe einer Abhängigkeit würde das bei jedem Rendern laufen. Wann immer also irgendeine Art von Rendering durchgeführt wird, wird dieser Code, den Sie in dieser Pfeilfunktion angeben , ausgeführt. Okay. Und das ist eine weitere Variante, bei der Sie ein Abhängigkeits-Array haben. Okay? Sie können hier kommagetrennte Werte angeben. Entschuldigung, das ist nicht das mit dem Abhängigkeits-Array. Dies ist der mit dem leeren Abhängigkeitsarray. Okay. Also habe ich den dritten mit der hinzugefügten Abhängigkeit. Okay. Was passiert, wenn Sie ein leeres Abhängigkeitsarray haben? Es läuft also erst nach dem ersten Rendern. Wenn die Komponente also wird oder zum ersten Mal gerendert wird, ist dies das einzige Mal, dass dies ausgeführt Okay. Und das ist eine dritte Variante, die wir hier haben, bei der wir gezählt haben. Okay? Nun, count ist die Abhängigkeit , auf deren Grundlage dieser Code ausgeführt wird. Also, wenn es hier bei der Zählung irgendein Update gibt, okay, das würde ausgeführt werden, oder? Das bedeutet es, okay? Und es läuft auch beim ersten Rendern, und wenn sich die Anzahl ändert, bedeutet das genau das. Okay? Also ich hoffe, das ist vom theoretischen Standpunkt aus ziemlich klar, richtig, um es einfach auszudrücken, benutze Effekt Hk. Okay, das ist die einfachste Definition, die ich mit Effect Hook und React hätte verwenden können. Sie ermöglicht es Ihnen, Code automatisch auszuführen, wenn sich etwas ändert oder wenn eine Komponente geladen Alles klar? Also das ist Use Effect Hook für dich. Bevor ich Use Effect Hook verwende, werde ich hier nach unten scrollen, und hier drüben, lassen Sie uns zuerst ein Beispiel ohne Use Effect Hook haben . Okay? Also hier in dieser speziellen Anwendung habe ich nur diesen normalen Header , habe ich nur diesen normalen Header den ich zurückgebe, und du kannst diese Ausgabe hier auf dem Bildschirm sehen , Effekt-Hook, okay? Was ich tun werde, ist , hier eine Zählung zu erstellen, natürlich werde ich hier den Use State Hook verwenden. Okay? Und ich werde hier count sagen und ich werde set count sagen, was das Meer ist, und ich werde hier use state sagen und ich werde es auf Null initialisieren Okay? Also, was ich als Nächstes hier machen werde, ist, dass ich Inkremente zählen lasse, okay Und hier drüben werde ich sagen, das ist eine Pfeilfunktion Hier drüben. Okay. wenn diese Funktion aufgerufen wird, werde ich den Zähler hier aktualisieren, okay? Also werde ich sagen zählen plus eins, ungefähr so. Okay. Ich werde auch den Titel aktualisieren, okay? Also dokumentiere. Titel ist gleich, und ich werde die Vorlagenliterale hier drüben haben . Ich sage zählen In den Backticks habe ich zählen, und ich sage größer, und ich sage zählen plus eins, ungefähr so Okay? Wir nutzen diese Funktion noch nicht. Okay? Wir müssen es nutzen. Also hier, ich werde reinkommen und hier drüben werde ich einen Button hinzufügen. Okay? Also das ist ein einfacher Button. Okay? Und was es tut, ist, dass hier Inkrement steht. Okay. Und hier auf der Seite gibt es bei einem Klick so etwas, und ich sage inkrementelle Zählung Ich werde das speichern. Okay? Also das ist ein Knopf, den ich habe, okay, und du kannst ihn hier sehen. Der Titel sagt was plus reagieren, richtig? Ich kann also Inkrement sagen und schon aktualisiert es den Titel, oder? Sie können sehen, dass die Anzahl aktualisiert wird, oder? Das kannst du im Titel sehen. Richtig. Das ist also ein Beispiel ohne Use-Effect-Hook. Und jedes Mal, wenn auf die Schaltfläche geklickt wird, die Inkrementfunktion direkt aktualisiert die Inkrementfunktion direkt den Dokumenttitel Das funktioniert, ist aber nicht ideal, weil es schwierig ist, es zu verwalten und zu warten, vor allem, wenn die App wächst Das ist ohne Nutzeffekt Hook, oder? Jetzt können wir dieses Beispiel in Use Effect Hook umwandeln und wie würden wir das machen? Also würde ich sagen: Oh, lass mich das hier haben, okay? Und ich scrolle nach oben, okay. Und hier drüben sage ich Use Effect. In dem Moment, in dem ich „ Effekt verwenden“ sage, okay? Und wenn ich die Eingabetaste drücke, lassen uns nach oben scrollen und sehen, ob die Eingabe hinzugefügt wurde. Die Eingabe wurde also hinzugefügt, Sie können hier oben sehen , zusammen mit dem Nutzungsstatus. Und wenn du nach unten scrollst und Effekt auswählst, muss ich die T-Syntax verwenden, damit ich sie sogar kopieren kann. Also möchte ich den mit der Abhängigkeit verwenden, oder? Also nehme ich den hier rüber. Okay. Und was ich tun würde, ist hier drüben, ich kann den Code haben, oder darin. Der Nebeneffekt hier ist also dieser Code, oder? Also schneide ich das einfach und verschiebe es in diese spezielle Funktion hier drüben. Okay. Also ich habe die Anzahl der Inkremente getrennt und das ist ein Use-Effect-Hook, der ausgeführt wird, okay? Hoppla. Also kommt dieses Pop-up rein Okay. Also dieser Use-Effect-Hook wird ausgeführt, okay? Wenn die Anzahl aktualisiert wird, alle Änderungen an der Anzahl dazu führen , dass dieser Code ausgeführt wird , oder? Und was macht dieser Code? Dies aktualisiert den Titel des Dokuments. Okay? Was ist die Hauptaufgabe? Die Hauptaufgabe bestand nur darin, die Zählung mit dieser Funktion zu aktualisieren. Und nach der Aktualisierung der Zählung haben wir einen Use-Effect-Hook , der sicherstellt, dass zusätzlicher Code ausgeführt wird , sobald die Änderungen vorgenommen wurden, um zu zählen. Ordnung. Ich hoffe, das macht Sinn. Ich speichere das hier und aktualisiere es. Okay. Jetzt kannst du es hier sehen, du triffst Count Colin eins, richtig? Wir haben noch nicht einmal auf den Button geklickt. Es heißt, zähle Colin um eins. In Ordnung. Wohingegen ich im vorherigen Beispiel das einfach ausschneide, ich werde oder ich kopiere es einfach, okay? Ich werde das einfach auskommentieren und dann einfach zum vorherigen Beispiel zurückkehren. Das ist also unser vorheriges Beispiel. Im vorherigen Beispiel, als wir die Taste nicht gedrückt haben, hatten wir Wt plus React, was hier der Standardtitel ist. Wir sehen hier nicht zählen plus eins, weil der Titel natürlich gesetzt wird, wenn auf die Schaltfläche geklickt wird, oder? Wenn ich also auf die Schaltfläche klicke, wird sie aktualisiert, sodass sie eins zählt, zwei zählt und so weiter, oder? Aber in diesem Fall, hier drüben, okay? Lass mich einfach kontrollieren. Also. In diesem Fall hier drüben, okay? Also werde ich die Zählung hier drüben haben, die Zählung plus eins. Okay. Also in diesem Fall hier drüben sehe ich Zählung Null. Stimmt? Warum ist das Null? Warum sehe ich es im Titel aktualisiert? Denn wenn du hier drüben nachsiehst, wird es laufen. Wenn Sie hier Abhängigkeiten verwenden, wird es beim ersten Rendern ausgeführt und wenn sich die Anzahl ändert. Es läuft also bereits beim ersten Rendern. Aber das war nicht der Fall. Also dieses Ding, als das in der Funktion war und das auskommentiert wurde oder nicht existierte. Zu diesem Zeitpunkt lief es beim ersten Rendern nicht. Sie können sehen, dass es beim ersten Rendern nicht läuft. Und wann immer du geklickt hast , wurde das Update hier angezeigt, oder? Also ja, das ist gerade die Sache hier drüben. Also das erklärt, dass das nach dem ersten Zufallsprinzip läuft, oder? Also, wenn ich das F speichere, zähle ich Null und ich kann das erhöhen, okay, so oft ich will, und du wirst sehen, dass der Titel aktualisiert wird. Und das hängt im Grunde mit dem Zählen zusammen. Eine Änderung der Zählung wird diesen Code hier auslösen, okay? Dieser Code, den ich geschrieben habe. Okay. Dieser Code wird ausgelöst, oder? Und ja, das alles ist auf das Abhängigkeits-Array zurückzuführen. Dependency Array stellt also sicher, dass dies nur ausgelöst wird, wenn die Anzahl aktualisiert wird und zu jedem anderen Zeitpunkt. In Ordnung. Ich hoffe also, dass Use Effect Hook Ihnen allen ziemlich klar ist , was es ist und wie es funktioniert. Einfach ausgedrückt: Mit Effect Hook and React können Sie Code automatisch ausführen , wenn sich etwas ändert oder wenn eine Komponente geladen wird, oder? Es ist so, als würde man eine Aufgabe so einstellen, dass sie ausgeführt wird, nachdem der Bildschirm aktualisiert wurde oder wenn eine bestimmte Art von Daten bereit ist, oder? Das heißt, wenn eine bestimmte Art von Daten bereit ist, führen Sie möglicherweise eine Art von Verarbeitung durch, oder? Und vielleicht weisen Sie diese Prozessdaten einem Status zu. Sie können einen Nutzungseffekt-Hook an diesen Status binden. Und wann immer die Daten bereit sind und sie dieser Statusvariablen zugewiesen werden, ist der Nutzungseffekt strikt, oder? Das bedeutet es also, wenn Sie sagen, wann bestimmte Daten bereit sind, oder? Und hier haben Sie diese verschiedenen Varianten des Nutzungseffekts, und das ist die Syntax, die Hauptsyntax. In Ordnung. Ich hoffe, das war hilfreich und ich hoffe, Sie konnten mitmachen. 11. Abhängigkeitsarrays entmystifizieren: Das Verhalten von useEffect steuern: Hallo, da. Willkommen. Und wir werden uns die Bedeutung des Abhängigkeits-Arrays im Use-Effect-Hook ansehen , oder? Schauen wir uns also dieses Beispiel an. Also hier in diesem Beispiel habe ich ein sehr einfaches reaktives Projekt, und innerhalb der App JSX habe ich diese App-Komponente, bei der ich einfach ein Dif mit einem Header und einem Button-Klick zurückgebe Was ein Button-Klick bewirkt, ist, dass er den Status aktualisiert. Natürlich haben wir hier mit Hilfe von use state einen Status namens count , und wir verwenden den Use-Effect-Hook , bei dem wir den Dokumenttitel aktualisieren, wenn sich die Anzahl ändert . Ordnung. Also das ist der Code. Es ist ziemlich einfach, und ich rendere diese Komponente hier im Hauptpunkt GSX, wie Sie sehen können, okay? Ich würde also auf App Dot JSX umsteigen, und unser Ziel ist es, die Bedeutung des Abhängigkeits-Arrays, das wir haben, zu verstehen Bedeutung des Abhängigkeits-Arrays, das wir haben, Das ist also das Abhängigkeits-Array, das wir haben. Alles klar? Nun, das Erste, was ich tun würde, ist, dass dieses Abhängigkeits-Array direkt damit verknüpft ist , wie der Use-Effect-Hook ausgeführt wird oder wie oft er ausgeführt wird und wann er ausgeführt wird. Um das nachzuverfolgen, werde ich hier Console Dot Log sagen, ok. Und ich werde einfach eine Nachricht hier drüben haben. Ich sage nutze den Effekt. Ausgelöst, so etwas. Ordnung. Und ich kann das loswerden. Ich möchte den Titel nicht aktualisieren. Okay? Ich bleibe hier einfach bei Console Lock. Okay? Ich speichere das und wir können die Schlösser hier drüben in Augenschein nehmen. Okay? Also gehe ich zur Inspektion, ich gehe zur Konsole und du wirst sehen, dass U's Effect ausgelöst wurde. Ordnung? NiFi Refresh, du wirst sehen , okay, es wird hier zweimal ausgelöst. Okay? Es sollte weitestgehend einmal ausgelöst werden. Okay. Jetzt werde ich dir sagen, was passiert. Jos Effect-Hook mit einem Abhängigkeitsarray wird also einmal ausgelöst, wenn die Komponente gemountet wird und die Komponente gemountet wird und wenn sich das Abhängigkeitsarray ändert. Okay? Im Moment wird es also ausgelöst, wenn die Komponente montiert ist. Okay? des Abhängigkeits-Arrays hat sich hier nicht geändert Wert des Abhängigkeits-Arrays hat sich hier nicht geändert . Wir aktualisieren also nicht die Anzahl bei der Aktualisierung, oder? Es wird also nur einmal gerendert, aber wir sehen hier zweimal das Punktprotokoll der Konsole, okay? Und das liegt daran, dass wir uns im Entwicklungsmodus befinden. Und wenn Sie hier im Entwicklungsmodus sind, führen wir diese React-Anwendung hier tatsächlich im strikten Modus aus, wenn Sie sehen. Wenn Sie also im Projekt zum Hauptpunkt JSX wechseln, führe ich das eigentlich im strikten Okay Also, wenn du das nicht zweimal sehen willst, okay, was du tun kannst ist, dass du diesen strikten Modus hier einfach loswerden kannst diesen strikten Modus hier einfach loswerden Der strikte Modus wird jedoch empfohlen, wenn Sie sich im Entwicklungsmodus befinden, da er während der Entwicklung nach potenziellen Problemen und allen Arten von unsicheren Codepraktiken sucht Problemen und allen Arten von unsicheren Codepraktiken während der Entwicklung nach potenziellen Problemen und allen Arten von unsicheren Codepraktiken Okay? Aber wir haben die Nachricht zweimal gesehen, weil die Reaktion im strikten Modus lief. Und wenn ich das einmal losgeworden bin, wenn ich es speichere, wirst du sehen, dass ich es nur einmal sehe. Okay? Du kannst also sehen Use Effect Hook einmal ausgelöst wird, oder? Was wir jetzt tun können, ist, dass wir mit einem Haustier herumspielen, das den Nutzungseffekt hat. Alles klar? Wenn ich jetzt Inkrement sage, wirst du sehen, dass es jedes Mal ausgelöst wird, wenn ich auf Inkrement klicke. Und warum passiert das? Okay? Das passiert, weil dieser Effekt damit zusammenhängt, dass er hier zählt. Und wann immer es irgendwelche Änderungen an der Zählung gibt, ob es nun Inkrement oder Dekrement ist, ich nehme irgendeine Änderung an der Zählung vor, wird dieser Code ausgelöst , Und das sagen wir hier drüben. Alles klar? Also, was wir tun können, ist , das loszuwerden. Okay. Was wird jetzt passieren? Okay? Also werde ich es aktualisieren und die Konsole löschen, okay? Also werde ich es aktualisieren. Es wird natürlich zum ersten Mal ausgelöst, wenn die Komponente montiert ist, oder? Kein Rechtsklick-Inkrement, es wird jedes Mal ausgelöst Okay? Aber jetzt werden Sie sehen, dass die Ausgabe sm für ein Abhängigkeitsarray und ohne Abhängigkeit a ist. Also, was ist der Unterschied, okay? Der Unterschied besteht darin, dass es kein Abhängigkeitsarray gibt, es wird bei jeder Art von Änderung oder jeder Art von Rendern an der Komponente ausgelöst , richtig, oder bei jeder Art von erneuter Darstellung an der Komponente. Bei einem Abhängigkeitsarray wird es jedoch nur ausgelöst, wenn die Anzahl aktualisiert wird. Ordnung. Also lass mich dir das zeigen. Okay? Und um das zu demonstrieren, werde ich eine weitere Zustandsvariable einführen. Ich werde das hier einen anderen Wert nennen, okay? Und ich würde sagen, setze einen anderen Wert wie diesen. Okay. Und ich sage hier „Status verwenden“, und das kann, sagen wir, sein, oder ich setze es einfach auf zehn, okay? Mal sehen, was passiert. Ordnung. Und hier komme ich runter. Ich werde diesen Button hier unten duplizieren. Okay? Und was ich tun werde, ist , das einen anderen Wert zu nennen. Etwas wie das hier. Okay. Also haben wir noch einen Knopf. Aber anstatt die Anzahl zu aktualisieren, aktualisiere ich hier einen anderen Wert. In Ordnung. Und ich sage noch einen Wert plus eins, richtig? Das ist also erledigt, in Ordnung. Das ist etwas, was wir tun. In Ordnung. Lassen Sie uns nun die Bedeutung des Dependency Arrays sehen . Alles klar? Ich habe das gespeichert. Okay. Lass mich auffrischen. Sie können also sehen, dass der Use-Effect-Hook ausgelöst wird, wenn die Komponente zum ersten Mal gerendert oder die Komponente eingebunden wird. Wenn ich jetzt Inkrement sage, wird es jedes Mal ausgelöst, wenn ich auf das Inkrement klicke Das ist natürlich so, oder? Aber wenn ich auf einen anderen Wert klicke, wird er nicht ausgelöst. Warum? Warum? Die Antwort darauf ist also, dass es an die Wertänderung im Zählstatus gebunden ist, richtig, und nicht an einen anderen Wert. Und deshalb wird es nicht ausgelöst. Okay? Also, wenn ich den Zähler hier los werde, okay. Wenn ich jetzt aktualisiere, wirst du sehen, dass es einmal ausgelöst wird , wenn die Komponente geladen wird. Wenn ich Inkrement sage, wird es ausgelöst. Wenn ich einen anderen Wert sage, wird er erneut ausgelöst. Okay? Du kannst sehen. Es wird also für jede Art von Änderung an der Komponente gerendert . Und das liegt daran, dass es kein Abhängigkeitsarray gibt, oder? Es gibt kein Abhängigkeitsarray. Okay? Lassen Sie uns nun sagen, ob ich ein leeres Abhängigkeitsarray hinzufüge. Lassen Sie mich also ein leeres Abhängigkeitsarray hinzufügen. Was würde also passieren? Wenn ich aktualisiere, wird es hier zum ersten Mal ausgelöst Sie können jetzt sehen, dass jede Art von Änderung nicht ausgelöst wird, weil leeres Abhängigkeitsarray sicherstellt , dass die Komponente gerendert oder der Nutzungseffekt ausgelöst wird. Es tut mir leid, der Use-Effekt wird nur zum ersten Mal ausgelöst , wenn die Komponente gemountet wird. Okay? Also ich hoffe, du hast ein bisschen Klarheit, okay? Und ich hoffe, Sie können sehen wie dieses Abhängigkeits-Array einen großen Unterschied macht, okay? Also, wenn Sie hier irgendeine Art von Operation durchführen, ist das ein bisschen schwer, okay? Ist hier ein Semikolon. Das habe ich gerade hinzugefügt Wenn Sie also irgendwelche Operationen ausführen, die hier in diesem Use-Effect-Hook etwas aufwändig und zeitaufwändig sind etwas aufwändig und zeitaufwändig , dann kann dieses Abhängigkeitsarray die Leistung bestimmen. Okay? Sie müssen also sicherstellen , dass Sie sicherstellen, dass dieser Use-Effect-Hook nur zum richtigen Zeitpunkt ausgeführt wird , zu dem Sie ihn tatsächlich ausführen mussten. Okay. Wenn Sie hier aus irgendeinem Grund eine lange Aufgabe haben, sagen wir, eine Aufgabe mit hohem Verarbeitungsaufwand, und wenn Sie das Abhängigkeits-Array verpassen, dann wird Ihnen das eine wirklich schlechte Leistung bescheren, okay? Aber nehmen wir an, Sie haben eine Variable, okay, und Sie möchten die Änderungen an dieser Variablen überwachen und wenn Sie diese bestimmte Aktion nur ausführen möchten, und wenn Sie diese bestimmte Aktion nur ausführen möchten wenn sich diese bestimmte Variable ändert, sollten Sie sie in diesem Fall mit dieser bestimmten Variablen aufnehmen oder verknüpfen , und Sie sollten diese Variable hinzufügen , Statusvariable, was auch immer sie ist, hier drüben im Abhängigkeits-Array. Und wann immer es eine Änderung gibt, wird der Use-Effect-Hook nur dann ausgelöst. Jetzt wird es einige Szenarien in denen Sie vielleicht eine Art von Housekeeping durchführen möchten , wenn die Komponente zum ersten Mal geladen wird, oder? Sie können also in diesem Fall Effect Hook mit einem leeren Abhängigkeitsarray verwenden , weil Sie diese Housekeeping-Aufgabe gerade dann ausführen möchten , wenn die Komponente geladen ist und nicht danach. Sie können dafür also einen leeren Abhängigkeitsbereich haben. Also wird es so gerendert, wie du es gesehen hast. Im Moment haben wir einen leeren Abhängigkeitsbereich, also wird er gerendert oder er wird nur einmal ausgeführt , wenn die Komponente gerendert wird und danach nicht. Ich hoffe, dieses Beispiel gibt Ihnen eine gute Klarheit darüber, wie Use Effect Hook funktioniert und wie wichtig dieses existierende Abhängigkeitsarray ist, oder? Ich hoffe also, Sie haben Klarheit über verschiedene Szenarien, wie dies ausgeführt und verwaltet wird, oder? Wenn Sie also das Abhängigkeits-Array erwähnt haben , wie jede Art von Wert, dann wird diese Funktion , die Sie angeben, nur ausgeführt wenn dieser bestimmte Wert geändert oder aktualisiert wird , oder? Und natürlich wird sie auch beim ersten Rendern ausgeführt . Richtig? Wenn Sie möchten, dass es nur beim ersten Rendern ausgeführt wird, geben Sie ein leeres Abhängigkeitsarray an. Wenn Sie etwas haben, das Sie bei einer Änderung an der Benutzeroberfläche oder bei jeder Art von Rendering ausführen möchten einer Änderung an der Benutzeroberfläche oder bei , okay, Sie überspringen einfach das Abhängigkeitsarray. Okay. Denken Sie jedoch daran , dass es jedes Mal ausgelöst wird, wenn erneut gerendert wird. Ordnung. Behalte also die Aufführung im Hinterkopf. In Ordnung. Ich hoffe, das war nützlich, okay. Und ja, wir deaktivieren hier den strikten Modus. Sie können den strikten Modus einfach beibehalten oder beibehalten. Weil der strikte Modus im Entwicklungsmodus empfohlen wird. Also habe ich das nur geändert , weil ich Use Effect Hook nicht zum ersten Mal zweimal beim Rendern von Komponenten ausführen wollte Effect Hook nicht zum ersten Mal zweimal , oder? Also hatte ich das entfernt. Aber ja, so würden die Dinge funktionieren, und ich hoffe, das ist euch allen klar. 12. Praxisorientierte Projekte: Einen Echtzeit-Maustracker mit useEffect erstellen: Willkommen zu diesem speziellen Video, in dem wir unseren eigenen Maustracker bauen werden und dafür den Use Effect Hook verwenden Okay? Also hier auf meinem Bildschirm können Sie diese Anwendung sehen, in der sie mir die Position der Maus anzeigt , während ich sie bewege. Okay? Es ist also komplett in Echtzeit, und wir verwenden den Use Effect Hook hier für diese spezielle Anwendung. In Ordnung. Also das wird uns helfen, einige React-Konzepte zu üben, und es wird uns helfen, ein Projekt in unser Portfolio aufzunehmen. Ordnung. Es ist also ein sehr einfaches Projekt, oder? Und lass uns gleich loslegen. Also hier bin ich bei VS-Code, Visual Studio-Code, und ich habe meinen Browser Seite an Seite geöffnet. Ich habe mit VT ein sehr einfaches VA-Projekt erstellt, und Sie können sehen, dass ich hier in der App Dot GSX bin, die mit Mean Dot GSX gerendert wird Alles klar? Ich habe eine CSS-Datei zwei. Hier mit sehr einfachem CSS. Es ist ein Standard-CSS , das ich nennen kann. Okay? Sie haben eine Telefonfamilie, Sie haben den Text mittig ausgerichtet, den Abstand und den Rand auf Null gesetzt, okay Ups, und der obere Abstand beträgt 40 Pixel und die Mindesthöhe ist so hoch. In Ordnung Also werden wir unseren eigenen Maustracker bauen. Als Erstes brauchen wir hier drüben einen Staat. Ich werde diesen Zustand Mausposition nennen. Okay. Und das wird uns helfen, die Position der Maus zu verfolgen. Dies wird also die neueste Position der Maus haben , und sie muss auch aktualisiert werden , wenn sich die Mausposition ändert. Und ich werde hier den Use-Status verwenden. In dem Moment, in dem ich us state hinzufüge, wirst du sehen diese Eingabe oben hinzugefügt wird, okay? Und das wird im Grunde genommen die Position in Form von Schlüssel-Wert-Paaren halten. Also werde ich X haben, Doppelpunkt Null. Also das ist die Position von X und das ist die Y-Position. Also ja. Das ist erledigt. Alles klar. Also, was wir tun müssen, ist , dass wir die Schnittstelle ändern müssen. Okay, wir brauchen eine Überschrift, also sage ich Mausposition. Okay, und wir werden diese Mausposition hier drüben anzeigen. Okay. Also sage ich P-Tag und ich sage X, Doppelpunkt und ich sage Mauspositionspunkt X. Okay. Und ich habe auch die Y-Position. Okay? Ich sage Y-Doppelpunkt und zeige die Y-Position als Mauspositionspunkt Y an, etwa so. In Ordnung. So können Sie sehen, wie die Mausposition angezeigt wird. Es ist derzeit 00, weil wir es so initialisiert haben. In Ordnung. Nun, was wir tun müssen, ist hier, ich werde Use-Effekt verwenden und mit Use Effect hier drüben haben wir den Listener und alles wird verwaltet Okay? Also hier, benutze Effekt, ok und innerhalb von use effect habe ich diese Pfeilfunktion hier drüben, ungefähr so, und ich habe ein Abhängigkeits-Array. Alles klar? So wird der Haken aussehen, oder? beim Hinzufügen eines Nutzungseffekts, Beachten Sie beim Hinzufügen eines Nutzungseffekts, dass diese Eingabe automatisch oben hinzugefügt wurde . Alles klar? Also hier drüben, was ich tun werde, ist dieses leere Abhängigkeits-Array zu haben, o und darin werde ich die Funktion hinzufügen. Okay. Also sage ich Anfassen, Maus hier rüber bewegen. Okay? Und wird das Ereignis akzeptieren, und hier habe ich eine Pfeilfunktion erstellt. Okay? Also das ist es, was ich gerade erstelle, und hier sage ich, Mausposition einstellen. Okay? die Sitze, ruft das auf, setzt die Mausposition, und ich sage X Clineventt Client X. Okay. Also das aktualisiert die Sitze, ruft das auf, setzt die Mausposition, und ich sage X Clineventt Client X. Okay. Und ich sage y , Colin, event, dot, client, Y, so etwas Okay? Also ja, das ist hier erledigt. Und dann werde ich Windows einen Listener hinzufügen Windows einen Listener hinzufügen Ich werde Window Dot sagen, Event Listener hinzufügen, so etwas, und ich werde einen Mausbewegungs-Listener hinzufügen. Okay? Also werde ich sagen, bewege die Maus, das hier. Ich möchte, dass das bei jeder Art von Mausbewegung ausgelöst wird , damit ich es in Echtzeit verfolgen kann, oder? Und ich würde sagen, Mausbewegung handhaben. Okay. Ich hoffe, das macht Sinn. Wir fügen dem Fenster einfach einen Listener hinzu. Okay? Das ist ein Fenster. Wir fügen dort einen Listener hinzu, wir sehen, wie sich der Listener mit der Maus bewegt Es wird also jede Mausbewegung verfolgen, und im Grunde wird diese Handle-Mausbewegung ausgeführt Okay? Also werde ich das speichern. Und wenn du herkommst, kannst du sehen, dass es gut funktioniert. Sie können die Position in Echtzeit sehen, oder? Also ja, das ist der Maustracker mit Hilfe von Use Effect Hook. Und ich hoffe, Sie haben ein gewisses Maß an Klarheit darüber, wie Sie den Use Effect Hook für eine gute Praxis nutzen können . 13. Bereinigen wie ein Profi: Bereinigungsfunktionen in useEffect beherrschen: Jetzt ist es an der Zeit, dass wir ein bisschen mehr über die Mouse-Tracker-Anwendung sprechen , die Also hier drüben hängen wir einen Event-Listener an das Fenster an, okay? Nun, es gibt ein kleines Problem, okay? Es gibt keine Aufräumarbeiten, oder? Der Event-Listener, den wir hinzufügen, bleibt aktiv, auch wenn die Komponente nicht gemountet ist Okay, und das kann zu Speicherlecks und unnötigem Leistungsaufwand führen unnötigem Leistungsaufwand der Listener weiter läuft Okay? Also das ist nicht gut, und wir sollten das mit Nutzeffekt behandeln. Use-Effect kann es uns also ermöglichen, eine Bereinigungsfunktion einzubauen, um den Event-Listener zu entfernen , wenn die Komponente unmountet Dadurch wird sichergestellt, dass die Ressourcen ordnungsgemäß freigegeben werden, und es werden auch mögliche Speicherlecks verhindert. Also, was ist die Cleanup-Funktion? Cleanup-Funktion ist eine Art Funktion, die uns mit einem Nutzungseffekt zur Verfügung gestellt wird , mit dem Sie Aufräumen können Sie können also verschiedene Bereinigungsaufgaben ausführen, wie Entfernen von Event-Listenern oder wenn Sie irgendwelche Timer laufen lassen, und wenn die Komponente unmountet wird, können Sie diese Timer und all diese Dinge stornieren und all Und das sorgt dafür, dass Ihre App effizient und frei von Fehlern bleibt. Ordnung? Wie fügen wir einen Event-Listener Also hier drüben, was ich tun werde, ist nachdem der Listener hier hinzugefügt wurde, werde ich zurück sagen, okay Und ich werde hier drüben eine Pfeilfunktion haben. So eine Sache. So wie es ist. Okay. Und hier drüben werde ich einfach sagen, dass ich den Code zum Aufräumen in dieser Bereinigungsfunktion haben werde Aufräumen in dieser Bereinigungsfunktion Das ist also eine Bereinigungsfunktion hier drüben. Ich werde Window Dot Remove-Event-Listener sagen. Du kannst sehen. Was ist der Event-Listener, den wir hinzugefügt haben Es war also eine Mausbewegung. Das war Event-Listener, und ich habe den Listener auch Ich habe hier die Maus bewegt. Okay? Also ich lasse das entfernen und hier kannst du ein Konsolenprotokoll machen, wenn du willst, okay? Sie können ein Konsolenprotokoll erstellen, wenn Sie möchten. Aber im Moment werden wir keine Ausgabe sehen, da diese ausgelöst wird wenn die Komponente nicht installiert ist, oder? Wir würden also, anstatt hier ein Konsolenprotokoll hinzuzufügen, zuerst ein manuelles Unmounten auslösen , richtig, wir fügen eine Schaltfläche hinzu, mit der wir die Komponente ein - und aushängen können, sodass wir sehen können , wie dieser Listener Also, was ich tun würde, ist gesamten Code zu verschieben, okay? Ich werde den gesamten Code tatsächlich in eine andere Komponente verschieben . Und in dieser App-Komponente füge ich eine übergeordnete Komponente hinzu. Okay? Also werden wir eine übergeordnete Komponente haben, die diesen Maustracker lädt, und er wird auch eine Schaltfläche zum Entladen haben. Okay? Also lass mich dir zeigen, wovon ich spreche. Also hier, ich werde eine neue Datei erstellen. Ich sage Maus, Tracker Dot JSX, so etwas in der Art. Ich füge das hier ein. Und anstatt die App hier zu exportieren, sage ich einfach Maus, Tracker. Okay? Das ist eine Funktion. Das ist ein Komponentenname, oder? Das ist also der aktuelle Komponentenname. Und hier in App Dot JSX müssen wir das loswerden Wir führen eine Art Bereinigung und fügen hier einfach die übergeordnete Komponente Okay. Also werde ich einfach den ganzen Code hier loswerden. Okay. Und ja, das bleibt App und wir müssen die übergeordnete Komponente hier rendern. Okay? Wir werden das loswerden. Ordnung. Hier bekommen wir eine Fehlermeldung, weil wir nichts rendern, aber ich werde das Fernsehen vorerst behalten , damit wir keinen Fehler bekommen. Ich werde eine weitere Komponente einführen als übergeordnete Komponente bezeichnet wird. Okay. Und ich werde die übergeordneten Komponenten getrennt halten. Ich sage übergeordnete Komponente Punkt SX. Also haben wir hier zwei Komponenten hinzugefügt. In Ordnung. Und ich würde sagen, Funktion. Okay, Funktion, übergeordnete Komponente, so etwas, und ich füge hier einen Export hinzu. Ich sage Standard exportieren, übergeordnete Komponente, wie Okay. Und hier drüben füge ich einen Bundesstaat hinzu. Wir werden also einen Status beibehalten, unabhängig ob Sie eine Komponente anzeigen möchten oder nicht. Okay? Also sage ich Show Component und ich sage Set Show Component. Etwas in der Art, ich füge hier use state hook hinzu. Okay. Jetzt ist der Verwendungsstatus wahr. Standardmäßig zeigen wir, dass dies Boolean ist . Dieser Status hat den Wert boolean, und ich kann eine konstante Umschaltkomponente verwenden, und ich werde hier eine Pfeilfunktion haben hier Und darin kann ich sagen: Set, Show Component. Und hier sage ich den vorherigen Wert. Okay? Also einfach den vorherigen Wert umkehren. Das sagen wir hier drüben. Okay. Also ja, das ist erledigt. Und was ich jetzt tun muss, ist, dass ich hierher zurückkehren muss. Also heißt es Rückkehr und ich füge eine Rücksendeerklärung hinzu. Okay, so etwas. Gewinne das, ich nehme so einen TF. Okay, und ich nehme einen Knopf. Okay. Also, was macht dieser Knopf? Also Knopf auf Klick. Okay. Beim Klicken wird die Komponente umgeschaltet, Ls Okay. Und hier kann ich den ternären Operator verwenden Also, wenn show component wahr ist, was machen wir dann? Wir haben diesen Wert von Unmount Tracker, okay? Als ob der Text als Unmount Tracker angezeigt wird. Okay? Also sage ich unmounten Und Mount Tracker. Und wenn der Wert Force ist, dann sagen wir Mount Tracker. Dieser Text lässt sich also auch umschalten, oder? Im Grunde ist es das, was es bedeutet. Okay? Also habe ich diesen Knopf fertig gemacht. Okay? Und jetzt kann ich das Ja-Skript hier drüben haben. Wenn es Show Component ist, okay, dann müssen wir den Maus-Tracker rendern, ungefähr so. Wie. Okay. Also rendern wir den Mouse-Tracker hier unter bestimmten Bedingungen rendern wir den Mouse-Tracker hier Okay? Was passiert, ist, dass wir „Komponente anzeigen“ sagen. Ich zeige, dass die Komponente wahr ist, dann sehen wir Render Mouse Tracker, oder? Das ist also erledigt, und hier müssen wir anstelle von tf die übergeordnete Komponente hinzufügen, so wie folgt. L Sie können sehen, dass die App hier drüben ist, oder? Du kannst also sehen, dass das reinkommt. Ich kann rendern und rendern. Du kannst sehen. Okay, ich kann aufsteigen. Und aushängen Die Komponente wird also montiert und demontiert. Okay? Wie funktioniert das? Okay, wir haben nur ein bisschen umgestaltet. Wir haben eine übergeordnete Komponente hinzugefügt. Okay? Zuerst haben wir zwei Dateien erstellt. Eine besteht aus zwei Dateien, oder ich sollte sagen, zwei Komponenten in separaten Dateien. Das ist also die übergeordnete Komponente. Okay? Wir haben eine Mouse-Tracker-Komponente. Die Maustracker-Komponente ist also unkompliziert. Okay. Wir haben gerade diesen Maustracker mit Use Effect Hook und er zeigt uns die Position der Maus, richtig? Und wir haben hier eine Bereinigungsfunktion hinzugefügt. Dann haben wir eine übergeordnete Komponente die diesen Status der Show-Komponente hat, nämlich Pollen, und es gibt eine Schaltfläche die diesen Komponentenwert, diesen Show-Komponentenwert, auf wahr oder falsch umschaltet , oder Und dann rendern wir die Show-Komponente auf diese Weise. Okay? Also ist das erledigt. Und dann zeigen wir in der App Dot JSX nur die übergeordnete Komponente, okay? Denn innerhalb der übergeordneten Komponente rendern wir tatsächlich die Maus-Tracker-Komponente, und das ist bedingtes Rendern mit Hilfe des Operators. In Ordnung. Also das ist erledigt, und was wir jetzt tun können, ist zu sehen, wie diese Funktion funktioniert, oder? Also, was ich tun werde, ist, ich würde sagen, wir müssen das Punktprotokoll der Konsole hier hinzufügen . Okay? Und wir müssen nachverfolgen, wie der Listener hinzugefügt und wie er entfernt wird Also hier sage ich Log, okay? Und hier können wir sagen Maus, bewegen, Zuhörer hinzugefügt, so etwas Okay? Ich werde das entfernen. Okay. Ich kopiere das und hier in der Return-Anweisung, Return-Funktion, sehe ich, dass der Mausbewegungslistener entfernt wurde Okay? Sowas in der Art. Sehen wir uns jetzt die Konsole an. Ich werde herkommen. Ich komme zu Console. Okay. Du kannst es sehen. Okay, als Erstes mache ich hier eine Auffrischung. Okay, aktualisieren, und Sie können den Mausbewegungs-Tracker hinzufügen, den Mausbewegungs-Tracker hinzufügen sehen . Ich bewege meine Maus hierher und du hast den MouseMove-Tracker hinzugefügt, okay Entschuldigung, der Mausbewegungs-Listener wurde hinzugefügt. Und jetzt unmounten, okay, Sie werden sehen, dass der Mausbewegungslistener entfernt wurde Okay? Dies ist nicht der Fall, wenn Sie diese Bereinigungsfunktion nicht haben Wenn Sie also diese Bereinigungsfunktion nicht haben, wird der Listener niemals entfernt. Okay? Darin liegt das Problem. Wenn Sie also aktualisieren, können Sie sehen, dass der Listener hinzugefügt wurde. Sie können sehen, dass der Listener mit Mausbewegung hinzugefügt wurde, oder? Wenn ich den Tracker demounte, den Listener aushänge und die Komponente einbinde, sollte ich sagen, Sie können sehen dass kein Listener entfernt wird, okay? Der Listener ist also immer noch da, und das kann zu Nebenwirkungen oder irgendwelchen Störungen führen Okay, weil du da draußen einen Zuhörer hast, oder ? Das wird nicht benutzt Okay? Also kannst du sehen und dir vorstellen, wie das gut funktioniert, okay? Also Montage, Montage. Sie können sehen, dass es hinzugefügt wird und nicht wahr? Das ist also eine Bereinigungsfunktion, okay? Ich hoffe, das gibt Ihnen ein Gefühl dafür, wie wichtig das ist. Das Ziel dieser Bereinigungsfunktion ist natürlich, wie der Name schon sagt, dass sie zum Aufräumen verwendet wird, oder? Also jede Art von Bereinigungsaufgabe, die Sie erledigen möchten, können Sie auf diese Weise erledigen Okay? Das ist die Syntax hier drüben. Okay. In diesen geschweiften Klammern können Sie alle möglichen Bereinigungsaufgaben ausführen, und Sie können hier sehen, wie das beim Aushängen der Komponente ausgelöst wird . Stimmt das? Ich hoffe, das ist nützlich und ich hoffe, dass Sie dem folgen konnten, und ich hoffe, Sie haben jetzt ein gutes Verständnis dafür, wie Sie Huge Effect Hook nutzen können 14. PROJEKT: Kreative Herausforderung durch den Aufbau einer funktionalen Digitaluhr mit React: Hallo, da. In diesem speziellen Video werden wir also diese Digitaluhr bauen , die Sie auf dem Bildschirm sehen. Es ist also eine sehr einfache Digitaluhr, okay? Wir gehen dorthin , um die Zeit hier anzuzeigen. Und Sie können sehen, wie die Benutzeroberfläche aktualisiert wird. Sie können sehen, dass es Sekunden, Minuten, Stunden und dass die gesamte Zeit angezeigt wird, im Grunde genommen richtig. Das ist es, was wir entwickeln werden , und wir werden React-Konzepte nutzen und sie praktisch umsetzen. Okay? Dies ist also ein Übungsprojekt, das Ihnen helfen kann, das Gelernte, das Sie bisher mit React gemacht haben, zu vertiefen . In Ordnung? Also ja, lassen Sie uns ohne weitere Umschweife direkt zum Visual Studio-Code übergehen Ordnung, also zunächst habe ich hier ein sehr einfaches React-Chase-Projekt-Setup, okay? Ich benutze T hier, und das ist ein React-Chase-Projekt, das ich habe Ich habe App Dot JSix , die in Mean Dot JSX gerendert wird , oder Und in App Dot JSX habe ich eingegeben, dass ich diese paar Eingaben oben habe Eine sehr grundlegende Komponentendefinition, richtig, und ich exportiere diese Komponente natürlich Und innerhalb von App Dot CSS habe ich ein sehr einfaches Styling, das Sie hier sehen, einfach so, als ob das nicht viel ist, okay, aber ein ziemlich einfaches Styling, das ich eingerichtet habe. Also werden wir diese Digitaluhr von Grund auf neu bauen , okay. Also, als Erstes, was ich tun werde , ist, dass ich dieses STIF richtig habe, und ich muss natürlich die Benutzeroberfläche hier aktualisieren Aber bevor wir die Benutzeroberfläche aktualisieren, brauchen wir Zeit und wir müssen Zeit in Form von Status speichern, richtig? Also sage ich const, ich sage Zeit. Ups, das habe ich verpasst. Also sage ich hier Zeit und festgelegte Zeit. Jetzt sage ich hier natürlich „Status verwenden “, ok. Und ich werde das auf ein neues Datum initialisieren Okay? Etwas wie das hier. Okay. Also, welches neue Datum auch immer zurückgegeben wird , es ist das, womit es initialisiert wurde . In Ordnung. Jetzt ist das erledigt. Okay? Also hier drüben, ich werde den Use-Effekt hier nutzen. Jetzt, wo wir EffectHok verwenden, werden wir dieses Mal aktualisieren müssen, diesmal jede Sekunde, diesmal jede Sekunde Und im Grunde würden wir das tun, weil dafür die aktuelle Uhrzeit benötigt wird, Und die Zeit ändert sich jede Sekunde. Also müssen wir diese Straßenvariable jede Sekunde aktualisieren. Okay? Wir werden auch Aufräumarbeiten machen, also lass uns das machen Wir werden hier also „ Effekt verwenden“ sagen. Okay. Ich werde eine Pfeilfunktion haben. Okay, so etwas. Okay. Das ist die Pfeilfunktion, und hier drüben habe ich ein Abhängigkeits-Array. Okay. Also ja, das ist erledigt. Und was wir tun müssen, ist hier, ich füge etwas Code hinzu. Also hier sage ich Cons Timer ID. Okay. Also ich erhalte eine Timer-ID oder lass uns das später hinzufügen. Okay? Also, was wir zuerst tun werden, ist Intervall festlegen zu sagen. Okay. Ich benutze hier das festgelegte Intervall. Okay. Also, innerhalb des festgelegten Intervalls werde ich diese Pfeilfunktion haben , also will ich nicht, okay? Ich will diese Pfeilfunktion nicht. Ich werde hier sagen, Zeit festlegen. Okay, Zeit festlegen. Also habe ich die Pfeilfunktion. Tatsächlich habe ich gesagt, ich will keine Pfeilfunktion. Ich habe die Pfeilfunktion, aber ich entferne einfach die lockigen Brisen , damit es ein bisschen sauberer aussieht Okay, ich kann den Code auch hier drüben schreiben lassen. Also ich kann hier sagen, Zeit festlegen. Also aktualisiere ich den Status mit festgelegter Zeit. Ich sage neues Datum, okay, so etwas, und ich kann hier tatsächlich tausend hinzufügen. Okay, hier kann ich tausend sagen, so etwas in der Art. Okay. Ups, ich habe wohl eine runde Klammer verpasst, feste Zeit, festgelegte Zeit, Nutt, so etwas Okay, oder 1 Sekunde. Okay, das wird also nicht hierher kommen. Das ist das Intervall. Okay? Also das ist das Intervall. Ich werde herkommen. Ordnung? Also das ist erledigt Okay. Also das ist es. Lass mich erklären, was ich gerade gesagt habe, okay, nur für den Fall, dass du dich fragst, was passiert ist. Okay? Also habe ich hier die Funktion „Intervall einstellen“ verwendet . Was ist nun das eingestellte Intervall? Ich gebe einfach wieder festgelegtes Intervall ein. Set Interval ist im Grunde eine JavaScript-Funktion, okay? Es ist eine Funktion, die im Grunde wiederholt wird und den darin enthaltenen Codeblock nach einem festgelegten Zeitintervall wiederholt ausführt . Okay? Und welches Intervall legen wir fest? Sie können hier also ein beliebiges Intervall einstellen, das in Millisekunden angegeben wird Wenn ich hier also 1.000 eingebe, bedeutet das Okay. Also, was bist du bereit zu tun? Was ist das Ziel hier? Wir wollen die Zeit jede Sekunde aktualisieren, oder? Wir wollen die Zeit jede Sekunde aktualisieren, oder? Die Uhrzeit sollte jede Sekunde aktualisiert werden, weil sich die Zeit jede Sekunde ändert und ich eine dynamische Uhr baue, oder? Also verwende ich hier die Funktion Set Interval , Set Interval Function. Sie können sehen, wenn ich den Mauszeiger darüber halte, wahrscheinlich erhalte ich die Dokumentation Plant die wiederholte Ausführung des Callbacks alle Millisekunden Verzögerung Das ist also der Rückruf, den wir haben. Ich kann das auf eine einzige Zeile vereinfachen. Ich kann die geschweiften Klammern loswerden , weil es nur eine Codezeile gibt Also werde ich das einfach los. Das ist ziemlich einfach. Okay. Ich hoffe, das ist ziemlich klar darüber, was passiert. Intervall festlegen, alles klar. Was wir dann tun müssen, ist, ein festgelegtes Intervall festzulegen. Wir aktualisieren hier die festgelegte Zeit, und zwar alle tausend Millisekunden Dann müssen wir die Timer-ID hier drüben abrufen , weil wir eine Bereinigungsfunktion hinzufügen werden Also sage ich Const Timer, ID, so etwas Okay. Also das ist die ID des Timers, den wir haben, okay? Und dann werde ich eine solche Cleaner-Funktion haben. Okay. Ich füge eine Pfeilfunktion hinzu und sage Intervall löschen. Ups. Ich sage klares Intervall Okay, und ich sage Zeit oder ID. Also lösche ich das Intervall. Im Grunde ist das eine Aufräumaktion , die ich mache. In Ordnung. Also das ist der Code, um die Uhrzeit quasi jede Sekunde zu aktualisieren . Das haben wir hier geschrieben. Okay? Das ist es, was es tut. Also, hier drüben, was wir tun können, ist hier, wenn du herkommst, können wir die Uhrzeit anzeigen. Lassen Sie uns sehen, was wir als Ausgabe sehen. Okay, die Ausgabe wird nicht gut sein. Es wird nicht benutzerfreundlich sein, aber ich möchte es dir trotzdem zeigen. Also, wenn ich das speichere, Hoppla. Also gibt es hier buchstäblich keine Ausgabe. Es wird also nichts angezeigt, weil wir versuchen , das Datum hier anzuzeigen , und wir bekommen eine Fehlermeldung, okay? Sie müssen dieses Datum also in eine Zeichenfolge umwandeln. Also ich würde sagen, wir haben hier eine Funktion zur lokalen Zeitzeichenfolge. Okay. Und ich kann das speichern und du kannst sehen, wie die Zeit hier angezeigt wird , oder? Das wird also jede Sekunde aktualisiert, oder? Nun, was wir tun müssen, ist, das zu formatieren, richtig. Also ich würde sagen, das ist okay, aber ich brauche eine bessere Kontrolle über die Art der Formatierung , die ich für meine Bewerbung haben möchte , oder? Also, was ich hier machen werde, ist, dass ich eine Funktion haben werde. Ich werde sagen, formatiere es, Zeit und hier. Also das ist eigentlich, das macht einen Job. Okay? Es ist keine Funktion, aber es formatiert die Uhrzeit im richtigen Format. Okay? Also können wir es ohne Funktion machen. Also sage ich hier Zeit Punkt zwei lokale, zwei lokale Zeitzeichenfolge. Okay. Und wir können sowohl das lokale als auch das Format weitergeben , okay? Also gebe ich das Lokal als EN US weiter, okay? Und hier spezifiziere ich die Formatierung, richtig. Also hier kann ich R, oder Doppelpunkt sagen, ich sage zweistellig, ungefähr so. Wir können diesem Format folgen. R, Doppelpunkt, um es hier zu graben. Also dieses Format muss in einem Paar geschweifter Klammern passen , richtig Also das ist etwas, das ich hier übersehen habe. Okay, R bis Ziffer. Ich komme her. Das ist von Minute zu Ziffer, ungefähr so, und das wird Sekunden dauern, bis wir es hinter uns lassen. Okay. Ups, so etwas in der Art. Sobald Sie es speichern, werden Sie keine Änderungen sehen, da wir die Uhrzeit anzeigen. Sie müssen die formatierte Uhrzeit anzeigen. Also musst du herkommen und die ganze Sache loswerden und du kannst das Format zu gegebener Zeit anzeigen Okay? Hoppla. Die zweite wird also nicht angezeigt, weil wir hier wahrscheinlich ein Komma hinzufügen sollten Und lass mich sehen. Okay, es ist also eine Sekunde und keine Sekunde. Okay. Nur S hat den Unterschied gemacht, oder? Sie können jetzt sehen , dass es im Format ist. 08. Also früher war es nicht 08. Es war 8980 21:06 Uhr also habe ich jetzt eine bessere Kontrolle über die Formatierung, oder? Also ja, so läuft die Anwendung, okay? Und ich gebe dir nur einen Überblick darüber, was hier passiert , okay? Also als Erstes, wie diese Anwendung funktioniert, wir haben eine Komponente Oben erstellen wir einen Zustand, der den ursprünglichen Zustand der Uhrzeit bis zum aktuellen Datum und zur aktuellen Uhrzeit beibehält , okay, dieses neue Datum verwenden. Okay? Und wir haben diesen Zeitstatus und die Zeitfunktion so eingestellt , dass der Status aktualisiert wird, wenn er sich ändert. Wir haben hier einen riesigen Effekthaken, okay. Und innerhalb von Use Effect Hook, also Use Effect Hook führt im Wesentlichen den darin enthaltenen Code aus, nachdem die Komponente gerendert wurde, okay? Und in diesem Fall ist es dafür verantwortlich, den Timer zu starten , der die Uhr jede Sekunde aktualisiert, okay? Ich erinnere mich, dass wir hier eine leere Abhängigkeit haben, und sie läuft sofort nachdem die Komponente gerendert wurde, okay? Was hier passiert , ist, dass wir die Funktion „ Intervall einstellen“ verwenden. Was macht das eingestellte Intervall nun? Set Interval ist eine Funktion , mit der wir Code nach einem festgelegten Zeitintervall wiederholt ausführen können. Okay? Und hier ist das Zeitintervall, das wir festgelegt haben, 1.000 Millisekunden, was 1 Sekunde entspricht Okay? Und wir haben eine Bereinigungsfunktion, die das Intervall anhand der Timer-ID löscht, die wir haben, und wir formatieren das Datum Entschuldigung, wir formatieren die Uhrzeit unser eigenes gewünschtes Format, und ich zeige die Formatzeit Also, was passiert, ist jedes Mal, wenn die Komponente neu gerendert wird, okay? Also jedes Mal, wenn die eingestellte Zeit eingestellt ist, wird die Funktion hier aktualisiert. Der Status ist aktualisiert, die Komponente wird neu gerendert, okay. Und jedes Mal, wenn diese festgelegte Zeit aufgerufen wird, wird die Zeit aktualisiert, und wenn die Zeit aufgerufen wird, wird die formatierte Zeit aktualisiert Und wann immer die formatierte Uhrzeit aktualisiert wird, sehen Sie den aktualisierten Wert Okay. Also so funktioniert die ganze Sache. Immer wenn sich der Zeitstatus ändert, wird die Komponente erneut gerendert und die neu formatierte Uhrzeit wird angezeigt Okay? Und dieses wiederkehrende Ding wird durch die Funktion „Intervall setzen“ festgelegt, weil diese Funktion selbst den Zeitstatus jede Sekunde aktualisiert. Okay? Und wann immer sich der Zeitstatus ändert, wird die Komponente neu gerendert und die formatierte Zeit wird angezeigt, und der Vorgang wiederholt sich, sodass die Uhrzeit ständig in Echtzeit aktualisiert wird Ordnung. Also ich hoffe, das ist gut. Und jetzt müssen wir ein bisschen verschönern, würde ich sagen, hier drüben, richtig Was wir also tun können, ist, das CSS zu verbessern , sodass ich diesen Willkommensgruß ganz oben loswerden kann Okay. Und ich kann ein TIF hinzufügen. Ich nenne es Klassenname und ich nenne es Clock Container. Also das ist ausschließlich zum Stylen hier drüben, okay? Du kannst hier noch ein Tif hinzufügen. Ich kann TIF sehen. Okay. Und ich kann das bewegen, das hier drinnen drüben. Okay, so etwas in der Art. Okay. Und hier drüben im Uhrcontainer sage ich Klassenname als Uhr, ungefähr so. Okay. Jetzt müssen wir etwas CSS hinzufügen. Ich werde zu App Dot CSS wechseln. Ich habe hier ein paar grundlegende CSS. Okay, was ich loswerden werde. Okay. Ich werde es loswerden. Und ich sage Clock Container. Sowas in der Art, und ich sage Flaggenaufsteller hier drüben. Okay, richten Sie den Inhalt als Mittelpunkt und richten Sie die Elemente als Mittelpunkt aus. Okay, ich kann die Höhe einstellen. Okay. Und wir werden eine Hintergrundfarbe haben. Okay, also Hintergrundfarbe, ich habe einen Farbcode dafür. Okay, also ich sage Hash und 2a2c3, vier. Okay? Du kannst eine Farbe deiner Wahl haben. Okay. Jetzt, nach der Aktualisierung der Farbe, ist die Uhr kaum sichtbar. Das ist absolut okay. In Ordnung, wir werden auch die Uhr aktualisieren. Ich sage hier Uhr. Okay. Ich stelle hier eine Schriftgröße ein. Okay. Schriftgröße von, äh, vier ERM. Okay, äh, und ja, die Uhr ist jetzt größer. Okay, Familie, Schriftfamilie von Ich füge hier eine Familie hinzu. Das kann die sein, und ich sage Farbe. Okay. Also können wir eine Farbe haben. Und dafür habe ich einen Farbcode. Also sage ich 61, DAF P. Okay? Sie können die Farbe Ihrer Wahl hinzufügen. Das ist absolut okay. Und Hintergrundfarbe. Ich setze die Hintergrundfarbe auf Hash. Ups. Also das ist Hash 202, drei, 202, drei, zwei A. Okay. So wie das hier. Es liegt also ganz bei Ihnen, wie Sie damit umgehen wollen. Okay? Und ich stelle die Polsterung hier drüben auf. Polsterung von 20 Pixeln und 40 Pixeln. Okay. Etwas wie das hier. Okay. Also werde ich ein bisschen rauszoomen, damit das okay aussieht. Ich bin extrem vergrößert. Okay. Das sieht cool aus. Es gibt weiße Ränder, außerdem werde ich diese weißen Portale loswerden, also werde ich hier drüben einen Stern haben, Rand von uh uups Also ein Rand von null Pixeln, und du kannst sehen, dass die weißen Portale weg sind Okay? Also das ist erledigt. Polsterung, ich kann einen Randradius hinzufügen, okay, einen Pulverradius von, sagen wir, zehn Pixeln, okay? Und ja, das ist es. Ich glaube, das ist es, oder? Das ist also unsere Uhr im Vollbildmodus, wie Sie hier sehen können, okay? Und ich hoffe, dir hat dieses Tutorial gefallen und ich hoffe, du hast viel gelernt, okay? Ich hoffe, das war nützlich und bis zum nächsten Mal. 15. Eintauchen in die VerwendungRef: Der stille Wächter des Staates: Hallo, da. Jetzt ist es an der Zeit, dass wir anfangen über den Use Ref Hook zu sprechen. Jetzt wird Uf Hook auch von React bereitgestellt, um mit funktionalen Komponenten zu arbeiten , und er unterscheidet sich von Use State Hook, den wir haben. Uf-Hook wird zum Speichern von Werten verwendet, unterscheidet sich jedoch ein wenig von der Art und Weise, wie der US-Staat ihn verwaltet. Mit Uf können Sie Werte beim Rendern beibehalten. Das unterscheidet sich vom US-Status, in dem Sie, wenn Sie den Wert aktualisieren, erneutes Rendern auslösen können, oder? Eine weitere Sache mit useref ist dass die Komponente nicht erneut gerendert wird. Also, wie ich gerade sagte, der Benutzerstatus würde ein erneutes Rendern auslösen. Okay? Sref hingegen bewirkt nicht, dass die Komponente erneut gerendert wird, wenn sich der Wert ändert Okay? Um es also in einen Kontext zu stellen oder um es einfach auszudrücken, verwenden Sie Ref Hook in React, um den Wert beim Rendern beizubehalten, ohne dass die Komponente erneut gerendert wird Rendern beizubehalten, ohne dass die Komponente erneut , wenn sich der Wert ändert Okay? Also nochmal, es wird verwendet, um Werte beim Rendern beizubehalten, ohne dass die Komponente gerendert wird , wenn sich der Wert ändert Und eines der wichtigsten Dinge, warum SRF verwendet wird oder wo SRF verwendet wird, ist das Speichern von Dom-Referenzen So können Sie den Verweis auf ein Dom-Element direkt speichern und damit interagieren Sie können diesem Eingabefeld beispielsweise den Fokus auf ein Ereignis legen , okay? Sie können scrollen und so weiter. Das ist also einer der Anwendungsfälle für uRF und das ist einer der Hauptanwendungsfälle, in denen es häufig verwendet wird, okay? Es kann verwendet werden, um Werte zu speichern, für die kein erneutes Rendern erforderlich ist oder bei deren Aktualisierung kein erneutes Rendern Okay? Das entspricht der Definition, wie es da steht, okay? Möglicherweise möchten Sie beispielsweise eine Timer-ID, einen vorherigen Wert oder einen anderen Wert speichern , der beim Rendern beibehalten werden muss , aber das Benutzeroberflächenupdate nicht auslöst Okay? Also das ist US Ref Hook für Sie, und lassen Sie uns es in Aktion ausprobieren oder lassen Sie uns das in der Praxis sehen, wie es funktioniert. Also, was ich hier machen werde, ist hier, ich habe ein React-Projekt, okay? Es ist ein Projekt, das mit Weizen erstellt wurde, und ich habe hier eine funktionale Komponente, App Dot JSX, die hier in Main Dot JSX gerendert wird , okay? Auf das Wurzelelement. In Ordnung. Also werde ich das nutzen, um Code einzugeben. Es hat nur ein einfaches JSX, das es zurückgibt. Im Moment hat es ein TIV mit H einem Tag. Lerne, so zu reagieren, wie du es auf der rechten Seite siehst , richtig? Also, was ich hier machen würde, ist , Rf hier drüben zu benutzen, okay? Also sage ich const. Sag mein Rf hier drüben und ich sage, benutze Ref Und Sie können sehen, dass dieses Ding anstelle von Use Ref vorgeschlagen wird. In dem Moment, in dem ich das auswähle, würdest du sehen , dass oben eine Eingabe hinzugefügt wird. Okay? Sie können sehen, dass dies die Eingabe ist. Und das wird wie jeder andere React-Hook importiert , den Sie uns gegeben haben, verwenden Sie Effact und so Okay? Wenn Sie mit der Maus darüber fahren, können Sie sehen, dass use ref ein Objekt mit mehreren Referenzen zurückgibt Dessen aktuelle Eigenschaft wird mit dem vorherigen Argument initialisiert, das ist der Anfangswert, und das zurückgegebene Objekt bleibt für die gesamte Lebensdauer der Komponente bestehen gesamte Lebensdauer der Darüber haben wir gesprochen. Wir haben noch nicht über das Objekt hier gesprochen, das Referenzobjekt, von dem es spricht, okay? Es heißt, dass es eine aktuelle Eigenschaft hat. Das zeige ich dir gleich. Okay? Aber es heißt, dass das zurückgegebene Objekt für die gesamte Lebensdauer der Komponente bestehen bleibt, und wie gesagt, es bleibt beim Rendern bestehen Es ist nützlicher als das F-Attribut. Es ist praktisch, um jeden veränderbaren Wert beizubehalten , ähnlich wie Sie Instanzfelder in den Klassen verwenden möchten . In Ordnung. Lassen Sie uns also einen Blick darauf werfen, wie Sie es nutzen können. Also habe ich uRF und ich gebe hier einen Wert ein. Okay, ich sage Hallo. Und ich sage hier Wold, so etwas in der Art, und füge ein Semikolon In Ordnung. Also das ist erledigt, ja, wir haben E Ref erstellt. Okay? Also das ist der Anfangswert, den ich übergebe, und das ist es, was myRF gerade hält Okay? Also, was wir tun werden, ist, das einfach auf die Konsole zu drucken und wir werden sehen, was dieser MRF gerade in der Hand hat, okay? Also lasse ich einfach meine Referenz ausdrucken. Okay. Und ich werde das speichern. Okay. Und hier gehe ich zur Konsole. Okay, und ich werde so gehen. In Ordnung. Lass uns sehen, was es hat. Also okay, es druckt es zweimal, und das liegt nur an dem strikten Modus in min Dot Jx, dass unsere Anwendung zweimal gerendert wird, okay? Aber wenn Sie das entfernen, okay, Sie werden sehen, dass es einmal gedruckt wird Okay? Also, wenn Sie dieses Objekt erweitern, werden Sie sehen, dass das Objekt hier drüben aktuell ist. Okay. Und Sie können sehen, dass es aktuell ist, und lassen Sie mich ein bisschen herauszoomen, damit wir es deutlich sehen. Okay. Also ja, Sie können sehen, dass es aktuell ist und welchen Wert wir auch immer eingegeben haben, hallo Welt, das ist es, was Sie hier sehen. Okay? Also, was es jetzt hat, ist, lass mich hier drüben drucken, okay? Es hat so etwas. Es ist ein Objekt wie dieses, und es enthält aktuelle Eigenschaften, und der Wert von current ist Hello World, ungefähr so. Also das ist es, was MrF gerade in der Hand hält. Das ist das Objekt, das es gerade hält, und das ist es, was es hier auf die Konsole druckt Sie können sehen, dass es sich um ein Typobjekt handelt. Richtig? Und wenn du mit dem Wert für use ref herumspielen willst , musst du mit der aktuellen Eigenschaft arbeiten, okay? Im Moment hat die aktuelle Eigenschaft also Hello World Y, weil ich sie hier mit Hello World initialisiere. Okay. Wenn Sie also ein Serf-Objekt drucken, werden Sie ein Objekt mit einer einzigen Eigenschaft sehen , die aktuell ist, und die aktuelle Eigenschaft speichert den Wert dessen, was Sie zugewiesen haben, z. B. ein Dom-Element oder einen Wert oder einen Anfangswert Okay? Sie können auf den in der Use Ref gespeicherten Wert zugreifen, indem Sie Current hier verwenden . Okay? Also ja, das ist ungefähr Use Ref. Also, was ich tun würde, ist, in Sot zu kommen . Das ist was es ist. Und ich zeige Ihnen, wie Sie das in der TSX nutzen das in der TSX Also hier, sagen wir mal, wenn ich Hello World drucken möchte, damit ich diese beiden lockigen Klammern verwenden kann , kann ich meinen Schiedsrichter sagen Und wie würden Sie auf den Wert zugreifen? Du würdest Punktstrom sagen? Okay. Wenn du das speicherst, siehst du Learn React, Hello World, richtig? Also egal, welchen Wert du hier eingibst, okay, ob es Null, Eins, Hallo Welt oder was auch immer es ist, du kannst mit current darauf verweisen. Ich hoffe, das macht Sinn. Was ich jetzt tun würde, ist, auf diesem Beispiel aufzubauen, o, und ich werde das einfach hier klarstellen. Okay. Lassen Sie mich auf dieses Beispiel aufbauen. Und jetzt habe ich meinen Schiedsrichter, okay. Also werde ich das in Ref Count umbenennen, okay? Also das ist ref und hier, anstatt ref zu verwenden und mir wird eine Zeichenfolge übergeben, werde ich Null übergeben. Okay. Ich werde das hier loswerden, das Punkteprotokoll für die Konsole und das auch. Okay? Also, was wir hier machen werden, ist, dass wir einen Referenzzähler haben, RF hier drüben, okay? Und ich füge auch einen Stern hinzu. Okay, also ich sage hier Const und ich werde sehen, wie Stet zählt Okay. Also habe ich die Anzahl der Schiedsrichter. Ich habe Steed Count und ich habe Steed Count hier eingestellt. Und ich sage use state und ich initialisiere diese beiden Okay. Also das ist auch erledigt. Okay? Also verwenden wir ref und use State, die auf Null initialisiert werden. In Ordnung. Nun mache ich das in der Benutzeroberfläche hier drüben. Okay. Ich werde dieses H loswerden, richtig, und ich addiere P hier drüben. Okay. Ich sehe State Count hier drüben. Okay. Und ich sage State Count. Etwas in der Art. Okay. Auf der Benutzeroberfläche auf der rechten Seite sehen Sie, wie der Bundesstaat zählt. Und hier drüben füge ich die E-Taste hinzu, etwa so. So wie das. Und für Button sage ich Inkrement, State Count. Und so Okay. Hier dieser Knopf. Okay. Und was ich tun würde ist, wenn der Benutzer auf Increment State Count klickt, erhöhe ich den Statuswert um eins Ordnung. Also was ich tun kann, ist const zu sagen, ich werde eine Funktion haben, weil ich eine Funktion brauche, um diesen inkrementellen Zustand zu handhaben , count Anzahl der Bundesstaaten plus eins hier drüben. Okay. Und ich werde das speichern. Okay? Also, wir haben hier die Statuszählung erhöht und bei einem Klick darauf würde ich sagen, auf Klick Ich füge Hoppla hinzu. Ich werde die Anzahl der Bundesstaaten erhöhen. Oh, das muss also hinzugefügt werden. Okay? Also ja, ich werde es erhöhen und Sie können sehen, dass die Anzahl der Bundesstaaten auf diese Weise erhöht wird . In Ordnung Nun füge ich auch eine grobe Zählung hinzu, oder auf ähnliche Weise, und ich kopiere das einfach. Ich füge es hier ein. Okay. Und was ich machen würde, ist zwischenstaatliches Zählen, ich sage mal, wenn ich zähle hier drüben. Okay. Und das zählt. Wie zeigen wir die Anzahl der Referenzen an? R zählt den aktuellen Punktwert, richtig? Weil es der Strom ist, der den Wert hält. Ref count bedeutet, ein Objekt mit der Eigenschaft current als Eigenschaft zu haben. Ordnung. Und ich sage, die Anzahl der Schiedsrichter erhöhen. Diese Funktion gibt es noch nicht Wir müssen das erstellen und ich werde es speichern. Okay, die Ausgabe ist also weg, weil diese Funktion nicht existiert, was absolut in Ordnung ist. Ich repliziere das hier und hier, anstatt State, Count zu inkrementieren, sage ich hier Increment Ref Count Okay. Und ja, alles kommt in einer Zeile. Okay. Also kann ich das in eine neue Zeile verschieben, indem ich einfach PR hinzufüge. Ich werde das einfach hier loswerden. Oder ich kann wahrscheinlich, es tut mir leid, das ist keine gute Idee. Ich werde stattdessen einfach BR hier loswerden. Ich werde hier zu CSS kommen. Ich habe Display Flex. Okay, das sind grundlegende Fälle, die ich habe. Okay. Für DIV habe ich die Anzeige von Flex, und ich werde auch die Richtung festlegen, die Flex-Richtung der Spalte. Okay, und das stellt alles vertikal ein. Ich denke, das ist hier die beste Lösung. In Ordnung. Und ja, ich habe Inkrement Count und Increment Ref Count für Inkrement Ref Count, ich muss sagen, F Count, Toto, ich muss Also wenn zählt, ist Tt aktuell und wir müssen sagen, dass Plus gleich eins Okay. Also ja, das ist eine Kurzform, Dinge zu tun Also gut. Und ich werde das speichern. Okay. Und lassen Sie uns sehen, wie das funktioniert. Sie können also sehen, wie der Bundesstaat vergrößert wird, okay? Wenn der Status erhöht wird, wird die ungefähre Anzahl unweigerlich erhöht, weil das nicht zu einem erneuten Rendern führt Okay? Aber wenn du hier Console Dot Log sagst und ich den Wert hier drüben eindrucke, wenn ich 1 Sekunde sage. Also, wenn ich grobe Zählung sage, richtig. Und ich sage es hier. Okay, derzeit in Dollar gezählt, etwa so und Semikolon. Ich werde das speichern Okay. Und das verursacht ein erneutes Rendern, sodass Sie sehen können, wie im Grunde die Zählung aktualisiert wurde. Aber wenn du herkommst, um es dir anzusehen, und wenn du das öffnest, geh zu Ups Gehe zur Konsole, so etwas. Ordnung. Ich sehe, dass Anzahl der Schiedsrichter nicht definiert ist, okay. Das war am Anfang ein Fehler. Es sollte jetzt nicht kommen, okay? Sie können also sehen, wie die Anzahl der Bundesstaaten erhöht wird und die Anzahl der Referenzen auf der Konsole gedruckt wird Okay. Also, falls das Rendern aus irgendeinem Grund verursacht wird, können Sie hier sehen, wie die Anzahl der Referenzen aktualisiert wird, oder? Andernfalls wird es einfach weiter inkrementiert und auf die Konsole gedruckt Es wird nicht auf der Benutzeroberfläche wiedergegeben , weil es nicht neu gerendert wird, oder? In dem Moment, in dem ich den Status hier aktualisiere, erfolgt das Rendern für die Komponente und die Anzahl der Referenzen wird aktualisiert. Ich hoffe, das macht Sinn, wie das funktioniert. Und das ist ein gutes Beispiel, um uns zu helfen den Unterschied zwischen dem Nutzungsstatus und dem Verwendungs-Rf zu verstehen , okay? Sie können also hier sehen, dass persist use Rf verwendet wird, um Werte beim Rendern beizubehalten, und es führt nicht dazu, dass die Komponente erneut gerendert wird, wenn sich der Und das ist es, was wir hier deutlich sehen, okay? Und wenn Sie testen wollen oder wenn Sie irgendeinen Code haben möchten , der beim erneuten Rendern ausgeführt wird, können Sie den Use-Effekt verwenden, um zu sehen , ob die Komponente hier neu gerendert wird. Ich sage hier Use Effect. Okay. Und ja, wie lautet die Syntax für Use Effect? Wir haben also eine Pfeilfunktion als ersten Parameter. Okay. Und dann habe ich eine Abhängigkeit wie diese. Okay? Also das ist die Funktion. Was ich jetzt tun werde , ist diesen Effekt bei jedem Rendern zu sehen oder auszuführen. Also werde ich die Abhängigkeit loswerden und hier in der Funktion sage ich hier Sperren. Oh, Hoppla, also logge das ein. Ich melde mich bei der Konsole an Was protokollieren wir auf der Konsole? Ich sage einfach, Komponenten neu rendern. Erneutes Rendern von Komponenten, ungefähr so. Speichern Sie das. Sie können sehen, dass es anfangs zweimal gerendert wird. Okay. Lass mich auffrischen. Aufgrund des strikten Modus, den wir im Haupt-JSix haben, wird es zunächst zweimal gerendert , was absolut in Ordnung ist Wenn Sie möchten, können Sie den strikten Modus nur für dieses Beispiel loswerden . Okay. Das mache ich. Wenn ich das speichere, kannst du jetzt sehen dass es nur einmal gerendert wird, oder? Wenn du zu app.j6 kommst, okay, es wird einmal gerendert Ich werde trotzdem eine Aktualisierung machen. Sie können sehen, dass es einmal gerendert wurde. Jetzt können Sie die Anzahl der Straßen erhöhen. Sie können sehen, dass die Komponente erneut gerendert wird , erneut gerendert. Je öfter Sie klicken, Sie klicken auf das Inkrement Street Count, und Sie werden sehen, dass die Komponente erneut gerendert wird, oder? Wenn Sie „Anzahl der Referenzen erhöhen“ sagen, sehen Sie, dass die Anzahl der Referenzen aktualisiert wird, aber Sie sehen nicht, dass die Komponente erneut gerendert wird, oder? Und wenn Sie die Anzahl eines Bundesstaates erhöhen. hier also, bevor Sie die Anzahl der Bundesstaaten erhöhen, Schauen Sie sich hier also, bevor Sie die Anzahl der Bundesstaaten erhöhen, einfach die Anzahl der Referenzen in der Benutzeroberfläche an Es ist Null, oder? Aber auf der Konsole ist die Anzahl der Referenzen 15, aber sie wird hier in der Benutzeroberfläche nicht wiedergegeben , weil die Komponente noch nicht neu gerendert wurde. Wenn Sie also „Statusanzahl erhöhen“ sagen, wird die Komponente erneut gerendert und der Referenzzähler wird aktualisiert. Lassen Sie mich darauf klicken und Sie werden sehen, dass die Anzahl der Referenzen aktualisiert wurde. Stimmt das? Also ja, und Sie können sogar sehen, wie das Protokoll gedruckt wird. Komponenten werden gerendert, oder? Verwenden Sie also Effect Hook, protokolliert die Komponente die jedes Mal neu gerendert wird, und das hilft uns zu beobachten, wann die Komponente bei welchem Ereignis tatsächlich neu gerendert wird , oder? Also ja, um es zusammenzufassen: Wenn Sie auf die Schaltfläche zum Erhöhen der Statusanzahl klicken , die Komponente erneut gerendert und Sie sehen in der Konsole das Protokoll Wenn Sie auf die Schaltfläche „Referenzanzahl erhöhen“ klicken, wird der Referenzzähler erhöht, aber die Komponente wird nicht erneut gerendert, sodass Sie die Sperre für den Verwendungseffekt der Referenzzähler erhöht, aber die Komponente wird nicht erneut gerendert, sodass Sie die Sperre in der Konsole hier nicht sehen , wenn Sie auf „Anzahl erhöhen “ klicken Ich hoffe, diese Demonstration ist wirklich hilfreich, um den Unterschied zwischen Use Ref und Use State zu verstehen Dies ist eine Verwirrung unter den Studenten. Es sorgt für große Verwirrung, okay, also bin ich bereit, den Verwendungswert zu speichern, sollte ich state oder Rf verwenden, okay. Beide haben ihre eigenen Vorteile, und ich hoffe, der Unterschied ist euch allen ziemlich klar , oder? Ich hoffe, Sie konnten dem folgen, und ich hoffe, das war hilfreich. 16. UseRef zum Leben erwecken: HTML-Elemente einfach verwalten: Jetzt ist es an der Zeit, dass wir uns ansehen, wie Sie Rf mit HTML-Elementen verwenden können Sie Rf mit HTML-Elementen verwenden In diesem speziellen Video werden wir also ein Beispiel haben, in dem wir us ref verwenden, um den Fokus beim Klicken auf eine Schaltfläche auf ein Eingabeelement zu lenken. Alles klar? Also zunächst, da wir Usef benutzen, was werden wir tun? Wir werden eine Eingabe-Referenz erstellen. Okay? Also sage ich konstante Eingabe Rf. Okay, ich werde use ref verwenden, um den Hook hier zu erstellen, und ich werde ihn vorerst auf Null initialisieren , oder? Und was ich hier machen werde, ist hier, ich werde ein Eingabeelement haben Okay, ich werde also Input haben. Etwas wie das hier. Und ich werde Text, Art von Text haben. Okay. Und ich werde Platzhalter haben Platzhalter steht für mich im Mittelpunkt. Okay, das ist ein Platzhalter , den ich habe. Okay, du kannst diesen Platzhalter sehen. Okay, der Fokus sollte also so auf einen Knopfdruck gelegt werden. Also brauchen wir auch den Button. Okay, also füge ich hier einen Button hinzu. Okay. Also sage ich Button. Okay. Und auf Klick und hier werde ich das mit einer Funktion verknüpfen, aber die Funktion existiert nicht, also lasse ich das vorerst leer und sage Fokus. Ups, konzentrier dich, so etwas. Okay. Und ja, wenn wir auf diese Schaltfläche klicken, müssen wir diese Funktion Focus Input aufrufen. Nennen wir es Focus-Eingabe. Ich komme hierher und definiere diese Fokuseingabe. Okay? Also sage ich Const, Focus Input. Okay. Und ich sage, ich werde hier die Pfeilfunktion haben. Und ja, diese Funktion macht nichts. Aber klicken Sie darauf, der Fokus sollte hierher kommen. In Ordnung. Also, was wir jetzt tun werden, ist, Input Ref Input Ref Current Dot Focus zu sagen . Okay. Also mache ich jetzt davon Gebrauch, okay? Und was ist Input Ref? Eingabe ref ist gerade auf Null initialisiert . Es ist momentan Null Okay? Also, wie zeigen Sie Input-Ref auf dieses Eingabefeld hier? Okay? Also, was Sie hier tun würden, ist, Ref zu sagen. Sie werden hier die Ref-Eigenschaft verwenden und ich sage Input Ref. Das ist es. Okay. Okay, in dem Moment, in dem du das hier machst, okay? Die eingegebene Referenz wird den Verweis auf diese spezielle Eingabe hier haben. Okay? Das kannst du dir ansehen. Also sage ich Console Dot Log. Das ist der beste Weg, um zu sehen, was ein bestimmtes Element enthält, oder? Ich sage Input Ref. Ich drucke die Eingangsreferenz. Okay? Lassen Sie uns das für eine Weile kommentieren, okay? Und lassen Sie uns zur Konsole gehen. Gehen wir zur Konsole. Okay? Also siehst du, okay, 1 Sekunde. Also das ist eine Ausgabe , die ich sehe. Okay. Also im Moment sehe ich nichts auf der Konsole. In dem Moment, in dem ich Fokus sage, werden Sie sehen, dass aktuell das Eingabeelement enthält. Sie können sehen, ist das Eingabeelement. Und wenn ich das Eingabeelement erweitere, können Sie sehen, dass es alle Eigenschaften oder Attribute der Eingabe hier hat. Okay. Das ist also das gesamte Eingabeelement , das Sie sehen, oder? Also ja, damit werden wir herumspielen, okay? Also bezieht es sich auf dieses Eingabeelement, oder? Also werde ich das einfach hier kommentieren. Und stattdessen werde ich das aktivieren. Okay, ich speichere das und lasse uns hier eine Aktualisierung durchführen. Okay? Wenn ich Fokus sage, werden Sie sehen, dass der Fokus auf das Textfeld gerichtet ist, oder das Eingabefeld, sollte ich sagen Okay? Ich entferne den Fokus. Wenn ich Fokus sage, wirst du sehen, dass der Fokus hier drüben herauskommt. Jetzt kannst du viel mehr tun, okay? Anstatt sich nur zu konzentrieren, können Sie hier sogar die Farbe aktualisieren. Also kann ich hier Fokus und Highlight hinzufügen. Okay? In Ordnung. Und hier, nach dem Fokus, kann ich sagen, dass die Eingabe Referenz, Punkt, aktueller Punktstil , Punkt, Hintergrundfarbe entspricht. Ich kann jede Farbe hinzufügen, Grau, welche Farbe auch immer Sie möchten Und ich werde das speichern. Und wenn ich Fokus und Helllicht sage, wirst du sehen, dass es grau Ich kann es hier lassen. Grau sieht zu komisch aus. In Ordnung. Also ich kann sagen, konzentrieren und Sie können sehen, dass es gut funktioniert, oder? Und Sie können auch mehrere Referenzen in einem Programm haben. Wenn Sie also mehrere Eingabefelder haben die Sie den Fokus verschieben möchten, können Sie mehrere F haben. Okay. Lassen Sie mich auch dafür ein Beispiel zeigen. Okay? Also ich kann das als Input-Ref bezeichnen und ich kann hier drüben Ref als nächstes hier eingeben. Okay. Also nenne ich das als Nächstes. Okay. Und was ich tun kann, ist, das hier zu duplizieren. Okay. Dupliziere das und ich kann hier die Referenz als nächstes eingeben. Okay. Fokussieren Sie mich, konzentrieren Sie sich auf die Höhe und statt auf Input als Nächstes, so etwas Okay? Also habe ich die Ref- und die OnClick-Funktion aktualisiert. In Ordnung. Und hier brauchen wir auch diese Funktion. Also werde ich das einfach hier duplizieren. Okay, konzentriere dich als Nächstes auf die Eingabe und ich werde diesen Kommentar hier loswerden. Okay. Und anstatt hier die Referenz einzugeben, werde ich als Nächstes die Referenz eingeben, ungefähr so. Sie können den Fokus und das sehen, den Fokus und das. Sie können sehen, dass beide auf die gleiche Weise funktionieren. Du kannst es sehen, oder? Sie können sogar eine Taste haben, um den Fokus zurückzusetzen Dadurch werden der Fokus und der Stil für jeden von ihnen zurückgesetzt . Also mache ich das einfach und zeige es dir. Okay, also ich nehme das. Ich füge noch einen Button hinzu. Ich sage Reset. Okay. Es ist ein Reset-Knopf. Okay. Und lassen Sie uns den Fokus neu setzen. Okay. Also beim Klicken verknüpfe ich es mit einer Reset-Fokus-Funktion. Jetzt existiert Reset Focus nicht, also werde ich das einfach duplizieren. Okay, und ich nenne das Reset Focus, so etwas wie das hier drüben. Okay. Und dann würde ich sagen, Ref Current Style Dot Background eingeben. Okay. Ich sage Input Ref, Hintergrund im aktuellen Stil, ich sage hier Weiß, und das wird auch weiß sein, das nächste, richtig? Okay. Und ja, damit ich sehen kann, konzentrier dich darauf, konzentrier dich darauf. Lass mich auffrischen. Also fokussiere das Licht, konzentriere dich darauf und dann sehe ich Reset. Sie können sehen, dass beim Zurücksetzen der Fokus verschwindet, oder? Ups, es ist Ruhe. Also habe ich einen Tippfehler gemacht Eigentlich ist es zurückgesetzt, okay. Ordnung. Das sieht cool aus. Konzentriere dich darauf, konzentriere dich darauf und dann wird es zurückgesetzt. Du kannst es sehen, oder? Dies ist also einer der Anwendungsfälle, und dies ist einer der häufigsten Anwendungsfälle in denen Serf Hook verwendet wird Daher wird Serf Hook häufig verwendet. Wenn Sie den Code online lesen, jede Art von Reaktionscode, würden Sie feststellen, dass er hauptsächlich mit HTML-Elementen verwendet wird um mehr Kontrolle über das Dokumentobjektmodell zu erlangen Ordnung? Wie wir es hier machen, haben wir eine bessere Kontrolle darüber, was wir mit den Eingabeelementen hier machen, oder? Also ja, es geht um die Benutzerreferenz. Und noch eine Sache: Wenn Sie den Fokus und all das hier aktualisieren, führt das nicht dazu, dass die Komponente gerendert wird. Okay, denn das ist eines der Dinge bei der Verwendung von Rf. Richtig? Also, wann immer du das tust, wann immer du das änderst, kannst du einfach hier einen Use-Effekt haben, hier den Effect-Hook benutzen. Okay. Und ich kann hier einfach eine Pfeilfunktion ohne Abhängigkeitsarray haben. Okay? Ich kann hier einfach das Console Dot Log machen und ich werde Component Renter sehen Okay? Ich werde nur diese Nachricht haben. Ich werde das einfach speichern. Wenn du zur Inspektion gehst, okay. Sie werden sehen, wie die Komponente gerendert wird. Natürlich kommt es zweimal rein, und der Grund dafür ist, dass ich es im strikten Modus habe. Okay. Wenn ich Focus and Allied, Focus and Allied Reset sage, werden Sie sehen, dass die gerenderte Komponente nicht gedruckt wird, was bedeutet, dass das Rendern nicht stattfindet, oder? Und das ist eines der besten Dinge an Use Rf. Es ermöglicht Ihnen, der Webseite oder Ihrer Komponente Dynamik zu verleihen , ohne dass es zu erneuten Renderings kommt, oder Ich hoffe, das war hilfreich und ich hoffe, Sie konnten diesem einfachen Beispiel folgen 17. Prop Drilling auf den Punkt: Das Gute, das Schlechte und das Hässliche: Jetzt ist es an der Zeit, dass wir anfangen, über dieses Konzept des Propellerbohrens zu sprechen dieses Konzept des Propellerbohrens Also ich habe ein React-Projekt, und hier habe ich diese Datei namens App Dot CSX, zusammen mit App Dot CSS, okay? Und ich habe dieses grundlegende GSX, das ich zusammen mit einfachem CSS zurückgebe , das ich bereits hinzugefügt habe Was ist nun Propellerbohren? Beim Prop-Drilling handelt es sich also um eine Situation in React, in der Sie Daten von der Komponente der obersten Ebene durch die verschiedenen Schichten zwischengeschalteter Komponenten an eine untergeordnete Komponente weitergeben müssen Komponente der obersten Ebene durch die verschiedenen Schichten zwischengeschalteter Komponenten an eine untergeordnete Komponente , die sie tatsächlich Okay? Sie werden also ein Szenario haben, in dem Sie viele verschachtelte Komponenten haben , okay? Sie haben also Komponente eins, okay? Ups. Und dann hast du drinnen Komponente eins, du hast C zwei, okay? Und dann in C zwei, sagen wir, Sie haben C drei. Okay? Das ist eine Hierarchie , der du folgst, okay? Es gibt vielleicht mehr in der Hierarchie, aber ich gebe Ihnen nur ein Beispiel von drei. Und nehmen wir an, C drei benötigt Zugriff auf einige Daten. Okay? Also C eins wird diese Daten an C zwei weitergeben und C zwei wird diese Daten an C drei weitergeben. Nun, wenn es zehn Ebenen wie diese gibt, okay, die Daten müssen zehn Stufen durchlaufen. Das ist es, was das im Wesentlichen bedeutet. Und das ist Requisitenbohren , denn hier gibst du die Daten mit Hilfe von Requisiten weiter, okay? die Daten mit Hilfe von Requisiten weiter, okay Um noch einmal auf die Definition zurückzukommen: Prop Drilling ist eine Situation in React, Prop Drilling ist eine Situation in in der Sie Daten von der Komponente der obersten Ebene durch die verschiedenen Schichten von Zwischenkomponenten an eine untergeordnete Komponente weitergeben müssen Komponente der obersten Ebene durch die verschiedenen Schichten von Zwischenkomponenten an eine untergeordnete , die sie , die Okay? Nun, C zwei hier drüben , ist in diesem Fall eine Zwischenkomponente Wenn es zehn weitere Komponenten dazwischen gibt, werden diese alle Zwischenkomponenten sein Okay? Und dieses Ding ist bekannt als Requisitenbohren Okay? Nun, das passiert oft, wenn eine Komponente, die die Daten benötigt, tief verschachtelt ist C drei hier drüben ist also tief im Komponentenbaum verschachtelt Und die Daten müssen durch jede Komponentenschicht geleitet werden, auch wenn diese Zwischenkomponenten die Daten für ihren eigenen Gebrauch benötigen , oder? C two way benötigt die Daten also möglicherweise nicht. Aber da C drei die Daten benötigt und C eins sie an C zwei weitergegeben hat, muss C zwei sie auch an C drei weitergeben Okay? C zwei wird also auch Zugriff auf Daten haben. Auch wenn es es nicht braucht. Okay? Lassen Sie mich das ausprobieren oder lassen Sie uns das anhand eines Beispiels sehen. Wir werden also eine solche Komponentenhierarchie erstellen , okay. Wir werden ein paar Komponenten wie Komponente A, B haben, und dann werden wir am Ende eine Komponente haben, die die Daten tatsächlich benötigt. Okay? Und wir werden die Daten von der oberen Komponente zur unteren Komponente senden , okay? Oder die tief verschachtelte. Ordnung. Also das werden wir tun, okay? Und zunächst werde ich hier in der App tun , okay, ich beginne damit , eine Variable zu erstellen. Okay. Also sage ich hier Const. Okay, das sind also Daten , die wir weitergeben müssen. Ich sage Wert des Themas und ich sage Tako, nehmen wir an, wir haben diese Daten, einige Daten in einer Variablen, und das ist das Thema, das wir haben wollen, okay. Und wir müssen diese Daten an die letzte Komponente in der Hierarchie übergeben diese Daten an die letzte Komponente in der Hierarchie Ordnung. Und hier geben wir diesen JSX zurück, okay Aber was wir hier tun werden, ist, sagen wir, ich habe noch eine Komponente, okay? Also werden wir ein paar Komponenten erstellen, also werde ich das hier loswerden. Okay. Und ich werde den JSX hier runterfahren Okay? Nehmen wir an, ich habe noch eine Komponente, okay, ich habe eine Funktion. Okay. Und das ist Komponente A hier drüben. Sagen wir, okay? Und hier nutze ich Destrukturierung und ich sage hier Thema. Okay. Und ich werde hierher zurückkehren. Was gebe ich zurück? Ich schicke Komponente B zurück . Okay. Was ist Komponente B? müssen wir definieren. Okay? Und ich gebe das als Requisite weiter, dieses Thema, das ich von der obersten Komponente erhalten habe Okay? Genau das mache ich. Okay. Jetzt habe ich Komponente B hier unten, okay? Also sage ich Funktion. Okay, Komponente B, und ich nehme Destrukturierung Ich sage hier Thema. Okay. Und hier drüben sage ich Komponente zum Thema Rückkehr, okay? Okay. Das ist unsere Komponente , die die Daten tatsächlich benötigt, und ich übergebe sie mit Hilfe von Requisiten an die Komponente Okay, ich werde noch eine letzte Komponente haben, nämlich eine thematische Komponente Okay. Ich akzeptiere sie hier drüben. Okay, so etwas. Und hier drüben sage ich zurück, Div, okay? Ich sage, das aktuelle Thema ist, okay, und der Wert des Themes ungefähr so. Stimmt das? Das ist erledigt. Okay, also wir haben Komponente innerhalb von Komponente innerhalb von Komponente , und hier oben, okay, ich muss Komponente A hinzufügen, richtig? Also, was ich hier tun werde, ist , Komponente A zu sagen. Okay, Komponente A, und ich gebe das Theta Ich sage hier Thema, Thema. Okay. Und ich sage den Abschluss hier drüben. Okay? Also das ist erledigt, und Sie können sehen, dass das aktuelle Thema hier dunkel ist. Also hier, wie das organisiert ist , haben wir Komponente A, okay? Oder wir haben die App hier oben, richtig? App hier drüben. Okay. Dann haben wir Komponente A, also füge ich hier Komponente A hinzu, wir werden die Hierarchie im Grunde verstehen . Wir haben Komponente B. Okay, das ist Komponente B. Ich komme runter und füge einen Kommentar hinzu. Okay. Und das ist Komponente C. Also gibt es Komponente C 1 Sekunde? Nein. Stattdessen haben wir eine thematische Komponente. In Ordnung. Dann fügen wir hier C hinzu. Okay, also so sieht die Hierarchie aus. Sie haben die App-Komponente ganz oben, Komponente A, Komponente B und Komponente sind thematische Komponenten. Nun, diese Themenkomponente benötigt die Daten, okay? Braucht ein Theme hier drüben. Es braucht also Zugriff auf das Theme für welche Art von Verarbeitung auch immer, okay? Und die Daten existieren hier, okay? Das sind die Daten, wo Sie die Daten haben. App, richtig? Sie können also sehen die App hier den Wert eines Themes hat. Richtig? Und es kann es vom Benutzer oder wo auch immer bekommen. Okay. Aber im Moment lassen wir die Daten nur per Standardzuweisung unter Verwendung einer Variablen erstellen. Okay. Und wir brauchen sie, Komponente braucht Zugriff auf diese Daten. Es wird diese Daten also durch die Schichten oder durch die Komponenten mit Hilfe von Requisiten hier weiterleiten die Schichten oder durch die Komponenten mit Hilfe von Requisiten hier Also du siehst, ich packe. Ich habe diese Komponente A hier drüben, und ich übergebe das Thema an Komponente A, dann an Komponente B. Komponente A akzeptiert es und übergibt es an Komponente B. Dann akzeptiert Komponente B es und übergibt es an C, und Komponente C gibt es weiter oder tut mir leid, Komponente B übergibt es an die Komponente, nicht an Komponente C, und die Theme-Komponente ist akzeptiert und zeigt es an. Okay? Es zeigt also an, dass es jede Art von Verarbeitung ausführen kann, die Sie benötigen, okay? Und Sie können sehen, dass die Daten auf die richtige Weise weitergegeben werden. Okay? Ich kann sogar eine Art CSS hinzufügen, richtig, damit du sehen kannst wie diese Schichtung hier tatsächlich gemacht wird. Okay? Also, hier drüben, ich füge TIF hier hinzu. Okay. Und ich wickle das ganze Ding einfach in dieses steife O, so etwas Okay. Und hier drüben werde ich Stil sagen. Okay. Und wir können einen Stil für die Grenze haben. Also sage ich hier „Rand, cool“ in zwei Pixeln. Okay, zwei Pixel, durchgehend und schwarz, ungefähr so. Und ich nehme Polster hier drüben. Und die Polsterung besteht aus 20 Pixeln. Hm. So etwas, ups Es gibt also ein Problem. Okay? Also habe ich Stile hinzugefügt. Also Problem hier drüben. Okay. Lass mich sehen , was das Problem ist. Okay, es heißt also, es gibt kein Schlusskennzeichen für Dev. Also füge ich besser ein abschließendes Tag hinzu und speichere das. Sie können sehen, dass dies die Komponente ist , über die wir sprechen, oder? Wenn ich das ein wenig erweitere, können Sie sehen, dass das aktuelle Team hier dunkel ist. Okay. Was ich tun würde, ist, dass ich hier noch eine Sache hinzufügen würde. Okay? Wir können hier H2H2 hinzufügen. Hoppla. Oh, ich füge einfach ein neues H zwei hinzu, ok und so etwas Okay? Also ich sage App Componont App oder ich kann hier Parent sagen. Okay. Also das sagt uns , dass es ein Elternteil ist. Okay? Sie können sehen, wie das angezeigt wird. Okay. Also, was wir hier machen können ist, dass ich diese Dinge hier drüben kopiere. Okay. Ich füge sie für 1 Sekunde hinzu. Lass mich das Ganze kopieren und das wird einfach sein. Und ich füge das Ganze hier hinzu oder lasse mich auch die Rendite bekommen. Okay. Also hole ich mir das ganze Ding. Okay. Also rendern wir Komponente B. Denken Sie daran. Hier ändere ich das in Komponente B. Okay. Und das ist jetzt keine App, das ist Komponente A. Okay, Komponente A, und ich werde das loswerden. Oder du kannst hier Kind sagen. Okay, Sie können sehen, dass ein Elternteil Komponente A hat, das ist das Kind, oder? Und ich kann das tatsächlich hier drüben kopieren. Ich kann hier zur Themenkomponente kommen und ich kann die gesamte Rückgabe hier ersetzen. Okay. Und hier sage ich thematische Komponente, oder tut mir leid, Komponente für B. Okay, so, und hier kann ich eine thematische Komponente haben, so etwas. Ich werde das speichern. Sie können die App-Komponente A, Komponente B sehen, und dann haben Sie die letzte Komponente, die das Thema hier tatsächlich anzeigt. Okay. Also, was ich dafür tun würde, ist, dass ich tatsächlich zurückkehren würde. Ich würde diese Rückkehr hier hinzufügen. Okay? Das ist hinzugefügt. Und was ich tun werde, ist, dieses Div hier drüben auszuschneiden. Okay. Und wir fügen hier keine Komponente hinzu, also füge ich einfach dieses O und werde diese Rückgabe hier loswerden. Okay? Und das ist erledigt. Ich denke, das ist eine thematische Komponente, oder? Also füge ich das hier hinzu. Okay. Also das ist toll, ich sage Enkelkind hier drüben, oder? Und dann hier, dieser ist auf einer Sekunde. Ich werde dieses Enkelkind kopieren. Das ist Enkelkind, okay? Und das sind Eltern und Kind. Kannst du sehen? Okay. Also so kommt es rüber, richtig, und besser, lassen Sie mich hier zur Vollbildansicht übergehen. Okay, Sie können die Vollbildansicht hier sehen. Ordnung, Sie haben die App-Komponente, dann haben Sie die untergeordnete Komponente. Sie haben Komponente B und innerhalb von Komponente B haben Sie die thematische Komponente, die das Urenkelkind ist, oder? Und das ist das Thema , das angezeigt wird. Also, das Ding hier drüben ist bekannt als Requisitenbohren, oder? Was wir hier machen ist, dass wir einige Daten über verschiedene Komponenten hinweg weitergeben , okay, an die untergeordnete Komponente hier drüben, die Enkelkomponente hier drüben, die tief im Komponentenbaum verschachtelt ist, und die Daten werden durch jede Komponentenschicht weitergegeben werden also durch Komponente A, Komponente B, weitergeleitet. Jetzt benötigen Komponente A und Komponente B diese Daten nicht Okay, trotzdem müssen sie auf diese Daten zugreifen und sie weiterleiten , weil das sonst die Kette unterbrechen würde, okay? Nun, dieses Ding ist bekannt als Prop Drilling, und eine Sache beim Prop Drilling ist natürlich, dass das machbar ist, aber das macht es schwieriger, Ihren Code zu verwalten und zu pflegen, vor allem, wenn die App immer komplexer wird Die App ist momentan also einfach, also mag es Aber wenn die App immer komplexer wird, kann es wirklich schwierig werden, ja, das wird nicht empfohlen. Es wird bis zu einem bestimmten Niveau empfohlen, aber nicht darüber hinaus, oder? Also ja, hier geht es um Requisitenbohren, und ich hoffe, Sie haben eine gute Vorstellung davon, was Requisitenbohren ist 18. Nutzung nutzenKontext: Statusfreigabe wie ein Profi vereinfachen: In Ordnung. Also hier, was wir gerade tun, ist, dass ich bereits eine App eingerichtet habe , in der mehrere Komponenten verschachtelt sind, und wir haben diesen Wert oder und wir haben diesen Wert oder einige Daten, die wir mit Hilfe von Prop Drilling weitergeben mit Hilfe von Prop Okay, wir übergeben es also an Komponente A, okay? Dies ist die Komponente in der App. Und dann gibt diese Komponente es an den Baum weiter und die Komponente, bei der eine thematische Komponente handelt, die tief im Baum verschachtelt ist, zeigt hier den Wert des Themes an Okay? Jetzt wird es hier dunkel. Wenn ich dieses Dunkel in Hell ändere, etwa so, wird der Wert auf hell aktualisiert. Okay? Also das ist eine Sondierung hier drüben. Nun, das Konzept des Sondenbohrens wird problematisch, wenn Sie Daten durch viele Schichten von Komponenten leiten müssen , okay? Und im Moment passiert hier drüben, wenn ich nach oben scrolle, okay Hier können Sie sehen wie die Hierarchie aussieht, oder? thematische Komponente benötigt hier ein Thema, und die App-Komponente hat die Daten, die diese Themenkomponente benötigt. Okay? Also füge ich es einfach hier hinzu. Ich würde sagen, hat ein Thema. Okay? Also, was hier passiert, ist, dass Komponente A und Komponente B nur die Aufgabe übernehmen, die Daten zu übergeben, oder? Also, hier gibt es ziemlich viele Probleme, okay? Erstens leiten Sie die Daten durch unnötige Ebenen, okay? Sie haben also Komponente A und Komponente B, die die Daten nicht benötigen, aber sie übernehmen nur die Aufgabe weiterzuleiten, oder? Wartungsaufwand. Wenn sich also morgen Ihre Komponentenhierarchie ändert, wir an, Sie fügen eine neue Komponente dazwischen oder Sie entfernen eine Komponente dazwischen, okay? Bei jeder Änderung müssen Sie also sicherstellen, dass die neue Komponente auch die Theme-Prozedur an die Team-Komponente weitergibt, okay? Damit die Hierarchie nicht unterbrochen wird und die Weitergabe von Daten nicht unterbrochen Andernfalls kann die Teamkomponente die Daten , die sie gerade anzeigt, nicht anzeigen, und die App würde beschädigt. Okay? Wenn also ein anderer Entwickler arbeitet und er nicht weiß, dass diese Daten weitergegeben werden, könnte das zu Fehlern führen, oder? Und momentan gibt es eine unnötige Komplexität , bei der je mehr Schichten wir haben, desto durcheinander, sollte ich sagen, die Requisitenkette wird, Und es macht es schwieriger, einen Code zu verstehen und zu pflegen, oder? Und hier kommt das Konzept des Use Context Hooks ins Spiel. Okay? Also, was ist Use Context Hook? Das ist Kontext verwenden. Okay? Das ist also im Grunde ein Hook, mit dem Sie den Theme-Kontext einrichten können, und Sie können direkt von der Theme-Komponente aus darauf zugreifen, ohne dass er sie der Theme-Komponente aus darauf zugreifen, ohne dass durch Komponente A und Komponente B leiten muss. Und das vereinfacht die Komponente T, reduziert den Wartungsaufwand, und ähm, der Wartungsaufwand wird reduziert, weil die Zwischenkomponenten, die wir A und B haben Sie müssen diese Theme-Requisite, die sie nicht benötigen, nicht bestehen oder sich dessen bewusst sein , Im Moment werden sie darauf aufmerksam gemacht, okay, weil es per Prop Drilling an die Theme-Komponente übergeben werden muss . Okay? Also hier kommt der Nutzungskontext ins Spiel, okay? Nun, wie funktioniert Use Context? Es gibt also ein paar Teile hier drüben. Okay. Zuerst erstellen Sie einen Kontext. Okay? Nun, der Kontext erzeugt im Wesentlichen ein Kontextobjekt, und das ist eine Syntax hier. Also das ist ein Kontextobjekt, das wir erstellen, wir sagen const, mein Kontext, okay? Und wir verwenden Create context und übergeben hier einen Standardwert. Okay? Nun, dieser Standardwert ist hier optional. Er ist nicht erforderlich, nicht verpflichtend. Aber wenn Sie übergeben möchten, wenn Sie einen Standardwert haben möchten , können Sie ihn hier übergeben. Sobald dieses Objekt erstellt ist, wird der Kontext, der erstellt wurde, verwendet, okay? Also, wo oder welche Komponente diesen Kontext nutzen möchte , kann ihn in jeder Komponente verwenden, okay? Und im Grunde kann das dort drüben verwendet werden. Okay? Nun, es gibt auch ein Anbieter-Konzept, okay, bei dem Sie die Komponente, die Zugriff auf den Kontextwert benötigt, einschließen können , okay? Und die Komponente in diesem Baum, jeder Komponentenbaum, kann dort auf den Kontextwert zugreifen. Okay? Aber der Anbieter ist etwas , für das wir vorerst parken. Wir werden einfach verstehen, wie Sie den Kontext erstellen und wie Sie ihn nutzen können. Okay, wir werden die Dinge einfach halten, okay. Also, was wir tun werden, ist, die Syntax hierher zu kopieren. Okay? Ich übernehme die Syntax hier drüben. Und was ich tun werde, ist, hier nach unten zu scrollen. Äh, was wir jetzt haben, ist, dass wir ein Thema haben, oder? Was ich tun werde, ist, dieses Thema loszuwerden und ich sage meinen Kontext, oder ich kann hier Theme-Kontext sagen. Okay? Ich sage Kontext erstellen, und ich werde hier keinen Standardwert haben. Okay? Also das ist es, was ich mache. Ich habe jetzt einen Kontext geschaffen, okay? Wenn ich jetzt hier runterscrolle, werde ich sie hier loswerden, das Thema, das ich gerade übergebe. Okay? Das ist auch hier nicht nötig, okay? Da wir das Thema nicht weitergeben, wird es auch nicht benötigt. Also werde ich eigentlich all die Requisiten los , die ich hier übergehe , und ich vereinfache die Dinge, oder? Also, das ist erledigt Das ist auch entfernt, und ja, das ist erledigt. Ordnung. Jetzt zeigen wir das Thema hier drüben an. Natürlich wird das Team nicht funktionieren, weil das Team nicht existiert. In dem Moment, in dem ich das speichere, sehe ich keine Ausgabe , da auf der Konsole ein Fehler aufgetreten ist. Okay? Das ist verstanden. Die Sache ist die, wir müssen das Thema hier drüben anzeigen . Okay? Also, wie zeigen wir es an? Wir müssen den Kontext konsumieren, oder? Wir müssen also den Kontext in dieser Komponente konsumieren. Okay? Also komme ich zu der Komponente rüber . Okay. Und hier irgendwo, ich werde sie hier benutzen. Ich würde sagen, Thema ist gleichbedeutend mit Nutzungskontext, und der Name des Kontextes , den wir haben, ist Thema. Okay, es ist keine Teamkomponente, aber hier ist es der Kontext. Okay. Und dann werde ich das speichern. Okay. Und ich sehe die Ausgabe noch nicht. Okay? Bei der Überprüfung des Fehlers habe ich herausgefunden, dass create Context nicht definiert ist, also gibt es ein Problem mit den Eingaben, okay? Also, wenn du hier nach oben scrollst. Okay? Es gibt buchstäblich keine Eingabe zum Importieren, Erstellen von Kontext und Verwenden von Kontext. Ich sage Strg und Shift Strg und Leertaste und du kriegst das aus dem Vorschlag raus, okay? Also wähle ich das aus und das wird wahrscheinlich oben importiert. Wenn es nicht unterstellt wird, füge das einfach hinzu, falls es nicht automatisch für dich passiert. Okay? Und ich scrolle runter. Use Context soll auch importiert werden, also sage ich hier am Ende von „Kontext verwenden“ Steuerung und Leertaste und wähle das aus. Wenn du nach oben scrollst, kannst du sehen use Context ebenfalls hinzugefügt wird. Ich speichere das, okay? Was ist der Fehler, den wir jetzt bekommen? Okay? Ein nicht erkannter Fehler im Referenzthemen-Kontext ist also in der Themenkomponente nicht definiert Okay, es heißt also, dass es nicht definiert ist , weil es sich in dieser Komponenten-App befindet, oder? Also müssen wir das nach draußen verlegen , oder? Also, was ich tun werde, ist, hierher zu kommen und es hier zu kreieren. Und du kannst die Ausgabe jetzt sehen, okay? Also ja, das sollte jetzt gut funktionieren. Also gut. Was also passiert ist, dass ich den Kontext in der App-Komponente erstellt habe und versucht habe, von einer anderen Komponente aus darauf zuzugreifen. Also das hat natürlich nicht funktioniert. Okay. Also habe ich den Kontext geschaffen, oder? Es wurde erstellt, aber Sie können sehen es hier keinen Wert gibt, also kann ich hier einen Standardwert angeben. Ich kann zum Beispiel Licht sagen, ich kann das speichern und Sie können sehen das aktuelle Thema hier hell ist. In Ordnung. Also das ist Nutzungskontext. Es zeigt im Grunde den Standardwert, den wir hier haben. Es schafft einen Kontext, und dieser Kontext wird in der Themenkomponente verwendet. Okay? Also so können Sie, anstatt Prop Trolling zu verwenden , okay, Sie können hier den Kontext nutzen und Sie können die Daten komponentenübergreifend nutzen Ordnung. Also ich hoffe, das macht Sinn, und ich hoffe, Sie konnten es verfolgen. 19. Einen React-Kontext-Provider erstellen und implementieren: Jetzt hat use Context dieses Konzept von Anbietern, okay, das verwendet wird, um einen Kontext bereitzustellen. Jetzt, hier drüben, musst du Context benutzen, okay? Das ist die Hierarchie, mit der wir arbeiten werden, okay? Wir haben App-Komponente A, Komponente B, und diese Komponente ist verschachtelt Diese Teamkomponente benötigt ein Team und die App hat das Thema. Alles klar? Also hier drüben müssen wir den Anbieter nutzen, richtig? Das ist also eine Syntax für die Verwendung des Anbieters. Sie können also meinen Kontext , also den Kontextnamen Punkt Provider und den Wert übergeben, und dieser sollte, wie Sie sehen können, die Komponente umschließen , in der Sie den Kontext bereitstellen möchten . Okay? Nun, warum möchten Sie den Kontext angeben? Okay? Also hier haben wir den Kontext erstellt und wir verwenden den Kontext in der Theme-Komponente hier drüben. Okay? Es ist eine andere Komponente. Die Sache hier ist, wenn sich diese Komponenten alle in derselben Datei befinden, wenn diese Komponenten in einzelne Dateien aufgeteilt sind , dann funktioniert das nicht, weil Sie dann den Themenkontext aus einer Datei exportieren und in die andere Datei eingeben müssen den Themenkontext aus einer Datei exportieren und , damit er funktioniert, oder? Und ein Problem hier ist auch, dass der Themenkontext momentan einen Standardwert hat, der von der Themenkomponente verwendet wird der von der Themenkomponente verwendet Wenn Sie also morgen denselben Kontext an eine andere Komponente mit einem anderen Wert übergeben möchten denselben Kontext an , können Sie das nicht tun. Und dafür brauchst du einen Anbieter, okay? Also, was ist ein Anbieter? Provider umschließt im Grunde die Komponente, die Zugriff auf den Kontext oder Wert benötigt, okay? Und der Wert, der bereitgestellt wird. Dieser Wert ist also der Wert, der hier für den Kontext angegeben wird , okay? Dieser Kontext wird dann mit diesem Wert für diese Komponente verfügbar sein . Das wird eingeschlossen ebenso wie alle verschachtelten Komponenten , die in dieser speziellen Komponente eingeschlossen werden Okay? Also lass mich dir das zeigen. Also gut. Also, was wir tun werden, ist, dass wir jetzt den Anbieter hier nutzen werden. Also werde ich die Syntax hier kopieren. Okay. Und lassen Sie uns hier zu Komponente A kommen, und nach H zwei, oder sagen wir, oben drüben, okay, vor TIF werde ich das hinzufügen, und hier wird automatisches Schließen hinzugefügt. Ich schneide das einfach ab, okay, und ich nehme es einfach hierher. Okay. Im Moment ist das abgeschlossen und ich muss den Wert für einen Wert hier drüben hinzufügen, okay? Und was ich tun werde, ist , hier drüben dunkel zu sagen. Okay? Nehmen wir an, ich übergebe den gleichen Kontext mit dem Wert Dunkel. Und wenn ich das speichere, okay, ich erhalte eine Fehlermeldung. Lass mich sehen, was der Fehler ist. Okay, der Fehler ist offensichtlich. Mein Kontext ist nicht definiert, okay? Also habe ich hier einen kleinen Fehler gemacht. Ich nutze meinen Kontext. Es sollte der Kontextname sein, der Themenkontext ist. Ich ersetze das einfach hier drüben. Also Theme Context Dot Provider, Wert ist gleich dunkel. Und wenn ich das speichere, wirst du sehen das aktuelle Thema hier dunkel ist. Okay? So können Sie Anbieter im Code verwenden, okay, oder zusammen mit Context. Das ist sehr nützlich, denn welcher Kontext auch immer Sie hier mit Hilfe von Anbietern bereitstellen , er ist im gesamten Komponentenbaum verfügbar, okay. Und im Grunde können Sie auch von der verschachtelten Komponente aus darauf zugreifen , oder? Der Vorteil hier ist, die Komponente zwar in Zukunft in Sie die Komponente zwar in Zukunft in einzelne Dateien aufteilen, der Kontext dann für die Themenkomponente verfügbar wäre , da sie über einen Anbieter übergeben werden über einen Anbieter übergeben werden Okay. Wenn Sie den Anbieter nicht verwenden, müssen Sie den Kontext exportieren und importieren. Es ist nicht gut, und Sie haben auch den Standardwert und nicht den geänderten Wert. Okay? Also, wenn du morgen den Kontext für einige andere Komponenten wiederverwenden willst, weißt du, kannst du diesen Standardwert ändern und ihn genauso übergeben, wie wir es hier machen, okay? Also hier ändern wir nur den Standardwert. Der Standardwert ist hell, und wir fahren hier im Dunkeln, weil wir es dunkel wollen, und wir sehen die Ausgabe hier. Okay? Also ja, ich hoffe, Sie sind sich darüber im Klaren, was Anbieter sind, wie wichtig Anbieter sind und wie Sie sie nutzen können. 20. Kontextwerte dynamisch aktualisieren: Lassen Sie uns jetzt darüber sprechen, wie Sie den Wert des Kontextes aktualisieren können, okay? Und was wir tun werden, ist hier, wir haben diesen speziellen Kontext, der Themenkontext genannt wird. Okay? Es gibt uns den Wert eines Themas, egal ob es hell oder dunkel ist. Und wir gehen hier im Dunkeln durch den Theme-Anbieter, okay? Theme-Kontext-Anbieter, ich sollte sagen, okay, oder Kontext-Anbieter. Und dann greifen wir hier in der verschachtelten Komponente auf diesen Kontext zu, okay? Und wir zeigen es dunkel an. Okay, du kannst es hier sehen. Okay. Also, was ich tun würde, ist hier drüben ein Muster zu haben, okay? Das würde bedeuten, das Thema umzuschalten, und es würde das Thema in der gesamten Anwendung umschalten Alles klar? Das werden wir umsetzen. Auf diese Weise lernen wir, wie Sie den Wert des Kontextes bei einem Ereignis dynamisch aktualisieren können . Okay? Also, was ich hier als Erstes tun werde, ist, einen Zustand innerhalb der Komponente einzuführen. Okay? Also hier drüben sage ich const o und nenne das hier als Thema. Okay? Und ich sage, stellen Sie sie so ein, dass dies der Nutzungsstatus ist. Wir werden hier den Use State Hook verwenden. Ich werde use state sagen und den Standardwert als Light übergeben. Okay. Nun, wenn ich dem Kontext den Wert gebe, werde ich das loswerden und ich werde hier Thema sagen. Okay. Also, welchen Wert dieses Team auch hat, er wird an den Anbieter hier drüben oder an den Context-Anbieter weitergegeben, okay? Oder in den Kontext, über den Anbieter, sollte ich sagen. Alles klar? Also, was ich tun muss, ist, einen Button einzuführen. also auf die Schaltfläche klicken, wird Sie also auf die Schaltfläche klicken, wird eine Funktion ausgelöst, die Wert des Themes auf Licht aktualisiert. Wenn es also hell ist, wird es in Dunkelheit umgewandelt, und wenn es dunkel ist, wird es in Licht umgewandelt, so etwas in der Art. Also sage ich Const Toggle Theme. So nenne ich diese Funktion und ich werde hier die Pfeilfunktionen in JavaScript verwenden. Und hier sage ich, Thema festlegen Okay. Das festgelegte Thema ist also im Grunde der Funktionsumfang für diesen Zustand, okay? Festgelegtes Thema, ich sage vorheriges Team. Okay. Und ich sage vorheriges Team. Also wenn das vorherige Team hier gleich Licht ist. Wenn das vorherige Team gleich Licht ist, verwende ich hier den ternären Operator. Ich sage, das vorherige Team ist hell, dann weise ich es dunkel zu, andernfalls weise ich hell zu Also, wenn es nicht hell ist, dann bleibt es hell, okay? So etwas wie das hier. Okay? Also Ti ist das, das ist der gesamte Code hier drüben. Okay. Also werde ich mich einfach ändern. Ich nehme einfach die beiden vorherigen Zeilen. Und ich werde das speichern. Okay? Nun, das ist erledigt. Okay. Ich werde das hier mit einem Semikolon ausrichten Ich verwende nur einen ternären Operator Thema hier umzuschalten, basierend Okay? Und ich nehme dieses Umschalt-Theme, und was ich tun werde, ist hier in dieser speziellen Komponente, ich füge einen Button-Klick Okay? Also, kurz bevor die Komponente hinzugefügt wird, sage ich hier Button, etwas in der Art, und ich sage hier Theme umschalten. Okay. Und ich sage auf Klick. Ups, nicht bei Can play on click over here, ich sage Theme umschalten, und ich speichere das Du kannst also sehen, ich habe diese Umschalttaste hier drüben Das aktuelle Thema ist hier hell. Okay? Ich kann das auf Sprechen und Licht umschalten. Das kannst du sehen Also der Kontext, der Wert innerhalb des Kontextes, wird aktualisiert. Wie wird es aktualisiert? Es wird mit Hilfe der State-Variablen hier aktualisiert . Also haben wir diese Zustandsvariable mit dem Wert im Kontext verknüpft . Also was auch immer die Zustandsvariable hat, okay? Das wird angezeigt und an die Komponenten weitergegeben. Nun noch eine Sache, die ich erwähnen möchte, wenn Sie diesen Kontext für mehrere Komponenten verwenden . Also hier übergebe ich es in diesen Komponentenbaum, ich meine, ich übergebe diesen speziellen Kontext in diesen Komponentenbaum. Über diesen Teamprovider oder den Kontextanbieter, oder? Nun, wenn ich noch eine dritte Komponente habe und denselben Kontext auch an diesen Komponentenbaum übergebe . Okay? Wenn du dann den Wert hier änderst, egal welche Änderungen du hier mit Hilfe dieser Schaltfläche vornimmst . Dieser Komponentenbaum wird also nicht beeinträchtigt, da er völlig getrennt ist Und obwohl du im selben Kontext weitergibst, okay? Aber Sie nutzen Anbieter, genau hier drüben. Also diese beiden Bäume sind getrennt. Dieser Baum ist also getrennt. Und wenn du einen weiteren Baum erstellst, indem du dort denselben Kontext übergibst , okay? Die Änderungen hier in diesem speziellen Kontext wirken sich nicht auf den dort drüben aus, da Sie die Werte über einen Anbieter weitergeben. Okay? Ich hoffe, das ergibt hier Sinn. Okay, die Wiederverwendbarkeit kann also erfolgen oder der Kontext kann wiederverwendet werden, okay? Und Sie müssen den Anbieter verwenden um den Baum in einen Anbieter Okay? Also ja, ich hoffe, das macht Sinn in Bezug auf die Art und Weise, wie das funktioniert. Also gut, ich zeige dir das auch hier in einer Vollbildansicht. Okay, du kannst dir das Togo-Thema Light Tak ansehen. Sie können der Schaltfläche hier eine Art von Rand oder Polsterung hinzufügen. In App-Dot-CSS kann ich hier also Button sagen. Button, und ich sage Abstand oder ich sage Rand und ich sage fünf Pixel Okay, so etwas in der Art. Lass uns sehen, was das passiert. Okay. Es gibt jetzt eine Lücke, und das lässt sich wirklich gut umschalten. Okay, du kannst es sehen, oder? Das ist es also: So können Sie Status mit Kontext verwenden, und Sie können den Wert in einem Kontext aktualisieren der auf dem Wert in der Statusänderung basiert. Okay? Ich hoffe, Sie konnten mir folgen, und ich hoffe, das ist nützlich. 21. Umfang: Kontextverhalten innerhalb und außerhalb von Anbietern erkunden: Lassen Sie mich Ihnen nun eine wichtige Sache über die Kontextanbieter sagen, oder? Ein Kontextanbieter wird also verwendet, um der Komponente in ihrem Baum einen modifizierten Wert zur Verfügung zu stellen, okay? Nun, was es ändert, es ändert den Standardkontextwert. Hier haben wir also Licht, wir erstellen zum Beispiel den Kontext mit dem Standardwert hell, aber wenn wir ihn an den Anbieter übergeben, können wir den Wert auf dunkel ändern und ihn übergeben, okay? Der Context-Provider wird also verwendet, um den geänderten Wert den Komponenten in seinem Baum zur Verfügung den geänderten Wert den Komponenten in seinem Baum zur zu stellen. Alles klar? Nun, dieser Wert ist nur für die Komponenten zugänglich, die vom Anbieter verpackt wurden , und nicht außerhalb des Anbieters. Okay? Wenn Sie also einen Wert mithilfe eines Anbieters ändern und im Komponentenbaum weitergeben, wie wir es hier in unserem Fall tun, ist dieser geänderte Wert nicht automatisch global oder außerhalb des Baums verfügbar , in dem der Anbieter verwendet wird. Komponenten außerhalb des Baums verwenden entweder den verzögerten Kontextwert oder den anderen Anbieterwert , wenn sie von einem anderen Anbieter umschlossen werden Okay? Lass mich dir das zeigen. In Ordnung. Also, was ich hier tun werde, ist zu demonstrieren, dass dieser Kontextanbieter verwendet wird, um den Wert innerhalb dieses Komponentenbaums zu übergeben den Wert innerhalb und nicht außerhalb dieses Baums. Was wir tun werden , ist, dass wir eine weitere Komponente haben werden , okay? Und ich werde eine Komponente erstellen, sie wird globale Komponente genannt . Also werde ich hier ganz unten sein. Lass mich das Ding hier duplizieren. Und unten werde ich eine weitere Komponente hinzufügen. Ich nenne das eine globale Komponente. Etwas wie das. Globale Komponente, okay. Im Rest ist alles dasselbe, okay? Es ist nur eine andere Komponente, eine globale Komponente, und ich nenne das eine globale Komponente. Und hier sage ich externer Anbieter. Okay. Seite, vorrätig, so etwas in der Art. Okay? Also das ist es, was ich mache. Bin ich nicht. Ich füge hier etwas anderes Wasser hinzu, lila zum Beispiel, und ich werde das sehen. Okay? Das ist also eine globale Komponente , die erstellt wurde. Jetzt scrolle ich hier nach oben. Okay? Und ich werde dieses globale Komponenten-Rendering hier drüben hinzufügen, wenn ich die GSX hier rendere Okay? Also, was ich tun würde, ist hier drüben, kurz vor dem Theme-Kontext-Anbieter. Ich werde zuerst sicherstellen müssen, dass ich das Ganze in ein Div packe, denn die Wurzel muss sein, es muss eine Wurzel geben, oder? Ich werde das Ganze in dieses Div packen. Okay? Nun, innerhalb dieses Divs werde ich eine globale Komponente haben, ungefähr so. Globale Komponente, ich werde ein selbstschließendes Tag haben . Ich werde sehen, ob das ist. Okay. Sie können diese globale Komponente hier oben sehen. Okay? Wenn Sie nun sehen, ob ich das Thema umschalte, können Sie sehen, dass das aktuelle Design in der globalen Komponente hell ist Okay. Und innerhalb der App hier drüben oder innerhalb der App-Hierarchie , dort ist es auch leicht, o Aber die globale Komponente befindet sich außerhalb der Hierarchie. Sie können hier sehen, dass es sich außerhalb des Anbieters befindet. Okay? Es wird also nicht vom Anbieter beeinflusst Nun, wenn ich das Theme ändere, wenn ich das Theme umschalte, mal sehen, ob der aktuelle Theme-Wert nur innerhalb der Theme-Komponente oder innerhalb dieses Baums aktualisiert wird nur innerhalb der Theme-Komponente , sollte ich sagen, ok, dieser Baum, den wir haben, aber nicht außerhalb Obwohl es denselben Kontext verwendet, wird der Wert nicht aktualisiert. Das ist der Punkt, den ich ansprechen möchte. Okay? Jetzt, morgen, kann ich diese Komponente, die globale Komponente, wiederverwenden, und am Ende kann ich sie außerhalb dieses Anbieters erneut übergeben und dieses Mal kann ich sie hier in ein separates Angebot packen. Was ich tun werde, ist, hier ein bisschen zu verpacken und diese globale Komponente zu kürzen. Ich werde das hier in einen anderen Anbieter verschieben. Es ist jetzt ein anderer Anbieter, Moderator. Okay. Es ist jetzt ein anderer Anbieter, und hier drüben ist der Wert, den ich biete düster. Sagen wir zum Beispiel. Okay. Ich sage Dak hier drüben. Ich werde das speichern. Sie können sehen, dass dieser Anbieter anders ist. Es hat einen anderen Wert. Okay? Also wollte ich den Standardwert ändern. Also habe ich hier provide hinzugefügt und den Standardwert auf DAC geändert . Okay? Dieser verwendet den Standardwert. Okay? Dieser oben verwendet den Standardwert. Es gibt keinen Anbieter, und dieser ist mit einer Straße verknüpft. Also dieses Ding hier drüben ist mit einer Straße verbunden. Okay. Also, es gibt drei Verwendungen des Kontextes, wie Sie sehen können, okay? Wenn Sie nun das Thema hier umschalten, werden Sie feststellen, dass es nur innerhalb der Hierarchie umgeschaltet wird und nicht außerhalb der Hierarchie Okay? Das ist der Punkt, den ich hier ansprechen möchte. Okay? Und das ist wirklich, wirklich wichtig, wenn Sie die Anbieter nutzen und verstehen wollen , wie Anbieter funktionieren oder welche Bedeutung es hat, einen Anbieter zu haben, okay? Innerhalb des Anbieters wird der Kontextwert also gesteuert und kann geändert werden. Okay? Also hier kannst du sehen, dass dieses Ding einen Anbieter hat. Es wird kontrolliert, richtig, und es kann geändert werden, oder? Der Kontextwert kann geändert werden. Und außerhalb des Anbieters, außerhalb dieses Anbieters hier, zum Beispiel dieser, okay, der Kontext greift auf den Standardwert oder den Wert eines der Kontext greift auf den anderen Anbieters fasst ihn im Komponentenbaum zusammen. Okay? Also ist es standardmäßig außerhalb dieses Anbieters, es wird standardmäßig auf den Standardwert hier drüben gesetzt, wie Sie sehen können, aktuell sind sie hell und der Standardwert ist hell hier, oder? Also Standardwert oder wenn Sie keinen Standardwert verwenden möchten, erstellen Sie einen anderen Anbieter und geben den gewünschten Wert weiter Richtig? So funktioniert es also. Und das Umschalten innerhalb dieses Anbieters wird nicht beeinträchtigt, da die globale Komponente hier nicht Teil dieser Komponente ist und auch nicht in diesem Anbieter enthalten ist Okay? Ich hoffe, ich kann hier etwas klarstellen und ich hoffe , Sie wissen, was passiert. Okay? Wenn Sie also einen Wert mithilfe des Anbieters ändern und ihn an die Komponente weitergeben, ist dieser geänderte Wert nicht automatisch global oder außerhalb des Baums verfügbar global oder außerhalb des Baums in dem der Anbieter verwendet wird, okay? Komponenten außerhalb des Baums verwenden entweder den Standardkontextwert, wie wir ihn hier verwenden, die globale Komponente, oder sie verwenden einen anderen Anbieterwert, wenn Pi unter dem Anbieter eingeschlossen wird einen anderen Anbieterwert, wenn Pi unter dem Anbieter eingeschlossen , wie wir es hier tun Okay? Aber der Wert in diesem Baum ist draußen nicht verfügbar, oder? Ich hoffe, das ist klar und ich hoffe, Sie können diesen Punkt verstehen. 22. Benutzerdefinierte Hooks 101: Wiederverwendbare Logik in React erstellen: Hallo, da. Jetzt ist es an der Zeit, über benutzerdefinierte Hooks in React zu sprechen. Was ist nun ein benutzerdefinierter Hook? Benutzerdefinierte Hooks in React sind also Funktionen, mit denen Sie Logik für mehrere Komponenten wiederverwenden können. In Ordnung. Also, wenn Sie Anwendungen mit React erstellen, gibt es Komponenten, richtig? Also hier haben wir eine Komponente, okay? Es ist also eine sehr einfache Komponente , die benutzerdefinierte Hooks im Header zurückgibt oder das H-One-Tag verwendet, oder? Nun, das ist eine Komponente, aber in einer realen Anwendung haben Sie möglicherweise mehrere Komponenten und verwenden möglicherweise eine Menge Logik für verschiedene Komponenten. Wenn es nun in Ihrer Komponente eine gemeinsame Logik gibt , können Sie diese konvertieren oder Logik in einen benutzerdefinierten Hook kapseln, und Sie können diesen Hook für alle Komponenten in Ihrer React-Anwendung wiederverwenden Ihrer React-Anwendung Okay? Nun, du hast auch eingebaute Hooks, oder? Und hier habe ich oben ein paar Eingabeanweisungen, Kontext verwenden, Status verwenden, Effekt verwenden, Das sind all die eingebauten Hooks, die du hast, okay? Und diese sind so konzipiert, dass sie funktionale Komponenten bieten. Funktionskomponenten sind also die Komponenten, die wir mithilfe von Funktionen definieren, okay? Diese sind also so definiert, dass sie den funktionalen Komponenten den Zugriff auf Funktionen wie Statuslebenszyklusereignisse im Kontext ermöglichen den Zugriff auf Funktionen , oder? Und sie sind standardisiert, von React definiert und für allgemeine Aufgaben optimiert, oder? Diese sind also eingebaut , die Sie importieren und in Ihren Komponenten wiederverwenden, okay? Aber wenn Sie morgen irgendeine Art von Logik wiederverwenden möchten, können Sie sogar Ihren eigenen benutzerdefinierten Hook erstellen, was bedeutet, dass das ein benutzerdefinierter Hook ist, okay? Und wann immer Sie definieren, die Syntax ist im Grunde, dass sie mit dieser Verwendung hier beginnen sollte . Okay, sollte mit der Verwendung beginnen. Es kann also als Komponente verwendet werden oder EPI oder so ähnlich verwenden , wie auch immer Sie es nennen möchten Okay, benutze den Zähler Okay, es sollte also beginnen Die normale Konvention beginnt im Grunde genommen mit der Verwendung Okay? Also, was sind benutzerdefinierte Hooks? Das sind Funktionen, die Sie selbst erstellen, um die Logik komponentenübergreifend wiederzuverwenden , okay? Und genau das ist es. Sie können es sich wie ein Rezept vorstellen, okay, das nichts anderes ist als eine Reihe allgemeiner Aufgaben oder bestimmter Operationen, die Sie ausführen möchten. Und Sie möchten den Code nicht für mehrere Komponenten wiederholen , also definieren Sie ihn nur einmal und verwenden ihn überall wieder. Okay? Warum werden diese benötigt? Ein Hauptgrund, den Sie aus der Definition ziehen könnten, ist natürlich die Wiederverwendbarkeit Okay? Es ermöglicht Ihnen also , eine Menge Logik wiederzuverwenden. Es ermöglicht Ihnen, viele Wiederholungen zu entfernen und es hilft Ihnen, Ihren Code besser zu organisieren. Okay? Es gibt auch viele eingebaute Hooks, die wir bereits kennen Sie müssen sich bewusst sein, ob Sie mit React bauen. Das sind also alle eingebauten Hooks. Beispiel einige der Hooks, die ich oben hinzugefügt habe, Kontexte erstellen, Kontext verwenden, Status verwenden Okay? Das sind also eingebaute Hooks, und benutzerdefinierte Hooks sind die Hooks, die benutzerdefiniert sind Okay? Nun, eine Frage , die dir vielleicht gerade einfällt, oder? sich diese Definition anschaut, wie unterscheiden sie sich von normalen Ja Script-Funktionen? Funktionen sind auch Blöcke, die Sie einmal definieren und in Ihrer Anwendung wiederverwenden können. Warum nicht einfach Funktionen statt Hooks erstellen? Warum gibt es dieses Konzept der Hooks überhaupt? Hooks sind anders, wenn man sie mit den Funktionen hier vergleicht. Nun, wie unterscheiden sie sich? Jetzt können benutzerdefinierte Hooks React-Funktionen nutzen. Wenn ich React-Funktionen sage, bedeutet das, dass benutzerdefinierte Hooks die Zustandsverwaltung verwenden können, z. B. den State-Hook verwenden, um den Komponentenstatus zu verwalten, was normale JS-Funktionen nicht können. Okay? Benutzerdefinierte Hooks haben auch eine Lebenszykluskontrolle, sodass sie den Use-Effect-Hook verwenden können , um Nebenwirkungen wie das Abrufen von Daten zu behandeln, was normale JS-Funktionen nicht können Okay? Da drüben geht es auch um eine Menge Wiederverwendbarkeit. Ja, benutzerdefinierte Hooks folgen grundsätzlich den Reaktionsregeln für Hooks und sorgen für ein konsistentes Verhalten Das ist also der Grund, warum dieses Konzept von Hooks anders ist. Wie dieses Konzept der benutzerdefinierten Hooks unterscheidet es sich im Wesentlichen von dem normaler Jascript-Funktionen Ja Script-Funktionen sind begrenzt, okay? Wenn Sie jedoch eine React-spezifische Wiederverwendbarkeit wünschen , kommen Sie zu benutzerdefinierten Hooks Ordnung. Also ich hoffe, das macht Sinn. Was ich jetzt tun würde, ist diese Eingaben oben wegzulassen. Okay? Diese werden derzeit nicht wirklich benötigt. Jetzt werden wir ein bisschen selbst Hand anlegen und unsere eigenen benutzerdefinierten Hooks erstellen. Okay? Also werden wir zuerst eine Gegenkomponente erstellen. Dies ist eine Komponente , die uns hilft, die Anzeige im normalen Zähler mit beiden Schaltflächen Inkrement und Dekrement anzuzeigen. Sie können den Zählerwert sowohl verringern als auch inkrementieren Okay? Das ist also die Komponente, für die wir eine sehr einfache Komponente erstellen werden, und dann werden wir die Logik des Zählers in einen benutzerdefinierten Hook extrahieren , sodass wir den Zähler für mehrere Komponenten an mehreren Stellen wiederverwenden den Zähler für mehrere Komponenten an mehreren können. Das ist also etwas , das wir untersuchen werden. Lassen Sie uns also damit beginnen. Ich habe hier ein einfaches React-Projekt, Wheat React Project, würde ich sagen. Ich habe main.j6, wie Sie sehen können, das hier eine Render-App ist Und hier, falls du kommst, das ist App Okay. Also, was ich hier machen werde, ist, mit der Theke anzufangen, ich werde hier drüben einen Staat haben. Also zuerst den Status, ich werde hier zählen, die Anzahl festlegen, so etwas, und ich sage dann, benutze State Okay. Und ich füge hier Null hinzu. Okay. Also das ist unser Staat hier drüben. Ich werde zwei Funktionen hinzufügen. Ich sage Inkrement. Das ist eine Funktion Es ist eine Pfeilfunktion, die ich hier erstelle. Und tatsächlich muss ich keine geschweiften Klammern hinzufügen, weil nur eine Zeile Codesatz zählt. Okay? Und ich sage, zähle plus eins. Okay, zähle plus eins, ungefähr so. Okay. Und ich werde auch eine Dekrementfunktion haben, eine Dekrementfunktion. Das ist also Inkrement, Dekrement. Okay. Und anstatt es hier zu erhöhen, dekrementiere ich es einfach minus eins Ups, nicht rein, es ist minus. Ordnung. Also das ist erledigt. Und jetzt hier drüben, ich bin im Header. Hier werde ich einfach zählen sagen und ich werde die Anzahl bis zu so etwas anzeigen. Okay. Und irgendwie H eins, ich behalte das als H zwei. Und ich werde sehen, ob Sie hier Null zählen können, und hier drüben werde ich ein paar Knöpfe haben. Okay. Also das Button-Tag, ich muss den Button hinzufügen. Ich würde sagen, das ist die Inkrement-Taste. Okay, und bei einem Klick sage ich Inkrement, also so Okay, das ist ein Knopf. Ich füge hier noch einen Button hinzu. Das ist es also, und ich sage Dekret. Okay. Dekrement, so etwas in der Art. Also ja, das ist der Zähler, den wir jetzt haben. Wenn Sie den Zähler erhöhen, werden Sie sehen, dass er steigt. Sie können ihn auch verringern. Es wird auch negativ werden. Okay? Wir haben einen sehr einfachen Zähler erstellt. Okay? Nun werden wir eine Zählerlogik in einen benutzerdefinierten Hook extrahieren und den benutzerdefinierten Hook in unserer Anwendung verwenden . Okay? Also lass uns das machen. Also als Erstes extrahiere ich es in eine separate Datei. Okay. Also werde ich hier eine Datei unter SRC Ich nenne diese Datei so, wie wir sie Use Counter Dot JSX nennen können , ungefähr so Okay. Und hier repliziere ich einfach eine Menge Code, den wir bereits haben Also kopiere ich einfach die ganze Funktionssache hierher. Okay. Das und ich füge es hier ein. Okay. Jetzt kürzen wir es. Okay, ich muss einen Import hinzufügen, dem der Verwendungsstatus ganz oben steht. Okay, der Nutzungsstatus wurde importiert. Und hier ist das statt Funktion Use Counter, und ich muss Use Counter exportieren, also sage ich Export, Standard, Use Counter. Das ist erledigt. Okay. Und was wir tun müssen, ist, dass wir State hier drüben nutzen. Wir verwenden Increment, und wenn wir zurückkehren, müssen wir den JSX, diesen JSX, nicht zurückgeben Das ist nicht etwas , das wir zurückgeben werden, aber was wir zurückgeben werden, ist, dass wir die Anzahl zurückgeben werden Okay, wir werden die Zählung zurückgeben. Wir geben Increment zurück und wir geben Decrement zurück, ungefähr so Und das wird keine runde Klammer sein . Dies wird ebenfalls eine Klammer sein. Also ja, das ist erledigt. Okay, also ich denke, wir sind alle geklärt. Okay, wir schaffen einen Staat. Wir erstellen Inkrement, Dekrement, wir zählen und wir exportieren Nutzungszähler Das ist also ein benutzerdefinierter Hook, den wir erstellt haben , wo wir tatsächlich eine gewisse Logik haben, und wir verwenden Funktionen, die mit React zu tun haben, wie Sie sehen können Wir nutzen Staaten und so, richtig? Und das geben wir auch zurück. Nun, wenn Sie zu App Dot Jx kommen, müssen wir hier den Hook verwenden, den wir erstellt haben Okay? Denn nutze den Zähler, wenn du dir das ansiehst, ist es unser benutzerdefinierter Hook, der sich die Logik des Zählens kümmert. Er verwaltet den Status und gibt den aktuellen Zählerstand zusammen mit den Inkrement- und Dekrementfunktionen hier zurück . Okay? Also müssen wir die Zählerkomponente hier , die wir in der App haben. Der Name der Komponente lautet App. Und es steht für Zähler. Also müssen wir das aktualisieren , um den benutzerdefinierten Hook zu verwenden. Also was wir tun werden ist, dass ich das alles loswerden werde . Das brauchen wir nicht. Das ist ein Wechsel zum benutzerdefinierten Hook, und ich sage stattdessen const, ich sage count Ich sage Inkrement, ich sage Dekrement, so etwas Ich sage gleich, ich sage Zähler verwenden. Ich meine so. Okay. Und ja, das ist es. Wir verwenden Use Counter Hook. Ich muss State jetzt nicht in meiner Anwendung verwenden. Sie können also den Moment sehen, in dem ich gesagt habe, benutze Counter hier , okay, die Eingabeanweisung wurde hier oben hinzugefügt. Sie können diese Eingabeanweisung sehen. Okay. Sie können also sehen, dass dieser Code jetzt viel einfacher zu verwalten ist. Okay? Ich kann diese Datei speichern. Ich kann das aktualisieren und Sie können sehen, dass sich in der Ausgabe nichts ändert. Es funktioniert absolut einwandfrei. Okay? Also haben wir die interne Verwaltung der Zählerkomponente durch unseren Use-Counter-Hook ersetzt. Und das macht unsere Gegenkomponente sauberer. Und wiederverwendbar für jede Art von Logik, die mit dem Zählen zu tun hat. Okay? Nehmen wir morgen an, ob Sie diese Komponente für mehrere verwenden möchten, oder morgen, wenn Sie diese Zählerfunktion für mehrere Komponenten verwenden möchten. Was Sie tun können, ist, einen Zähler wie diesen erstellen zu lassen . Okay, es gibt einen Haken, der das Zählen von Dingen erledigt, richtig? Und Sie können es an mehreren Stellen importieren und für verschiedene Komponenten verwenden. Wenn Sie morgen diese Zähllogik aktualisieren müssen, müssen Sie nicht herausfinden, oh, welche Komponenten das verwenden, lassen Sie mich das überprüfen. Sie müssen es einfach sofort in dieser speziellen Datei aktualisieren. Sobald Sie es in einer Datei aktualisieren, die Änderungen überall wiedergegeben. Das ist also eine Magie der Wiederverwendbarkeit, wie Sie sich vorstellen können. Okay? Also, was sind benutzerdefinierte Hooks? Benutzerdefinierte Hooks in React sind Funktionen, Sie Logik für mehrere Komponenten verwenden können, und sie beginnen hier mit der Verwendung. Das ist eine Konvention. Alles klar? Ich hoffe, das war hilfreich und ich hoffe, Sie konnten mitmachen. 23. Funktionalität verbessern: Benutzerdefinierte Hooks aktualisieren und neu gestalten: Hallo, da. Also, was wir jetzt tun werden, ist diesen benutzerdefinierten Hook, den wir hier verwenden, den wir erstellt haben. Es ist ein Use-Counter-Hook , der uns hilft, die Anzahl und die Funktionalität für den Zähler zu verwalten . Und das nutzen wir, um es hier drüben anzuzeigen, oder? Und Sie können das in so vielen Komponenten wiederverwenden , wie Sie möchten. Dazu verwenden Sie einen Counter-Hook. Ich werde Ihnen zeigen, wie Sie Ihren benutzerdefinierten Hook aktualisieren können um weitere Funktionen hinzuzufügen, und wie er sich überall widerspiegelt. In Ordnung. Also hier in diesem Zähler werden wir eine weitere Schaltfläche hinzufügen, und zwar die Reset-Taste, mit der die Zählung auf einen Anfangswert zurückgesetzt wird . Ordnung. Also hier drüben, was ich tun werde, ist, dass wir einen Anfangswert haben werden. Also hier in diesem speziellen Hook werde ich den Anfangswert akzeptieren. Okay? Also sage ich Anfangswert und Hoppla, Anfangswert, und es wird diese Null als Standardwert haben, und hier drüben werde ich zurückgesetzt haben Okay? Also sage ich Const, ich sage Reset, okay Und ich werde eine Pfeilfunktion haben. Okay, wir brauchen keine geschweiften Klammern, also sage ich hier Set Count und setze das auf den Anfangswert zurück, okay, was auch immer es ist Okay. Und anstatt den Zustand hier auf Null zu initialisieren, werde ich ihn auf den Anfangswert initialisieren, weil wir jetzt den Anfangswert als Parameter erhalten. Okay? Und okay, vielleicht bleibe ich hier gleich. In Ordnung. Das ist zurückgesetzt, und was wir auch tun würden , ist, diesen Reset hierher zurückzugeben. Also sage ich hier einfach Reset, so etwas in der Art. Okay. Das ist erledigt. Jetzt wurde hier im Gegenzug die Reset-Funktion hinzugefügt, und was Sie hier tun können, ist, dass Sie eine Schaltfläche hinzufügen können. Okay, also füge ich einen Button hinzu. Und diese Taste wird Reset-Taste sein, und ich werde die Reset-Funktion haben. Aber das Problem ist, dass die Reset-Funktion hier nicht deklariert ist , also sage ich Reset, ungefähr so. Okay? Also ja, das ist es. Wir sind fertig und wir werden auch einen Anfangswert übergeben , da er jetzt den Anfangswert akzeptiert. Der Anfangswert wird also jetzt Null sein. Ich werde das speichern und Sie können sehen, dass die Reset-Taste hinzugefügt wurde, okay? Jetzt kann ich inkrementieren, ich kann dekrementieren und ich sehe Reset Okay? So können Sie sehen, wie die Funktionalität einwandfrei funktioniert. Okay? Nun, egal welchen Anfangswert Sie einstellen, der Zähler beginnt mit diesem Anfangswert. Wenn ich also den Anfangswert auf Daten von zehn setze, beginnt der Zähler bei zehn. Sie können sehen, dass die Zahl zehn ist. Okay. Und Sie können erhöhen, Sie können dekrementieren und es wird auf den ursprünglichen Wert zurückgesetzt , den Sie eingegeben haben Richtig. So können Sie den Hook also im Grunde aktualisieren, um weitere Funktionen hinzuzufügen, und alle Aktualisierungen, die Sie vornehmen, spiegeln sich überall dort wider, wo dieser spezielle Hook verwendet wird. Okay? Das ist also das Schöne daran, benutzerdefinierte Hooks zu verwenden. Ich hoffe, das ist klar und ich hoffe Sie konnten dem folgen. 24. Schlussbemerkung zum Kurs: Und damit sind wir am Ende dieser aufregenden Reise in die Welt der React Hooks angelangt. Wir haben untersucht, wie Hooks React-Entwicklung revolutioniert haben und es uns ermöglicht haben, viel saubereren und funktionaleren Code zu schreiben viel saubereren und funktionaleren Code Von der Beherrschung der Grundlagen von Use State und Use Effect bis hin zum Eintauchen in fortgeschrittene Themen wie Use Context, Use Ref und benutzerdefinierte Hooks haben wir eine solide Grundlage für die moderne React-Entwicklung geschaffen für die moderne React-Entwicklung Im Laufe der Zeit haben wir auch reale Projekte wie Color Picker, Mouse-Tracker und Digitaluhr entwickelt reale Projekte wie Color Picker, Mouse-Tracker und Digitaluhr und Digitaluhr Und diese Projekte haben uns geholfen zeigen, wie diese Konzepte in praktischen Anwendungen zum Leben erweckt Aber denken Sie daran, das ist erst der Anfang. Die Stärke von React-Hooks liegt in ihrer Vielseitigkeit und Anpassungsfähigkeit Ich ermutige Sie, weiter zu experimentieren und neue Projekte zu erstellen mit dem Wissen, das Sie in diesem Kurs erworben haben, Auf diese Weise können Sie die innovative Art der Verwendung von React-Hooks in Ihren zukünftigen Projekten und Anwendungen erkunden Verwendung von React-Hooks in Ihren zukünftigen Projekten und Anwendungen Ich bin sehr gespannt, wie Sie diese Fähigkeiten einsetzen werden , um dynamische und reaktionsschnelle Anwendungen zu erstellen . Denken Sie daran, dass Lernen ein kontinuierlicher Prozess ist und Reagieren endlose Möglichkeiten für Wachstum und Kreativität bietet . Vergessen Sie nicht, die Kursprojekte , die Sie mit dieser bestimmten Klasse erhalten, abzuschließen die Kursprojekte , die Sie mit dieser bestimmten Klasse erhalten und sie im Projektbereich mit der gesamten Klasse zu teilen . Deine Projekte werden nicht nur Lernen und dein Verständnis festigen, sondern auch andere in unserer Lerngemeinschaft dazu inspirieren , es besser zu machen Vielen Dank, dass Sie eine so engagierte und begeisterte Gruppe von Ich hoffe, dieser Kurs hat nicht nur Ihr Wissen erweitert, sondern Sie auch dazu inspiriert, die Grenzen dessen, was Sie die Grenzen dessen, was Sie zusammen mit React erreichen können Viel Spaß beim Programmieren und ich wünsche Ihnen alles Gute auf Ihrem Weg zur Entwicklung von React.