Reacționează cursul de prăbușire pentru începători, partea a 3-a

Rezultatul este de patru  componente adăugate în galeria noastră.

Este foarte dificil să adăugați manual filme una câte una înăuntru App.js. În practică, datele aplicațiilor ar proveni probabil dintr-o bază de date și vor fi stocate temporar într-un obiect JSON înainte de a fi adăugate la obiectul de stare din aplicația dvs..

Gestionarea statului reactiv

Ce este starea într-o aplicație React? Vă puteți gândi la acesta ca la un singur obiect JavaScript care reprezintă toate datele din aplicația dvs. Statul poate fi definit pe orice componentă, dar dacă doriți să împărțiți stat între componente, atunci este mai bine să îl definiți pe componenta de nivel superior. Statul poate fi apoi transferat la componente copil și accesat după cum este necesar.

Chiar dacă statul este un obiect principal, obiectul poate conține mai multe sub-obiecte legate de diferite părți ale aplicației. De exemplu, într-o aplicație pentru coș de cumpărături, este posibil să aveți un obiect de stat pentru elementele din comanda dvs. și un alt obiect pentru monitorizarea inventarului.

În aplicația noastră "Movie Mojo", avem doar un singur obiect sub-stat pentru a stoca filmele în galeria noastră.

Ideea centrală din spatele utilizării stării este că ori de câte ori se schimbă datele din aplicația dvs., React actualizează părțile relevante din DOM pentru dvs. Tot ce trebuie să faceți este să gestionați datele sau să le specificați în aplicație, iar React gestionează toate actualizările DOM.

Adăugarea de filme prin intermediul statului

Din motive de simplitate, vom renunța la etapa bazei de date și vom pretinde că datele noastre despre filme au fost preluate dintr-o bază de date și stocate în format JSON.

Pentru a demonstra adăugarea elementelor la o stare inițială, precum și pentru actualizarea stării când apare un eveniment (de exemplu apăsarea unui buton), vom folosi două obiecte JSON, fiecare conținând date despre patru filme.

În src folder, adăugați un nou movies.js fișier, deschideți-l într-un editor și adăugați următorul cod pentru a defini cele două obiecte JSON:

// unele filme eșantion const initialMovies = movie1: titlu: "Ferris Bueller's Day Off", anul: "1986", descriere: "Un băiat de liceu este hotărât să aibă o zi liberă de la școală, în ciuda a ceea ce gândește principalul "., poster:" ./posters/ferris.png ", film2: title:" Jurnalul lui Bridget Jones ", anul:" 2001 ", descriere:" O femeie britanică este hotărâtă să se îmbunătățească în timp ce arată pentru dragoste într-un an în care își păstrează un jurnal personal ", poster:" ./posters/bridget-jones.png ", film3: title:" 50 First Dates ", anul:" 2004 " Henry Roth este un om care se teme de angajament până când se întâlnește cu frumoasa Lucy. Ei au lovit-o și Henry crede că a găsit în cele din urmă fata din visele sale "., Poster:" ./posters/50-first-dates.png " , filmul 4: title: "Matilda", anul: "1996", descriere: "Povestea unei fetițe minunate, care se întâmplă a fi un geniu, și profesorul ei minunat împotriva celor mai răi părinți vreodată, ", poster:" ./posters/matil da.png "; Conținut suplimentarMovies = movie5: title: "Dirty Dancing", anul: "1987", descriere: "Petreceți vara într-o stațiune din Catskills împreună cu familia ei, Frances 'Baby" Houseman se îndrăgostește de instructorul de dans al taberei, . ", poster:" ./posters/dirty-dancing.png ", film6: title:" Când Harry Met Sally ", anul:" 1989 ", descriere:" Harry și Sally s-au cunoscut de mai mulți ani sunt foarte buni prieteni, dar se tem că sexul va ruina prietenia. ", poster:" ./posters/when-harry-met-sally.png ", film7: titlu:" Elf ", anul:" 2003 " descriere: "După ce a făcut rău în mod necorespunzător comunității elfilor, din cauza dimensiunii sale nesimțite, un om ridicat ca un elf la Polul Nord este trimis în SUA în căutarea adevăratei sale identități.", poster: "./posters/elf. png ", film8: title:" Grease ", anul:" 1978 ", descriere:" Fata buna Sandy si Greaser Danny sa indragostit de vara. ei pot să-i reaprindă r romance? ", poster:" ./posters/grease.png "; export initialMovies; exportați additionalMovies;

