Crashkurs für Anfänger, Teil 3

Das Ergebnis ist vier  Komponenten hinzugefügt in unserer Galerie.

Es ist sehr mühsam, Filme manuell einzeln hinzuzufügen App.js. In der Praxis würden App-Daten wahrscheinlich aus einer Datenbank stammen und vorübergehend in einem JSON-Objekt gespeichert werden, bevor sie dem Statusobjekt in Ihrer App hinzugefügt werden.

React State verwalten

Was ist der Status in einer React-App? Sie können es sich als ein einzelnes JavaScript-Objekt vorstellen, das alle Daten in Ihrer App darstellt. Der Status kann für jede Komponente definiert werden. Wenn Sie jedoch den Status zwischen Komponenten gemeinsam nutzen möchten, sollten Sie ihn für die Komponente der obersten Ebene definieren. Der Zustand kann dann an untergeordnete Komponenten übergeben und bei Bedarf abgerufen werden.

Obwohl state ein Hauptobjekt ist, kann dieses Objekt mehrere Unterobjekte enthalten, die sich auf verschiedene Teile Ihrer App beziehen. In einer Einkaufswagen-App haben Sie beispielsweise ein Statusobjekt für die Artikel in Ihrer Bestellung und ein anderes Objekt zur Überwachung des Inventars.

In unserer 'Movie Mojo'-App haben wir nur ein einziges Sub-State-Objekt, um die Filme in unserer Galerie zu speichern.

Die Kernidee bei der Verwendung von state ist, dass React die relevanten Teile des DOM für Sie aktualisiert, sobald sich Daten in Ihrer App ändern. Sie müssen lediglich die Daten oder den Status in Ihrer App verwalten und React übernimmt alle DOM-Aktualisierungen.

Filme über Zustand hinzufügen

Der Einfachheit halber verzichten wir auf den Datenbankschritt und geben vor, dass unsere Filmdaten aus einer Datenbank abgerufen und im JSON-Format gespeichert wurden.

Um das Hinzufügen von Elementen zu einem Anfangsstatus sowie das Aktualisieren des Status beim Auftreten eines Ereignisses (z. B. Drücken einer Schaltfläche) zu demonstrieren, verwenden wir zwei JSON-Objekte, die jeweils Daten zu vier Filmen enthalten.

In dem src Ordner, fügen Sie einen neuen hinzu movies.js Datei, öffnen Sie sie in einem Editor und fügen Sie den folgenden Code hinzu, um unsere beiden JSON-Objekte zu definieren:

// Einige Beispielfilme const initialMovies = movie1: title: "Ferris Buellers Day Off", Jahr: "1986", Beschreibung: "Ein klasse Mann aus der High School ist entschlossen, einen Schultag zu haben, obwohl der Schulleiter denkt of. ", poster:" ./posters/ferris.png ", movie2: title:" Bridget Jones 'Diary ", Jahr:" 2001 ", Beschreibung:" Eine britische Frau ist entschlossen, sich zu verbessern, während sie aussieht für die Liebe in einem Jahr, in dem sie ein persönliches Tagebuch führt. ", poster:" ./posters/bridget-jones.png ", movie3: title:" 50 First Dates ", Jahr:" 2004 ", Beschreibung:" Henry Roth ist ein Mann, der Angst vor dem Engagement hat, bis er die schöne Lucy trifft. Sie glauben, dass er das Mädchen seiner Träume gefunden hat. ", Poster:" ./posters/50-first-dates.png " , movie4: title: "Matilda", Jahr: "1996", Beschreibung: "Geschichte eines wunderbaren kleinen Mädchens, das zufällig ein Genie ist, und ihrer wunderbaren Lehrerin gegen die schlechtesten Eltern, die je erlebt haben, und den denkbar schlechtesten Schulleiter. ", poster:" ./posters/matil da.png "; const additionalMovies = movie5: title: "Dirty Dancing", Jahr: "1987", Beschreibung: "Frances 'Baby' Houseman verbringt den Sommer mit ihrer Familie in einem Catskills Resort und verliebt sich in den Tanzlehrer des Lagers, Johnny Castle . ", poster:" ./posters/dirty-dancing.png ", movie6: title:" When Harry Met Sally ", Jahr:" 1989 ", Beschreibung:" Harry und Sally kennen sich seit Jahren, und sind sehr gute Freunde, aber sie fürchten, Sex würde die Freundschaft ruinieren. ", poster:" ./posters/when-harry-met-sally.png ", movie7: title:" Elf ", year:" 2003 ", Beschreibung: "Nachdem die Elfengemeinschaft aufgrund ihrer unhandlichen Größe versehentlich Chaos angerichtet hat, wird ein am Nordpol als Elf aufgezogener Mann auf der Suche nach seiner wahren Identität in die USA geschickt.", poster: "./posters/elf. png ", movie8: title:" Grease ", Jahr:" 1978 ", Beschreibung:" Das gute Mädchen Sandy und der Schmierer Danny haben sich im Sommer verliebt. Wenn sie unerwartet feststellen, dass sie jetzt in derselben High School sind, werden sie es tun Sie können Thei wieder aufleben lassen r romanze? ", poster:" ./posters/grease.png "; export initialMovies; export additionalMovies;

