React Crash Course per principianti, parte 3

Il risultato è quattro  componenti aggiunti alla nostra galleria.

È molto noioso aggiungere i filmati manualmente uno alla volta App.js. In pratica, i dati delle app provengono probabilmente da un database e vengono temporaneamente archiviati in un oggetto JSON prima di essere aggiunti all'oggetto di stato nell'app.

Gestione dello stato di reazione

Qual è lo stato di un'app React? Puoi considerarlo come un singolo oggetto JavaScript che rappresenta tutti i dati nella tua app. Lo stato può essere definito su qualsiasi componente, ma se si desidera condividere lo stato tra i componenti, è meglio definirlo nel componente di livello superiore. Lo stato può quindi essere passato ai componenti secondari e accessibile come richiesto.

Anche se lo stato è un oggetto principale, quell'oggetto può contenere più sotto-oggetti relativi a diverse parti della tua app. Ad esempio, in un'app del carrello degli acquisti, potresti avere un oggetto stato per gli articoli nel tuo ordine e un altro oggetto per il monitoraggio dell'inventario.

Nella nostra app "Movie Mojo", abbiamo solo un oggetto sotto-stato per archiviare i film nella nostra galleria.

L'idea alla base dello stato di utilizzo è che ogni volta che i dati nella tua app cambiano, React aggiorna le parti rilevanti del DOM per te. Tutto quello che devi fare è gestire i dati, o lo stato, nella tua app, e React gestisce tutti gli aggiornamenti DOM.

Aggiunta di filmati tramite stato

Per semplicità, rinunceremo al passaggio del database e faremo finta che i nostri dati del film siano stati recuperati da un database e archiviati in formato JSON.

Per dimostrare di aggiungere elementi a uno stato iniziale, nonché di aggiornare lo stato quando si verifica un evento (ad esempio un pulsante), verranno utilizzati due oggetti JSON, ciascuno contenente dati su quattro filmati.

Nel src cartella, aggiungi un nuovo movies.js file, aprilo in un editor e aggiungi il codice seguente per definire i nostri due oggetti JSON:

// alcuni film di esempio const initialMovies = movie1: title: "Ferris Bueller's Day Off", anno: "1986", descrizione: "Un ragazzo saggio del liceo è determinato ad avere un giorno libero da scuola, nonostante quello che pensa il preside di questo. ", locandina:" ./posters/ferris.png ", movie2: title:" Bridget Jones 'Diary ", anno:" 2001 ", descrizione:" Una donna inglese è determinata a migliorare se stessa mentre guarda per amore in un anno in cui tiene un diario personale. ", locandina:" ./posters/bridget-jones.png ", movie3: title:" 50 First Dates ", anno:" 2004 ", descrizione:" Henry Roth è un uomo impaurito dall'impegno fino a quando incontra la bella Lucy. L'hanno colpito e Henry pensa di aver finalmente trovato la ragazza dei suoi sogni. ", Locandina:" ./posters/50-first-dates.png " , movie4: title: "Matilda", anno: "1996", descrizione: "Storia di una meravigliosa bambina, che sembra essere un genio, e il suo meraviglioso insegnante contro i peggiori genitori di sempre e il peggior preside della scuola immaginabile. ", poster:" ./posters/matil da.png "; const additionalMovies = movie5: title: "Dirty Dancing", anno: "1987", descrizione: "Trascorrendo l'estate in una località di Catskills con la sua famiglia, Frances 'Baby' Houseman si innamora dell'istruttore di ballo del campo, Johnny Castle . ", poster:" ./posters/dirty-dancing.png ", movie6: title:" Harry Sally ", anno:" 1989 ", descrizione:" Harry e Sally si conoscono da anni, e sono molto amici, ma temono che il sesso rovinerebbe l'amicizia. ", locandina:" ./posters/when-harry-met-sally.png ", movie7: title:" Elf ", anno:" 2003 ", Descrizione: "Dopo aver inavvertitamente devastato la comunità degli elfi a causa delle sue dimensioni sgraziate, un uomo cresciuto come un elfo al Polo Nord viene inviato negli Stati Uniti in cerca della sua vera identità.", locandina: "./posters/elf. png ", movie8: title:" Grease ", anno:" 1978 ", descrizione:" La brava ragazza Sandy e l'ingrassatrice Danny si sono innamorati durante l'estate. Quando scopriranno inaspettatamente che ora sono nella stessa scuola superiore, sono in grado di riaccendere il thei r romance? ", poster:" ./posters/grease.png "; export initialMovies; export additionalMovies;