Înainte de a putea face referire la obiectele JSON din cadrul nostru  componente, trebuie să le importăm. Adăugați aceasta în partea de sus a paginii App.js:

import initialMovies din "... / filme"; importați additionalMovies din "... / filme";

Fiecare obiect JSON este acum disponibil prin intermediul variabilelor initialMovies și additionalMovies. Până acum, însă, nu avem niciun stat asociat cu aplicația noastră. Să rezolvăm asta acum.

Componenta de nivel superior din aplicația noastră "Movie Mojo" este , deci să adăugăm obiectul nostru de stat aici. Avem nevoie ca statul să fie inițializat împreună cu clasa de componente, pe care o putem face prin intermediul funcției constructorului.

Când utilizați o funcție constructor într-o clasă React, trebuie să apelați super() mai întâi ca component Obiectul pe care îl extindem trebuie inițializat înainte de orice altceva. În plus, acest cuvântul cheie nu va fi disponibil în interiorul constructorului decât după super() s-a intors.

Pentru a ne inițializa stat obiect, adăugați acest lucru în interiorul  clasa componente:

constructor () super (); this.state = filme: ; 

Acest lucru va crea un obiect de stare gol pentru aplicația noastră React. Folosind instrumentele React dezvoltator, putem vedea stat obiect inițializat direct pe  component.

Cu toate acestea, dorim să inițializăm stat obiecte cu unele filme, astfel încât acestea să apară imediat la încărcarea paginii. Pentru a face acest lucru, putem inițializa filme obiect de stat cu initialMovies în loc de un obiect gol.

constructor () super (); thisstatestate = filme: initialMovies; 

Aceasta va seta starea inițială pentru aplicația noastră la cele patru filme stocate în initialMovies Obiect JSON, dar filmele din galerie sunt încă afișate prin hard-codat  componente pe care le-am adăugat mai devreme.

Trebuie să scoatem filmele în film obiecte de stat în loc, pe care le putem face folosind o buclă pentru a itera peste fiecare film.

Începeți prin a scoate codul greu  componente și înlocuiți-le cu:

Object .key (această .state.movies) .map (key => )

Acest cod necesită explicații. film obiect de stat conține filme individuale stocate ca obiecte, dar pentru a le repeta, ar fi mai ușor să lucrați cu o matrice în schimb.

Deci folosim Object.keys () pentru a apuca toate cheile pentru obiectele de film și a le stoca într-o matrice. Acest lucru este apoi repetat folosind .Hartă(), și a  componenta este afișată pentru fiecare film din filme obiect de stat.

Există câteva modificări față de modul anterior în care am adăugat o , deşi. În primul rând, vom transmite toate informațiile pentru un film individual printr-un singur film meta prop. Acest lucru este de fapt mai convenabil decât înainte, unde am specificat o propoziție separată pentru fiecare atribut film.

De asemenea, observați că specificăm a cheie de asemenea. Acest lucru este utilizat intern de către React pentru a urmări componentele care au fost adăugate de bucla. Nu este de fapt disponibil pentru a fi utilizat de componentă, deci nu ar trebui să încercați să îl accesați în propriul cod.

Fără cheie prop, React aruncă o eroare, deci este important să o includeți. Reacționează că trebuie să știe care filme noi au fost adăugate, actualizate sau eliminate, pentru a putea păstra totul sincronizat.

