In diesem Teil der Übersetzung des React-Schulungskurses empfehlen wir Ihnen, die praktische Aufgabe der Arbeit mit klassenbasierten Komponenten abzuschließen. Danach werden wir beginnen, ein so wichtiges Konzept von React wie den Zustand von Komponenten zu beherrschen.
→
Teil 1: Kursübersicht, Gründe für die Beliebtheit von React, ReactDOM und JSX→
Teil 2: Funktionskomponenten→
Teil 3: Komponentendateien, Projektstruktur→
Teil 4: übergeordnete und untergeordnete Komponenten→
Teil 5: Beginn der Arbeit an einer TODO-Anwendung, Grundlagen des Stylings→
Teil 6: Über einige Funktionen des Kurses, JSX und JavaScript→
Teil 7: Inline-Stile→
Teil 8: Fortsetzung der Arbeit an der TODO-Anwendung, Vertrautheit mit den Eigenschaften von Komponenten→
Teil 9: Komponenteneigenschaften→
Teil 10: Workshop zum Arbeiten mit Komponenteneigenschaften und Styling→
Teil 11: Dynamische Markup-Generierung und Map-Arrays-Methode→
Teil 12: Workshop, dritte Phase der Arbeit an einer TODO-Anwendung→
Teil 13: Klassenbasierte Komponenten→
Teil 14: Workshop zu klassenbasierten Komponenten, Komponentenstatus→
Teil 15: Komponentengesundheitsworkshops→
Teil 16: Die vierte Phase der Arbeit an einer TODO-Anwendung, die Ereignisbehandlung→
Teil 17: Fünfte Phase der Arbeit an einer TODO-Anwendung, Änderung des Status von Komponenten→
Teil 18: Die sechste Phase der Arbeit an einer TODO-Anwendung→
Teil 19: Methoden des KomponentenlebenszyklusTeil 20: Die erste Lektion in bedingtem Rendern→
Teil 21: Zweite Lektion und Workshop zum bedingten Rendern→
Teil 22: Die siebte Phase der Arbeit an einer TODO-Anwendung, bei der Daten aus externen Quellen heruntergeladen werden→
Teil 23: Erste Lektion zum Arbeiten mit Formularen→
Teil 24: Lektion der zweiten Form→
Teil 25: Workshop zum Arbeiten mit Formularen→
Teil 26: Anwendungsarchitektur, Container- / Komponentenmuster→
Teil 27: KursprojektLektion 25. Workshop. Klassenbasierte Komponenten
→
Original»Job
Unten finden Sie den Code, der in die Datei
index.js einer Standardanwendung von React
index.js werden muss, die von
create-react-app . Konvertieren Sie die in diesem Code enthaltenen Funktionskomponenten in klassenbasierte Komponenten und suchen und beheben Sie außerdem einen kleinen Fehler.
Der Code für die Datei
index.js :
import React from "react" import ReactDOM from "react-dom"
▍Lösung
Schauen wir uns zunächst an, was die Anwendung in ihrer ursprünglichen Form ausgibt, indem Sie sie in einem Browser öffnen.
Browser-QuellseiteSie können sehen, dass die oberste Zeile auf der Seite nicht richtig aussieht. Nach dem Komma nach Welcome sollte es offensichtlich so etwas wie einen Benutzernamen geben.
Wenn wir den Anwendungscode analysieren, stellt sich heraus, dass die
Header Komponente diese Zeile anzeigt und erwartet, dass die beim Erstellen ihrer Instanz festgelegte Eigenschaft
username wird. Eine Instanz dieser Komponente wird in der
App Komponente erstellt. Nachdem wir dies herausgefunden haben, können wir genau den Fehler korrigieren, der in der Aufgabe erwähnt wurde.
Es ist zu beachten, dass Komponenten normalerweise in verschiedenen Dateien abgelegt werden. In diesem Fall haben wir sie jedoch alle in einer Datei beschrieben.
Wir wandeln die Funktionskomponente der
App in eine Komponente um, die auf der Klasse basiert. Dazu reicht es aus, den Code in dieses Formular zu bringen:
class App extends React.Component { render() { return ( <div> <Header username="vschool"/> <Greeting /> </div> ) } }
Jetzt steht das Schlüsselwort
class vor dem Komponentennamen, gefolgt vom
extends React.Component , nach dem der Hauptteil der Klasse in geschweiften Klammern beschrieben wird. Es sollte eine
render() -Methode geben, die das zurückgibt, was wir von der Funktionskomponente zurückgegeben haben. Andere Komponenten werden auf die gleiche Weise verarbeitet.
<Header username="vschool"/> auf die Konstruktion von
<Header username="vschool"/> . Hier übergeben wir die Eigenschaft
username mit dem Wert
vschool Header Komponente, wodurch der Fehler in der ursprünglichen Anwendung
vschool wird.
Wie Sie bereits wissen, erwartet die
Header Komponente, dass die Eigenschaft
username abgerufen wird, und in der Funktionskomponente wird auf diese Eigenschaft mit dem Konstrukt
props.username (in diesem Fall ist
props ein Argument für die Funktion, die die Komponente beschreibt). In klassenbasierten Komponenten sieht dasselbe wie
this.props.username . Hier ist der neu gestaltete
Header Komponentencode:
class Header extends React.Component { render() { return ( <header> <p>Welcome, {this.props.username}!</p> </header> ) } }
Die dritte Komponente,
Greeting , unterscheidet sich geringfügig von den anderen. Tatsache ist, dass darin vor dem
return einige Berechnungen durchgeführt werden. Bei der Konvertierung in eine Komponente basierend auf einer Klasse müssen diese Berechnungen vor dem Befehl return in die Methode
render() eingefügt werden. Hier ist der Code für die neu gestaltete
Greeting :
class Greeting extends Component { render() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) { timeOfDay = "morning" } else if (hours >= 12 && hours < 17) { timeOfDay = "afternoon" } else { timeOfDay = "night" } return ( <h1>Good {timeOfDay} to you, sir or madam!</h1> ) } }
Beachten Sie, dass diese Komponente in der Deklaration dieser Komponente verwendet wurde:
class Greeting extends Component . Dies geschieht häufig der Kürze halber, aber damit dies funktioniert, müssen wir den Importbefehl
react verfeinern und ihn in die folgende Form bringen:
import React, {Component} from "react"
So sieht die Seite der recycelten Anwendung in einem Browser aus.
Überarbeitete Anwendungsseite im BrowserTatsächlich sieht es genauso aus wie die Seite der ursprünglichen Anwendung, und der einzige merkliche Unterschied zwischen diesen Seiten besteht darin, dass der an die
Header Komponente übergebene Benutzername jetzt in der ersten Zeile angezeigt wird.
Hier ist der vollständige Code für die verarbeitete Datei
index.js :
import React, {Component} from "react" import ReactDOM from "react-dom"
Wenn die Umsetzung dieser praktischen Aufgabe Ihnen keine Schwierigkeiten bereitet hat - großartig. Wenn Sie mit Komponenten, die auf Klassen basieren, immer noch nicht ganz vertraut sind, nehmen Sie sich Zeit, um mit ihnen zu experimentieren. Beispielsweise können Sie klassenbasierte Komponenten wieder in funktionale Komponenten umwandeln und dann die inverse Transformation durchführen.
Lektion 26. Komponentenstatus
→
OriginalZustand ist ein unglaublich wichtiges Reaktionskonzept. Wenn die Komponente eigene Daten speichern und diese Daten verwalten muss (im Gegensatz zu der Situation, in der die übergeordnete Komponente Daten mithilfe des Eigenschaftsmechanismus an sie überträgt), verwenden Sie den Status der Komponente. Heute betrachten wir die grundlegenden Konzepte bezüglich des Zustands von Komponenten.
Ein Status sind nur die Daten, die die Komponente steuert. Dies bedeutet insbesondere, dass die Komponente diese Daten ändern kann. Gleichzeitig können die uns bereits bekannten Eigenschaften, die die Komponente von der übergeordneten Komponente erhält, von der empfangenden Komponente nicht geändert werden. Sie sind laut React-
Dokumentation unveränderlich (unveränderlich). Wenn wir beispielsweise in einer auf einer Klasse basierenden Komponente versuchen, ein Konstrukt wie
this.props.name = "NoName" , wird eine Fehlermeldung
this.props.name = "NoName" .
Es sollte beachtet werden, dass, wenn eine Komponente mit state arbeiten muss, es sich um eine Komponente handeln sollte, die auf der Klasse basiert. Lassen Sie uns darüber sprechen, wie Sie die Komponente mit state ausstatten, indem Sie mit dem folgenden Codefragment beginnen, das den Inhalt der Datei
App.js eines Standardprojekts enthält, das von
create-react-app :
import React from "react" class App extends React.Component { render() { return ( <div> <h1>Is state important to know?</h1> </div> ) } } export default App
So sieht die Anwendungsseite in einem Browser aus.
Anwendungsseite im BrowserUm eine Komponente mit state auszustatten, müssen Sie zunächst einen Klassenkonstruktor erstellen. Es sieht aus wie eine
constructor() -Klassenmethode. Danach sieht der Komponentencode folgendermaßen aus:
class App extends React.Component { constructor() { } render() { return ( <div> <h1>Is state important to know?</h1> </div> ) } } Constructor()
Dies ist eine spezielle in JavaScript integrierte Methode, mit der Objekte basierend auf Klassen erstellt und initialisiert werden können. Wenn Sie beim Erstellen eines Objekts etwas initialisieren müssen, werden die entsprechenden Operationen genau in der Methode
constructor() .
Das erste, was Sie im Konstruktorcode tun müssen, ist, den Konstruktor der übergeordneten Klasse aufzurufen. Dies erfolgt mit der Funktion
super() . Im Konstruktor der übergeordneten Klasse können bestimmte Initialisierungsoperationen ausgeführt werden, deren Ergebnisse für unser Objekt nützlich sind. So sieht unser Klassenkonstruktor jetzt aus:
constructor() { super() }
Um die Komponente mit state auszustatten, müssen wir im Konstruktor die class -Eigenschaft zur Klasseninstanz hinzufügen. Diese Eigenschaft ist ein Objekt:
constructor() { super() this.state = {} }
Hier haben wir es mit einem leeren Objekt initialisiert. Mit dem Konstrukt
this.state können Sie mit dem Status im Komponentencode
this.state . Fügen Sie dem Status eine neue Eigenschaft hinzu:
constructor() { super() this.state = { answer: "Yes" } }
Lassen Sie uns nun darüber nachdenken, wie Sie das verwenden, was im Code im Status gespeichert ist. Denken Sie daran, dass die Komponente die Frage anzeigt.
Is state important to know? . Der Staat speichert die Antwort auf diese Frage. Um diese Antwort nach der Frage hinzuzufügen, müssen Sie dasselbe tun, wie wir es normalerweise tun, indem Sie dem JSX-Code JavaScript-Konstrukte hinzufügen.
{this.state.answer} nämlich das Konstrukt
{this.state.answer} am Ende der Zeile hinzu. Infolgedessen sieht der vollständige Komponentencode folgendermaßen aus:
class App extends React.Component { constructor() { super() this.state = { answer: "Yes" } } render() { return ( <div> <h1>Is state important to know? {this.state.answer}</h1> </div> ) } }
Und so sieht die Anwendungsseite im Browser aus.
Anwendungsseite im BrowserAn dieser Stelle möchte ich darauf hinweisen, dass der Status, den die Komponente während der Initialisierung erhält, während des Betriebs der Komponente geändert werden kann. Darüber hinaus können Komponenten mithilfe des Mechanismus zum Arbeiten mit bereits bekannten Eigenschaften den Status an untergeordnete Komponenten übergeben. Wenn wir in unserem Fall beispielsweise davon ausgehen, dass es eine bestimmte Komponente von
ChildComponent , können Daten aus dem Status folgendermaßen an sie übertragen werden:
<ChildComponent answer={this.state.answer}/>
Wir werden zwar nicht im Detail darüber sprechen, wie die im Status der Komponente gespeicherten Daten geändert werden können. Wir stellen nur fest, dass beim Aufrufen der
setState() -Methode, mit der dieses Problem gelöst wird, nicht nur der Status der Komponente geändert wird, sondern auch die
setState() , die über den Eigenschaftsmechanismus an die untergeordneten Komponenten übertragen werden, aktualisiert werden. Wenn Sie den Status ändern, ändern sich außerdem die Daten aus dem auf der Anwendungsseite angezeigten Status automatisch.
Zusammenfassung
Heute hatten Sie die Möglichkeit, mit klassenbasierten Komponenten zu arbeiten. Darüber hinaus begann hier Ihre Einführung in das Konzept des Komponentenstatus. Das nächste Mal finden Sie praktische Aufgaben für die Arbeit mit dem Staat.
Liebe Leser! Wenn Sie React in der Praxis verwenden, teilen Sie uns bitte mit, wie Sie den Status von Komponenten verwalten. Verwenden Sie Standard-React-Tools oder etwas anderes?