Prima di poter fare riferimento agli oggetti JSON nel nostro  componente, dobbiamo importarli. Aggiungi questo all'inizio App.js:

import initialMovies da '... / movies'; importare additionalMovies da "... / movies";

Ogni oggetto JSON è ora disponibile tramite le variabili initialMovies e additionalMovies. Finora, tuttavia, non abbiamo alcun stato associato alla nostra app. Risolviamolo ora.

Il componente di primo livello nella nostra app "Movie Mojo" è , quindi aggiungiamo il nostro oggetto stato qui. Abbiamo bisogno che lo stato sia inizializzato insieme alla classe del componente, cosa che possiamo fare tramite la funzione di costruzione.

Quando si utilizza una funzione di costruzione in una classe React, è necessario chiamare super() prima come il Componente l'oggetto che stiamo estendendo deve essere inizializzato prima di ogni altra cosa. Inoltre, il Questo la parola chiave non sarà disponibile all'interno del costruttore fino a dopo super() è tornato.

Per inizializzare il nostro stato oggetto, aggiungi questo dentro il  classe componente:

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

Questo creerà un oggetto stato vuoto per la nostra app React. Utilizzando gli strumenti di sviluppo di React, possiamo vedere il stato oggetto inizializzato direttamente sul  componente.

Tuttavia, vogliamo inizializzare il stato oggetto con alcuni film in modo che vengano visualizzati immediatamente al caricamento della pagina. Per fare ciò, possiamo inizializzare il film oggetto di stato con initialMovies invece di un oggetto vuoto.

constructor () super (); this.state = movies: initialMovies; 

Questo imposterà lo stato iniziale della nostra app ai quattro film memorizzati nel initialMovies Oggetto JSON, ma i filmati nella galleria vengono ancora visualizzati tramite hard-coded  componenti che abbiamo aggiunto in precedenza.

Abbiamo bisogno di produrre i film in film oggetto di stato invece, che possiamo fare usando un ciclo per scorrere su ogni film.

Inizia rimuovendo l'hardcoded  componenti e sostituirli con:

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

Questo codice richiede alcune spiegazioni. Il film oggetto di stato contiene singoli filmati memorizzati come oggetti, ma per scorrere su di essi sarebbe invece più semplice lavorare con un array.

Quindi usiamo Object.keys () per prendere tutte le chiavi per gli oggetti film e memorizzarli in un array. Questo viene poi ripetuto durante l'utilizzo .carta geografica(), e a  componente viene emesso per ogni film nel film oggetto di stato.

Ci sono un paio di cambiamenti dal modo precedente in cui abbiamo aggiunto un , anche se. Innanzitutto, passiamo tutte le informazioni per un singolo film tramite un singolo meta puntello. Questo è in realtà più conveniente di prima, in cui abbiamo specificato un puntello separato per ciascun attributo del film.

Inoltre, nota che specificiamo a chiave prop anche. Questo viene usato internamente da React per tenere traccia dei componenti che sono stati aggiunti dal loop. Non è attualmente disponibile per essere utilizzato dal componente, quindi non dovresti provare ad accedervi nel tuo codice.

Senza un chiave prop, React genera un errore, quindi è importante includerlo. Reagire deve sapere quali nuovi film sono stati aggiunti, aggiornati o rimossi in modo da poter mantenere tutto sincronizzato.