Bevor wir die JSON-Objekte in unserem referenzieren können  Komponente müssen wir sie importieren. Fügen Sie dies oben hinzu App.js:

importieren Sie initialMovies aus '… / movies'; importieren Sie additionalMovies aus '… / movies';

Jedes JSON-Objekt ist jetzt über die Variablen verfügbar AnfangsFilme und zusätzlicheFilme. Bislang haben wir jedoch keinen Status für unsere App. Lassen Sie uns das jetzt beheben.

Die oberste Komponente in unserer 'Movie Mojo'-App ist , Fügen wir also hier unser Zustandsobjekt hinzu. Der Zustand muss zusammen mit der Komponentenklasse initialisiert werden, was über die Konstruktorfunktion ausgeführt werden kann.

Wenn Sie eine Konstruktorfunktion in einer React-Klasse verwenden, müssen Sie aufrufen Super() zuerst als Komponente Das Objekt, das wir erweitern, muss vor allem anderen initialisiert werden. Plus das diese Das Schlüsselwort steht erst danach im Konstruktor zur Verfügung Super() ist zurückgekommen.

Um unser zu initialisieren Zustand Objekt, fügen Sie dies in die  Bauteilklasse:

Konstruktor () Super (); this.state = movies: ; 

Dadurch wird ein leeres Zustandsobjekt für unsere React-App erstellt. Mit den React-Entwicklerwerkzeugen sehen wir die Zustand Objekt direkt auf dem initialisiert  Komponente.

Wir möchten jedoch das initialisieren Zustand Objekt mit einigen Filmen, so dass sie sofort beim Laden der Seite angezeigt werden. Dazu können wir das initialisieren Filme Zustandsobjekt mit AnfangsFilme anstelle eines leeren Objekts.

Konstruktor () Super (); this.state = movies: initialMovies; 

Dadurch wird der Anfangsstatus für unsere App auf die vier Filme festgelegt, die im gespeichert sind AnfangsFilme JSON-Objekt, aber die Filme in der Galerie werden weiterhin über das fest codierte angezeigt  Komponenten, die wir zuvor hinzugefügt haben.

Wir müssen die Filme in der ausgeben Film Stattdessen können Sie ein Zustandsobjekt verwenden. Dies kann durch Verwenden einer Schleife zum Durchlaufen jedes Films erreicht werden.

Beginnen Sie mit dem Entfernen der fest codierten  Komponenten, und ersetzen Sie sie durch:

Object .keys (this.state.movies) .map (Schlüssel => )

Dieser Code bedarf einiger Erklärung. Das Film Das State-Objekt enthält einzelne Filme, die als Objekte gespeichert sind. Wenn Sie sie jedoch wiederholen, ist es einfacher, stattdessen mit einem Array zu arbeiten.

Also benutzen wir Object.keys () um alle Schlüssel für die Filmobjekte zu ergreifen und sie in einem Array zu speichern. Dies wird dann mit iteriert .Karte(), und ein  Komponente wird für jeden Film in ausgegeben Filme Zustandsobjekt.

Es gibt ein paar Änderungen gegenüber dem vorherigen Weg, den wir hinzugefügt haben , obwohl. Erstens geben wir alle Informationen für einen einzelnen Film über einen einzigen Film weiter Meta Stütze. Dies ist eigentlich bequemer als zuvor, wo wir für jedes Filmattribut eine eigene Requisite angegeben haben.

Beachten Sie auch, dass wir a angeben Schlüssel Stütze auch Dies wird intern von React verwendet, um die von der Schleife hinzugefügten Komponenten zu verfolgen. Es ist nicht für die Verwendung durch die Komponente verfügbar, Sie sollten also nicht versuchen, auf die Komponente in Ihrem eigenen Code zuzugreifen.

Ohne ein Schlüssel prop, React wirft einen Fehler, daher ist es wichtig, ihn einzuschließen. React muss wissen, welche neuen Filme hinzugefügt, aktualisiert oder entfernt wurden, damit alles synchronisiert werden kann.

Wir müssen noch etwas tun, bevor unsere Komponenten angezeigt werden können. Aufmachen Movie.js, und für jeden Verweis auf eine Requisite muss mit vorangestellt werden Meta, wie folgt:

 
this.props.meta.title
 
 
(this.props.meta.year)
 
