React Crash Course for Beginners, del 3

Resultatet er fire  komponenter lagt til vårt galleri.

Det er veldig kjedelig å legge til filmer manuelt en om gangen App.js. I praksis vil appdata trolig komme fra en database og bli midlertidig lagret i et JSON-objekt før det legges til statobjektet i appen din.

Administrere React State

Hva er tilstanden i en React-app? Du kan tenke på det som et enkelt JavaScript-objekt som representerer alle dataene i appen din. Stat kan defineres på hvilken som helst komponent, men hvis du vil dele tilstand mellom komponenter, er det bedre å definere det på komponenten på toppnivå. Stat kan deretter sendes ned til barnekomponenter og åpnes etter behov.

Selv om staten er ett hovedobjekt, kan objektet inneholde flere underobjekter knyttet til ulike deler av appen din. For eksempel, i en handlekurv-app, kan du ha et statlig objekt for elementene i bestillingen din, og et annet objekt for overvåking av inventar.

I vår "Movie Mojo" -app har vi bare et enkelt delstatobjekt for å lagre filmene i vårt galleri.

Kjerneideen bak bruk av tilstand er at når data i appen din endres, Reager oppdaterer de relevante delene av DOM for deg. Alt du trenger å gjøre er å administrere dataene eller statene i appen din, og React håndterer alle DOM-oppdateringene.

Legge til filmer via stat

For enkelhets skyld, vil vi avstå fra databasestrinnet og late som filmdataene våre er hentet fra en database og lagret i JSON-format.

For å demonstrere å legge til elementer i en innledende tilstand, samt oppdatere tilstand når en hendelse oppstår (for eksempel en knappetrykk), bruker vi to JSON-objekter, som hver inneholder data om fire filmer.

I src mappe, legg til en ny movies.js fil, åpne den i en editor, og legg til følgende kode for å definere våre to JSON-objekter:

// noen prøvefilmer const initialMovies = movie1: title: "Ferris Bueller's Day Off", år: "1986", beskrivelse: "En videregående skole er fast bestemt på å ha en fridag fra skolen, til tross for hva regjeringen mener av det. ", plakat:" ./posters/ferris.png ", movie2: title:" Bridget Jones 'Diary ", år:" 2001 ", beskrivelse:" En britisk kvinne er fast bestemt på å forbedre seg selv mens hun ser ut for kjærlighet i et år hvor hun holder en personlig dagbok. ", poster:" ./posters/bridget-jones.png ", movie3: title:" 50 First Dates ", år:" 2004 ", beskrivelse:" Henry Roth er en mann som er redd for engasjement frem til han møter den vakre Lucy. De slår den av og Henry tror at han endelig har funnet drømmets jente. ", Poster:" ./posters/50-first-dates.png " , film4: title: "Matilda", år: "1996", beskrivelse: "Historie om en fantastisk liten jente, som skjer for å være et geni, og hennes fantastiske lærer vs de verste foreldrene noensinne og den verste skolens hovedstol tenkelige. ", plakat:" ./posters/matil da.png "; const additionalMovies = movie5: title: "Dirty Dancing", år: "1987", beskrivelse: "Tilbringe sommeren på et Catskills resort med familien hennes, blir Frances 'Baby' Houseman forelsket i leirens dansinstruktør, Johnny Castle . ", poster:" ./posters/dirty-dancing.png ", movie6: title:" Når Harry Met Sally ", år:" 1989 ", beskrivelse:" Harry og Sally har kjent hverandre i mange år, og er veldig gode venner, men de frykter at sex vil ødelegge vennskapet. ", plakat:" ./posters/when-harry-met-sally.png ", movie7: title:" Elf ", år:" 2003 ", beskrivelse: "Etter en utilsiktet ødeleggelse på elleve samfunn på grunn av sin uhyggelige størrelse, blir en mann oppdratt som en elv på Nordpolen sendt til USA på jakt etter sin sanne identitet.", plakat: "./posters/elf. png ", film8: title:" Grease ", år:" 1978 ", beskrivelse:" God jente Sandy og fettmann Danny ble forelsket i løpet av sommeren. Når de uventet oppdager at de nå er i samme videregående skole, vil de kan rekindle thei r romantikk? ", plakat:" ./posters/grease.png "; eksporter initialMovies; eksporter additionalMovies;

Før vi kan referere til JSON-objektene i vår  komponent, vi må importere dem. Legg dette til toppen av App.js:

importer initialMovies fra '... / movies'; importer additionalMovies fra '... / movies';

Hvert JSON-objekt er nå tilgjengelig via variablene initialMovies og additionalMovies. Så langt har vi imidlertid ingen tilstand knyttet til vår app. La oss fikse det nå.

Komponenten på toppnivå i vår "Movie Mojo" -app er , så la oss legge til vårt statsobjekt her. Vi trenger tilstand som skal initialiseres sammen med komponentklassen, som vi kan gjøre via konstruktørfunksjonen.

Når du bruker en konstruktørfunksjon i en React-klasse, må du ringe super() først som Komponent objekt vi utvider behov for å bli initialisert før noe annet. Pluss, den dette Søkeordet vil ikke være tilgjengelig innenfor konstruktøren før etterpå super() har returnert.

For å initialisere vår stat objekt, legg til dette inne i  komponent klasse:

konstruktør () super (); this.state = filmer: ; 

Dette vil opprette et tomt tilstandsobjekt for vår React-app. Ved hjelp av React-utviklerverktøyene kan vi se stat objekt initialisert direkte på  komponent.