Dobbiamo fare ancora una cosa prima che i nostri componenti possano essere visualizzati. Aprire Movie.js, e per ogni riferimento a un sostegno, prefisso con meta, come segue:

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

Caricamento di altri film

Abbiamo visto come visualizzare i filmati che sono stati aggiunti allo stato di inizializzazione della nostra app, ma se volessimo aggiornare la nostra galleria di film ad un certo punto?

È qui che React brilla davvero. Tutto quello che dobbiamo fare è aggiornare i film in film stato oggetto, e React aggiornerà automaticamente tutte le parti della nostra app che utilizzano questo oggetto. Quindi, se aggiungiamo alcuni film, React attiverà il  componente di render () metodo per aggiornare la nostra galleria di film.

Vediamo come possiamo implementarlo.

Inizia aggiungendo un pulsante HTML all'interno del wrapper div di chiusura in App.js.

Carica altro ... 

Quando si fa clic sul pulsante, un metodo di classe loadAdditionalMovies è chiamato. Aggiungi questo metodo al  classe componente:

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

L'aggiornamento dello stato è relativamente semplice se si segue il metodo consigliato, ovvero copiare l'oggetto stato corrente in un nuovo oggetto e aggiornarlo con nuovi elementi. Quindi, per impostare il nuovo stato, chiamiamo this.setState e passare nel nostro nuovo oggetto stato per sovrascrivere quello precedente. Non appena lo stato viene aggiornato, React aggiorna solo le parti del DOM che sono state interessate dalla modifica allo stato.

La prima riga in loadAdditionalMovies () usa a diffusione operatore per copiare tutte le proprietà del this.state.movies oggetto nel nuovo currentMovies oggetto.

Dopo ciò, usiamo Object.assign unire due oggetti insieme, risultando nell'elenco dei nuovi film aggiunti all'elenco corrente.

C'è solo un altro passo che dobbiamo completare prima del loadAdditionalMovies () il metodo funzionerà. Per fare riferimento a qualsiasi metodo di componente personalizzato, prima dobbiamo associarlo manualmente alla classe del componente.

Questa è una stranezza di React ed è solo qualcosa che dovrai ricordare di fare. Ogni volta che si accede a un metodo senza essere stato associato manualmente, React si lamenterà e genererà un errore di compilazione.

Aggiungi questo al costruttore della classe in App.js:

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

Finché ti ricordi di usare questa soluzione alternativa per ogni metodo personalizzato che richiede l'uso di Questo, non avrai problemi.

Ora, prova a fare clic su Carica altro ...  Pulsante. Dovresti vedere altri quattro film aggiunti alla galleria.

Questo dimostra una forza chiave di React. Cioè, permettendoti di concentrarti sui dati della tua app e lasciare tutto il banale aggiornamento del DOM a React. Per aggiungere film, tutto ciò che dovevamo fare era aggiornare i dati nel nostro film oggetto di stato, e React si è occupato di tutto il resto.

La nostra app di esempio è ancora piuttosto semplice, ma immagina un'app molto più complessa con molti componenti e più oggetti di stato. Cercando di aggiornare manualmente il DOM come i dati nelle modifiche dell'app sarebbe un compito enorme (e soggetto ad errori)!

Conclusione

In questo tutorial, abbiamo davvero fatto progressi con la nostra app "Movie Mojo". Abbiamo utilizzato lo stato React per aiutare a gestire l'elenco dei film nella nostra app. Non solo abbiamo aggiunto filmati all'oggetto stato iniziale come inizializzato la nostra app, ma abbiamo anche aggiornato l'elenco dei film nella nostra galleria quando Carica altro ...  È stato fatto clic sul pulsante.

Nella quarta parte e l'ultimo tutorial di questa serie, daremo un'occhiata a come possiamo aggiungere manualmente un film alla nostra galleria tramite un modulo personalizzato. Gli utenti saranno in grado di compilare il modulo e aggiungere dettagli su un film, che verranno aggiunti all'elenco dei film visualizzati nella galleria.