this.props.meta.description
 

Weitere Filme laden

Wir haben gesehen, wie Filme angezeigt werden, die bei der Initialisierung unserer App hinzugefügt wurden, aber was wäre, wenn wir unsere Filmgalerie irgendwann aktualisieren wollten?

Hier strahlt React wirklich. Wir müssen nur die Filme im aktualisieren Film state object und React aktualisiert automatisch alle Teile unserer App, die dieses Objekt verwenden. Wenn wir also ein paar Filme hinzufügen, löst React das aus  Komponente machen() Methode, um unsere Filmgalerie zu aktualisieren.

Mal sehen, wie wir das umsetzen können.

Fügen Sie zunächst eine HTML-Schaltfläche im abschließenden div-Wrapper hinzu App.js.

Mehr laden… 

Wenn auf die Schaltfläche geklickt wird, eine Klassenmethode loadAdditionalMovies wird genannt. Fügen Sie diese Methode dem hinzu  Bauteilklasse:

loadAdditionalMovies () var currentMovies = … this.state.movies; var newMovies = Object.assign (aktuelleMovies, zusätzlicheMovies); this.setState (movies: newMovies); 

Der Aktualisierungsstatus ist relativ einfach, solange Sie der empfohlenen Methode folgen, nämlich das aktuelle Statusobjekt in ein neues Objekt zu kopieren und diese Kopie mit neuen Elementen zu aktualisieren. Um dann den neuen Zustand festzulegen, rufen wir an this.setState und übergeben Sie unser neues Zustandsobjekt, um das vorherige zu überschreiben. Sobald der Status aktualisiert wird, aktualisiert React nur die Teile des DOM, die von der Statusänderung betroffen sind.

Die erste Zeile in loadAdditionalMovies () verwendet a Verbreitung Operator, um alle Eigenschaften des zu kopieren this.state.movies Objekt in das Neue aktuelleFilme Objekt.

Danach verwenden wir Objektzuweisung Um zwei Objekte zusammenzuführen, wird die Liste der neuen Filme zur aktuellen Liste hinzugefügt.

Es ist nur noch ein weiterer Schritt, den wir vor dem erledigen müssen loadAdditionalMovies () Methode wird funktionieren. Um auf eine benutzerdefinierte Komponentenmethode zu verweisen, müssen Sie sie zuerst manuell an die Komponentenklasse binden.

Dies ist eine Eigenart von React und ist etwas, was Sie unbedingt beachten müssen. Jedes Mal, wenn auf eine Methode zugegriffen wird, ohne manuell gebunden zu sein, wird sich React beschweren und einen Kompilierungsfehler auslösen.

Fügen Sie dies dem Klassenkonstruktor in hinzu App.js:

this.loadAdditionalMovies = this.loadAdditionalMovies.bind (this);

Solange Sie daran denken, diese Problemumgehung für jede benutzerdefinierte Methode zu verwenden, für die die Verwendung von erforderlich ist diese, Sie werden keine Probleme haben.

Versuchen Sie jetzt, auf die Schaltfläche zu klicken Mehr laden…  Taste. Sie sollten vier weitere Filme sehen, die der Galerie hinzugefügt wurden.

Dies zeigt eine wichtige Stärke von React. Das heißt, Sie können sich auf die Daten in Ihrer App konzentrieren und lassen die alltäglichen Aktualisierungen des DOMs auf React warten. Um Filme hinzuzufügen, mussten wir nur die Daten in unserem aktualisieren Film Zustandsobjekt und React kümmerte sich um alles andere.

Unsere Beispiel-App ist immer noch ziemlich einfach, aber stellen Sie sich eine viel komplexere App mit vielen Komponenten und mehreren Statusobjekten vor. Der Versuch, das DOM manuell zu aktualisieren, wenn sich die Daten in Ihrer App ändern, wäre eine große (und fehleranfällige) Aufgabe!

Fazit

In diesem Tutorial haben wir mit unserer 'Movie Mojo'-App einige Fortschritte erzielt. Wir haben den React-Status verwendet, um die Liste der Filme in unserer App zu verwalten. Wir haben nicht nur Filme zu dem Anfangsstatusobjekt hinzugefügt, während unsere App initialisiert wurde, sondern wir haben auch die Liste der Filme in unserer Galerie aktualisiert Mehr laden…  Button wurde angeklickt.

In Teil vier und im letzten Tutorial dieser Serie wird gezeigt, wie wir unserer Galerie über ein benutzerdefiniertes Formular einen Film manuell hinzufügen können. Die Benutzer können das Formular ausfüllen und Details zu einem Film hinzufügen, die der Liste der in der Galerie angezeigten Filme hinzugefügt werden.