Vi vil imidlertid initialisere stat objekt med noen filmer slik at de vises med en gang på siden lastes. For å gjøre dette kan vi initialisere filmer statlig objekt med initialMovies i stedet for en tom gjenstand.

konstruktør () super (); this.state = movies: initialMovies; 

Dette vil angi startstatusen for vår app til de fire filmene som er lagret i initialMovies JSON-objekt, men filmene i galleriet vises fortsatt via den hardkodede  komponenter vi la til tidligere.

Vi må skrive ut filmene i film Status objektet i stedet, som vi kan gjøre ved å bruke en loop for å iterere over hver film.

Start med å fjerne den hardkodede  komponenter, og erstatt dem med:

Object .keys (this.state.movies) .map (key => )

Denne koden krever noen forklaring. De film Statobjekt inneholder individuelle filmer lagret som objekter, men for å iterere over dem ville det være lettere å arbeide med en matrise i stedet.

Så vi bruker Object.keys () å ta tak i alle nøklene for filmobjektene og lagre dem i en matrise. Dette er deretter iterert over bruk .kart(), og a  komponent utgis for hver film i filmer statobjekt.

Det er et par endringer fra den forrige måten vi la til en , selv om. For det første sender vi all informasjonen til en individuell film via en enkelt meta rekvisitt. Dette er faktisk mer praktisk enn tidligere, der vi angav en egen prop for hver filmattributt.

Legg merke til at vi spesifiserer en nøkkel prop også. Dette brukes internt av React for å holde oversikt over komponenter som er lagt til av loopen. Det er faktisk ikke tilgjengelig for bruk av komponenten, så du bør ikke prøve å få tilgang til den i din egen kode.

Uten en nøkkel prop, React kaster en feil, så det er viktig å inkludere det. Reag trenger å vite hvilke nye filmer som er lagt til, oppdatert eller fjernet, slik at alt kan synkroniseres.

Vi må gjøre enda en ting før komponentene våre kan vises. Åpne opp Movie.js, og for hver referanse til en prop, prefix den med meta, som følger:

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

Laster inn flere filmer

Vi har sett hvordan du viser filmer som har blitt lagt til for staten som vår app starter, men hva om vi ønsket å oppdatere vår filmgalleri på et tidspunkt?

Dette er hvor React virkelig skinner. Alt vi trenger å gjøre er å oppdatere filmene i film statobjekt, og React oppdaterer automatisk alle deler av appen som bruker dette objektet. Så, hvis vi legger til noen filmer, vil React utløse  komponenten render () Metode for å oppdatere filmgalleriet.

La oss se hvordan vi kan implementere dette.

Start med å legge til en HTML-knapp i den avsluttende div wrapper i App.js.

Last mer… 

Når knappen klikkes, en klassemetode loadAdditionalMovies er kalt. Legg denne metoden til  komponent klasse:

loadAdditionalMovies () var currentMovies = ... this.state.movies; var newMovies = Object.assign (currentMovies, additionalMovies); this.setState (movies: newMovies); 

Oppdateringsstatus er relativt enkel så lenge du følger den anbefalte metoden, som er å kopiere det nåværende tilstandsobjektet til et nytt objekt, og oppdatere den kopien med nye elementer. Så, for å sette den nye staten, kaller vi this.setState og passere i vårt nye statsobjekt for å overskrive den forrige. Så snart staten er oppdatert, oppdaterer React bare delene av DOM som har blitt påvirket av endringen til tilstand.

Den første linjen i loadAdditionalMovies () bruker a spredt operatør for å kopiere alle egenskapene til this.state.movies objekt inn i det nye currentMovies gjenstand.

Etter det bruker vi Object.assign å slå sammen to objekter sammen, noe som resulterer i at listen over nye filmer blir lagt til den nåværende listen.

Det er bare ett skritt som vi må fullføre før loadAdditionalMovies () metoden vil fungere. For å referere til en tilpasset komponentmetode må vi først manuelt binde den til komponentklassen.

Dette er en ekte React, og er bare noe du må huske å gjøre. Når en metode nås uten å være bundet manuelt, vil React klage og kaste en kompileringsfeil.

Legg dette til klassekonstruktøren i App.js:

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

Så lenge du husker å bruke denne løsningen for hver tilpasset metode som krever bruk av dette, du vil ikke løse noen problemer.

Nå, prøv å klikke på Last mer…  Knapp. Du bør se fire flere filmer lagt til galleriet.

Dette viser en nøkkelstyrke til React. Det vil si at du lar deg fokusere på dataene i appen din, og la all den daglige oppdateringen av DOM'en til React. For å legge til filmer var alt vi måtte gjøre for å oppdatere dataene i vår film statlig objekt, og React tok seg av alt annet.

Vårt eksempel-app er fortsatt ganske grunnleggende, men forestill deg en mye mer komplisert app med mange komponenter og flere statlige objekter. Forsøker å manuelt oppdatere DOM ettersom dataene i appendringene dine ville være en stor (og feilaktig) oppgave!

Konklusjon

I denne opplæringen har vi gjort noe fremgang med vår "Movie Mojo" -app. Vi brukte React-tilstand for å administrere listen over filmer i appen vår. Ikke bare lagde vi filmer til det opprinnelige tilstandsobjektet da vår app ble initialisert, men vi oppdaterte også listen over filmer i vårt galleri når Last mer…  Knappen ble klikket.

I del fire og den siste opplæringen i denne serien, tar vi en titt på hvordan vi manuelt kan legge til en film i vårt galleri via et egendefinert skjema. Brukere vil kunne fylle ut skjemaet og legge til detaljer om en film, som vil bli lagt til i listen over filmer som vises i galleriet.