Trebuie să facem încă un lucru înainte ca componentele noastre să poată fi afișate. Deschide Movie.js, și pentru fiecare referință la un element, prefixați-l meta, după cum urmează:

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

Încărcarea mai multor filme

Am văzut cum să afișăm filme care au fost adăugate la starea pe care inițiază aplicația noastră, dar dacă am vrea să ne actualizăm galeria de filme la un moment dat?

Aici reacționează cu adevărat React. Tot ce trebuie să facem este să actualizăm filmele în film obiect de stare, iar React va actualiza automat toate părțile din aplicația noastră care utilizează acest obiect. Deci, dacă adăugăm câteva filme, React va declanșa  componente face() de actualizare a galeriei de filme.

Să vedem cum putem implementa acest lucru.

Începeți prin adăugarea unui buton HTML în interiorul divizorului de închidere div App.js.

Incarca mai mult… 

Când faceți clic pe buton, o metodă de clasă loadAdditionalMovies se numește. Adăugați această metodă la  clasa componente:

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

Starea actualizării este relativ simplă atâta timp cât urmați metoda recomandată, care este de a copia obiectul de stare curentă la un obiect nou și de a actualiza copia cu elemente noi. Apoi, pentru a seta noua stare, sunăm this.setState și treceți în noul nostru obiect de stat pentru a suprascrie cel anterior. Imediat ce statul este actualizat, React actualizează doar părțile din DOM care au fost afectate de schimbare în stare.

Prima linie din loadAdditionalMovies () utilizează a răspândire operator pentru a copia toate proprietățile this.state.movies obiect în noul currentMovies obiect.

După aceea, vom folosi Object.assign pentru a îmbina două obiecte împreună, rezultând lista de filme noi adăugate în lista curentă.

Există încă un pas înainte pe care trebuie să-l finalizăm înainte loadAdditionalMovies () metoda va funcționa. Pentru a face referire la orice metodă a componentelor personalizate, trebuie mai întâi să le legăm manual la clasa de componente.

Acesta este un semn de reacție și este doar ceva ce va trebui să vă amintiți să faceți. Ori de câte ori este accesată o metodă fără a fi obligată manual, React se va plânge și ar arunca o eroare de compilare.

Adăugați aceasta la constructorul de clasă din App.js:

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

Atâta timp cât vă amintiți să utilizați această soluție pentru fiecare metodă personalizată care necesită utilizarea acest, nu veți avea probleme.

Acum, încercați să faceți clic pe Incarca mai mult…  Buton. Ar trebui să vedeți încă patru filme adăugate în galerie.

Acest lucru demonstrează o forță cheie a React. Aceasta înseamnă că vă permite să vă concentrați asupra datelor din aplicația dvs. și să lăsați toate actualizările luminoase ale DOM pentru a reacționa. Pentru a adăuga filme, tot ce trebuia să facem este să actualizăm datele din site-ul nostru film obiect de stat, iar React avea grijă de orice altceva.

Aplicația noastră de exemplu este încă destul de fundamentală, dar imaginați-vă o aplicație mult mai complexă cu mai multe componente și mai multe obiecte de stare. Încercarea de a actualiza manual DOM, deoarece datele din modificările aplicației ar fi o sarcină uriașă (și eronată)!

Concluzie

În acest tutorial am realizat cu adevărat unele progrese în aplicația noastră "Movie Mojo". Am folosit starea React pentru a ajuta la gestionarea listei de filme din aplicația noastră. Nu numai că am adăugat filme la obiectul inițial de stare, deoarece aplicația noastră a fost inițializată, dar, de asemenea, am actualizat lista de filme din galeria noastră atunci când Incarca mai mult…  Button a fost apăsat.

În partea a patra și ultimul tutorial din această serie, vom analiza modul în care putem adăuga manual un film la galeria noastră printr-un formular personalizat. Utilizatorii vor putea să completeze formularul și să adauge detalii despre un film, care va fi adăugat în lista de filme afișate în galerie.