Una guida completa a React.js nel 2018

Questo articolo è stato originariamente pubblicato nel gennaio 2015, ma è stato recentemente aggiornato a React 16.3 e tutta la bontà che contiene.

I componenti sono i mattoni di React. Se provieni da uno sfondo angolare, i componenti sono molto simili alle direttive. Se provieni da uno sfondo diverso, sono essenzialmente widget o moduli.

Puoi pensare a un componente come a una raccolta di HTML, CSS, JS e alcuni dati interni specifici di quel componente. Mi piace pensare ai componenti di React come ai Kolaches della rete. Hanno tutto il necessario, avvolti in un delizioso pacchetto componibile.

Questi componenti sono definiti in puro JavaScript o possono essere definiti in ciò che il team React chiama "JSX". Se decidi di utilizzare JSX (che molto probabilmente lo farai, è piuttosto standard - ed è quello che useremo per questo tutorial), avrai bisogno di una fase di compilazione per convertire il tuo JSX in JavaScript. Ma ci arriveremo più tardi.

Ciò che rende React così conveniente per la creazione di interfacce utente è che i dati vengono ricevuti dal componente principale di un componente o contenuti nel componente stesso. Prima di passare al codice, assicuriamoci di avere una conoscenza di alto livello dei componenti.

Sopra abbiamo una foto del mio profilo Twitter. Se avessimo ricreato questa pagina in React, avremmo suddiviso sezioni diverse in diversi componenti (evidenziati). Si noti che i componenti possono avere componenti nidificati al loro interno.

Potremmo nominare il componente sinistro (rosa) il componente UserInfo. All'interno del componente UserInfo, abbiamo un altro componente (arancione), che potremmo chiamare il componente UserImages. Il modo in cui funziona questa relazione padre / figlio è il nostro componente UserInfo, o il componente genitore, in cui vive lo "stato" dei dati sia per sé che per il componente UserImages (componente figlio). Se volessimo utilizzare qualsiasi parte dei dati del componente padre nel componente figlio, cosa che facciamo, passeremmo tali dati al componente figlio come attributo. In questo esempio, passiamo al componente UserImages tutte le immagini che l'utente ha (che attualmente risiedono nel componente UserInfo).

Tra poco approfondiremo i dettagli del codice, ma voglio che tu comprenda il quadro più ampio di ciò che sta accadendo qui. Questa gerarchia genitore / figlio rende la gestione dei nostri dati relativamente semplice, perché sappiamo esattamente dove vivono i nostri dati e non dovremmo manipolarli altrove.

Gli argomenti seguenti sono quelli che credo siano gli aspetti fondamentali di React. Se li capisci tutti e i loro scopi, ti troverai in un'ottima posizione dopo aver letto questo tutorial.

JSX - Ci permette di scrivere HTML come sintassi che ottiene
trasformato in oggetti javaScript leggeri.
DOM virtuale: una rappresentazione JavaScript dell'attuale
DOM.
React.Component: il modo in cui si crea un nuovo componente.
render (metodo): descrive l'aspetto dell'interfaccia utente
il componente particolare.
ReactDOM.render: esegue il rendering di un componente React in un nodo DOM.
state - L'archivio dati interno (oggetto) di un componente.
costruttore (this.state) - Il modo in cui si stabilisce
lo stato iniziale di un componente.
setState - Un metodo di supporto utilizzato per aggiornare lo stato di a
componente e rendering dell'interfaccia utente
oggetti di scena - I dati che vengono passati al componente figlio
dal componente principale.
propTypes: consente di controllare la presenza o i tipi di
alcuni oggetti di scena sono passati al componente figlio.
defaultProps - Ti permette di impostare oggetti di scena predefiniti per il tuo componente.
Ciclo di vita dei componenti
  - componentDidMount: attivato dopo il montaggio del componente
  - componentWillUnmount: attivato prima che il componente venga smontato
  - getDerivedStateFromProps: attivato quando il componente viene montato e
ogni volta che cambiano gli oggetti di scena. Utilizzato per aggiornare lo stato di a
componente quando cambiano i suoi oggetti di scena
eventi
  - al clic
  - onSubmit
  - onChange

So che sembra molto, ma vedrai presto come ogni pezzo è fondamentale nella costruzione di applicazioni robuste con React (e non stavo nemmeno scherzando quando ho detto che volevo che fosse una guida completa).

A questo punto, dovresti capire, ad un livello molto alto, come funziona React. Ora passiamo al codice.

Creazione del primo componente (JSX, DOM virtuale, rendering, ReactDOM.render)

Andiamo avanti e costruiamo il nostro primo componente React.

Per creare un componente React, utilizzerai una classe ES6. Se non hai dimestichezza con le lezioni, puoi continuare a leggere di seguito o puoi leggere di più in dettaglio qui:

import React da 'reagire'
importa ReactDOM da 'reazioni-dom'
la classe HelloWorld estende React.Component {
  render () {
    ritorno (
      
Ciao mondo!
    )   } }
ReactDOM.render (, document.getElementById ('root'));

Si noti che l'unico metodo sulla nostra classe è il rendering. Ogni componente deve avere un metodo di rendering. La ragione di ciò è il rendering sta descrivendo l'interfaccia utente (interfaccia utente) per il nostro componente. Quindi, in questo esempio, il testo che verrà mostrato sullo schermo in cui viene visualizzato questo componente è Hello World!

Ora diamo un'occhiata a cosa sta facendo ReactDOM. ReactDOM.render accetta due argomenti. Il primo argomento è il componente che si desidera eseguire il rendering, mentre il secondo argomento è il nodo DOM in cui si desidera eseguire il rendering del componente.

Nota che stiamo utilizzando ReactDOM.render e non React.render. Questa è stata una modifica apportata in React .14 per rendere React più modulare. Ha senso se si pensa che React può eseguire il rendering a più cose oltre a un semplice elemento DOM.

Nell'esempio sopra, stiamo dicendo a React di prendere il nostro componente HelloWorld e renderlo all'elemento con un ID di root. A causa delle relazioni padre / figlio di React di cui abbiamo parlato in precedenza, di solito devi usare ReactDOM.render solo una volta nella tua applicazione, perché eseguendo il rendering del componente più genitore, verranno resi anche tutti i componenti figlio.

A questo punto, potresti sentire un po 'strano lanciare "HTML" nel tuo JavaScript. Da quando hai iniziato a studiare lo sviluppo web, ti è stato detto che dovresti tenere la tua logica fuori dalla vista, cioè mantenere il tuo JavaScript disaccoppiato dal tuo HTML.

Questo paradigma è forte, ma presenta alcuni punti deboli. Non voglio prolungare questo tutorial cercando di convincerti che questa idea è un passo nella giusta direzione, quindi se questa idea ti dà ancora fastidio, puoi dare un'occhiata a questo link. Man mano che scopri di più su React, questo disagio dovrebbe rapidamente attenuarsi.

L '"HTML" che stai scrivendo nel metodo di rendering non è in realtà HTML, ma è ciò che React chiama "JSX". JSX ci consente semplicemente di scrivere una sintassi simile a HTML che (eventualmente) viene trasformata in oggetti JavaScript leggeri. React è quindi in grado di prendere questi oggetti JavaScript e da essi formare un "DOM virtuale" o una rappresentazione JavaScript del DOM effettivo. Ciò crea una situazione win / win in cui si ottiene l'accessibilità dei modelli con la potenza di JavaScript.

Guardando l'esempio di seguito, questo è ciò in cui alla fine verrà compilato il tuo JSX.

la classe HelloWorld estende React.Component {
  render () {
    return React.createElement ("div", null, "Hello World");
  }
}
Ora, puoi rinunciare alla fase di trasformazione JSX -> JS e scrivere i tuoi componenti React come il codice sopra. Ma come puoi immaginare, sarebbe piuttosto complicato. Non sono a conoscenza di nessuno che non sta usando JSX. Per ulteriori informazioni su ciò che JSX compila, controlla React Elements vs React Components.

Fino a questo punto, non abbiamo davvero sottolineato l'importanza di questo nuovo paradigma DOM virtuale in cui stiamo saltando. Il motivo per cui il team di React ha seguito questo approccio è che, poiché il DOM virtuale è una rappresentazione JavaScript del DOM effettivo, React può tenere traccia della differenza tra l'attuale DOM virtuale (calcolato dopo alcune modifiche ai dati), con il DOM virtuale precedente (calcolato prima di alcune modifiche ai dati). React quindi isola le modifiche tra il vecchio e il nuovo DOM virtuale e quindi aggiorna solo il vero DOM con le modifiche necessarie.

In termini più profani, poiché la manipolazione del DOM effettivo è lenta, React è in grado di ridurre al minimo le manipolazioni al DOM effettivo, tenendo traccia di un DOM virtuale e aggiornando il DOM reale solo quando necessario e con solo le modifiche necessarie. (Maggiori informazioni qui).

In genere, l'interfaccia utente ha molti stati che rendono difficile la gestione dello stato. Ridistribuendo il DOM virtuale ogni volta che si verifica un cambiamento di stato, React semplifica la riflessione sullo stato in cui si trova l'applicazione.

Alcuni eventi utente che cambiano lo stato della tua app → Riattiva DOM virtuale → Diff precedente DOM virtuale con nuovo DOM virtuale → Aggiorna solo il DOM reale con le modifiche necessarie.

Poiché esiste questo processo di trasformazione da JSX a JS, è necessario impostare una sorta di fase di trasformazione mentre si sta sviluppando. Nella parte 2 di questa serie, presenterò Webpack e Babel per aver effettuato questa trasformazione.

Diamo un'occhiata alla nostra lista di controllo "Le parti più importanti del reagire" e vediamo dove siamo ora.

 JSX - Ci permette di scrivere HTML come sintassi che ottiene
trasformato in oggetti javaScript leggeri.
 DOM virtuale - Una rappresentazione JavaScript dell'attuale
DOM.
 React.Component - Il modo in cui si crea un nuovo componente.
 render (metodo): descrive l'aspetto dell'interfaccia utente
il componente particolare.
 ReactDOM.render - Trasforma un componente React in un nodo DOM.
state - L'archivio dati interno (oggetto) di un componente.
costruttore (this.state) - Il modo in cui si stabilisce
lo stato iniziale di un componente.
setState - Un metodo di supporto utilizzato per aggiornare lo stato di a
componente e rendering dell'interfaccia utente
oggetti di scena - I dati che vengono passati al componente figlio
dal componente principale.
propTypes: consente di controllare la presenza o i tipi di
alcuni oggetti di scena sono passati al componente figlio.
defaultProps - Ti permette di impostare oggetti di scena predefiniti per il tuo componente.
Ciclo di vita dei componenti
  - componentDidMount: attivato dopo il montaggio del componente
  - componentWillUnmount: attivato prima che il componente venga smontato
  - getDerivedStateFromProps: attivato quando il componente viene montato e
ogni volta che cambiano gli oggetti di scena. Utilizzato per aggiornare lo stato di a
componente quando cambiano i suoi oggetti di scena
eventi
  - al clic
  - onSubmit
  - onChange

Stiamo facendo un buon passo. Tutto in grassetto è ciò di cui abbiamo già parlato e dovresti almeno essere in grado di spiegare come quei determinati componenti si adattano all'ecosistema React.

Aggiunta di stato al componente (stato)

Il prossimo nella lista è stato. In precedenza abbiamo parlato di quanto sia difficile gestire le interfacce utente perché in genere hanno molti stati diversi. Questa zona è dove React inizia davvero a brillare. Ogni componente ha la capacità di gestire il proprio stato e trasmetterlo ai componenti figlio, se necessario.

Tornando all'esempio di Twitter precedente, il componente UserInfo (evidenziato in rosa sopra) è responsabile della gestione dello stato (o dei dati) delle informazioni dell'utente. Se anche un altro componente avesse bisogno di questo stato / dati ma quello stato non era un figlio diretto del componente UserInfo, allora si creerebbe un altro componente che sarebbe il genitore diretto di UserInfo e dell'altro componente (o entrambi i componenti che richiedevano quello stato ). Passeresti quindi lo stato come oggetti di scena nei componenti figlio. In altre parole, se si dispone di una gerarchia multicomponente, un componente genitore comune dovrebbe gestire lo stato e trasmetterlo ai suoi componenti figlio tramite i puntelli.

Diamo un'occhiata a un componente di esempio che utilizza il suo stato interno.

la classe HelloUser estende React.Component {
  costruttore (oggetti di scena) {
    super (oggetti di scena)
this.state = {
      nome utente: "tylermcginnis"
    }
  }
  render () {
    ritorno (
      
        Ciao {this.state.username}            )   } }

Abbiamo introdotto una nuova sintassi con questo esempio. Il primo che noterai è il metodo di costruzione. Dalla definizione sopra, il metodo di costruzione è "Il modo in cui si imposta lo stato di un componente". In altri termini, tutti i dati inseriti in this.state all'interno del costruttore faranno parte dello stato di quel componente.

Nel codice sopra, stiamo dicendo al nostro componente che vogliamo che tenga traccia di un nome utente. Questo nome utente può ora essere utilizzato all'interno del nostro componente facendo {this.state.username}, che è esattamente ciò che facciamo nel nostro metodo di rendering.

L'ultima cosa di cui parlare con lo stato è che il nostro componente ha bisogno della capacità di modificare il proprio stato interno. Lo facciamo con un metodo chiamato setState. Ricordi in precedenza quando abbiamo parlato del re-rendering della dom virtuale ogni volta che i dati cambiano?

Segnala di notificare alla nostra app che alcuni dati sono cambiati → Riattiva DOM virtuale → Diff precedente DOM virtuale con nuovo DOM virtuale → Aggiorna solo il DOM reale con le modifiche necessarie.

Quel "segnale di notifica alla nostra app che alcuni dati sono cambiati" è in realtà solo setState. Ogni volta che viene chiamato setState, il DOM virtuale viene renderizzato nuovamente, viene eseguito l'algoritmo diff e il DOM reale viene aggiornato con le modifiche necessarie.

Come nota a margine, quando introduciamo setState nel codice seguente, introdurremo anche alcuni eventi presenti nel nostro elenco. Due uccelli, una fava.

Quindi nel prossimo esempio di codice, ora avremo una casella di input che, ogni volta che qualcuno lo digita, aggiornerà automaticamente il nostro stato e cambierà il nome utente.

la classe HelloUser estende React.Component {
  costruttore (oggetti di scena) {
    super (oggetti di scena)
this.state = {
      nome utente: "tylermcginnis"
    }
this.handleChange = this.handleChange.bind (this)
  }
  handleChange (e) {
    this.setState ({
      nome utente: e.target.value
    })
  }
  render () {
    ritorno (
      
        Ciao {this.state.username}
        Cambia nome:                     )   } }

Nota che abbiamo introdotto alcune altre cose. La prima cosa è il metodo handleChange. Questo metodo verrà chiamato ogni volta che un utente digita nella casella di input. Quando viene chiamato handleChange, chiamerà setState per ridefinire il nostro nome utente con qualunque cosa sia stata digitata nella casella di input (e.target.value). Ricorda, ogni volta che viene chiamato setState, React crea un nuovo DOM virtuale, fa il diff, quindi aggiorna il DOM reale.

Ora diamo un'occhiata al nostro metodo di rendering. Abbiamo aggiunto una nuova riga che contiene un campo di input. Il tipo di campo di input sarà ovviamente testo. Il valore sarà il valore del nostro nome utente che è stato originariamente definito nel nostro metodo getInitialState e verrà aggiornato nel metodo handleChange.

Nota che c'è un nuovo attributo che probabilmente non hai mai visto prima, onChange. onChange è una cosa di React e chiamerà qualunque metodo tu specifichi ogni volta che cambia il valore nella casella di input - in questo caso, il metodo che abbiamo specificato era handleChange.

Il processo per il codice sopra sarebbe andato qualcosa di simile.

Un utente digita nella casella di input → viene richiamato handleChange → lo stato del nostro componente viene impostato su un nuovo valore → React ripristina il DOM virtuale → React Diffs la modifica → Real DOM viene aggiornato.

Più avanti, quando copriremo gli oggetti di scena, vedremo alcuni casi d'uso più avanzati di stato di gestione.

Ci stiamo arrivando! Se non riesci a spiegare gli elementi in grassetto di seguito, vai a rileggere quella sezione. Un suggerimento su REALLY learning React: non lasciare che la lettura passiva ti dia un falso senso di sicurezza che sai effettivamente cosa sta succedendo e puoi ricreare quello che stiamo facendo. Vai su CodeSandbox e prova a ricreare (o creare i tuoi) componenti senza guardare a ciò che ho fatto. È l'unico modo in cui inizierai davvero a imparare a costruire con React. Questo vale per questo tutorial e per i seguenti a venire.

 JSX - Ci permette di scrivere HTML come sintassi che ottiene
trasformato in oggetti javaScript leggeri.
 DOM virtuale - Una rappresentazione JavaScript dell'attuale
DOM.
 React.Component - Il modo in cui si crea un nuovo componente.
 render (metodo): descrive l'aspetto dell'interfaccia utente
il componente particolare.
 ReactDOM.render - Trasforma un componente React in un nodo DOM.
 stato - L'archivio dati interno (oggetto) di un componente.
 costruttore (this.state) - Il modo in cui si stabilisce
lo stato iniziale di un componente.
 setState - Un metodo di supporto utilizzato per aggiornare lo stato di a
componente e rendering dell'interfaccia utente
oggetti di scena - I dati che vengono passati al componente figlio
dal componente principale.
propTypes: consente di controllare la presenza o i tipi di
alcuni oggetti di scena sono passati al componente figlio.
defaultProps - Ti permette di impostare oggetti di scena predefiniti per il tuo componente.
Ciclo di vita dei componenti
  - componentDidMount: attivato dopo il montaggio del componente
  - componentWillUnmount: attivato prima che il componente venga smontato
  - getDerivedStateFromProps: attivato quando il componente viene montato e
ogni volta che cambiano gli oggetti di scena. Utilizzato per aggiornare lo stato di a
componente quando cambiano i suoi oggetti di scena
eventi
  - al clic
  - onSubmit
  - onChange

Stato di ricezione dal componente genitore (props, propTypes, getDefaultProps)

Abbiamo già parlato di oggetti di scena già alcune volte poiché è difficile fare davvero molto senza di loro. In base alla nostra definizione sopra, gli oggetti di scena sono i dati che vengono passati al componente figlio dal componente padre. Ciò consente alla nostra architettura React di rimanere piuttosto semplice. Gestisci lo stato nel componente principale più alto che deve utilizzare i dati specifici e, se hai un componente figlio che necessita anche di tali dati, trasferiscili come oggetti di scena.

Ecco un esempio molto semplice dell'uso di oggetti di scena.

la classe HelloUser estende React.Component {
  render () {
    ritorno (
      
Ciao, {this.props.name}
    )   } }
ReactDOM.render (
  ,
  document.getElementById ( 'radice')
);

Si noti alla riga 9 che abbiamo un attributo chiamato name con un valore di "Tyler". Ora nel nostro componente, possiamo usare {this.props.name} per ottenere "Tyler".

Diamo un'occhiata a un esempio più avanzato. Ora avremo due componenti. Un genitore, un figlio. Il genitore terrà traccia dello stato e passerà una parte di quello stato al bambino come oggetti di scena. Diamo prima un'occhiata a quel componente genitore.

Componente principale:

class FriendsContainer estende React.Component {
  costruttore (oggetti di scena) {
    super (oggetti di scena)
this.state = {
      nome: "Tyler McGinnis",
      amici: [
        "Jake Lingwall",
        "Sarah Drasner",
        "Merrick Christensen"
      ]
    }
  }
  render () {
    ritorno (
      
        

Nome: {this.state.name}

                    )   } }

Non c'è davvero molto da fare in questo componente che non abbiamo mai visto prima. Abbiamo uno stato iniziale e passiamo parte di quello stato iniziale a un altro componente. La maggior parte del nuovo codice verrà da questo componente figlio, quindi diamo un'occhiata più da vicino a questo.

Componente figlio:

class ShowList estende React.Component {
  render () {
    ritorno (
      
        

Amici

        
              {this.props.names.map ((friend) =>
  • {friend}
  • )}                     )   } }

Ricorda che il codice che viene restituito dal nostro metodo di rendering è una rappresentazione di come dovrebbe essere il vero DOM. Se non hai familiarità con Array.prototype.map, questo codice potrebbe apparire un po 'traballante. Tutto ciò che fa la mappa è che crea un nuovo array, chiama la nostra funzione di callback su ogni elemento dell'array e riempie il nuovo array con il risultato della chiamata della funzione di callback su ciascun elemento. Per esempio,

const friends = [
  "Jake Lingwall",
  "Sarah Drasner",
  "Merrick Christensen"
];
const listItems = friends.map ((friend) => {
  return "
  • " + amico + "
  • "; });
    console.log (listItems);

    Il console.log sopra restituisce ["

  • Jake Lingwall
  • ", "
  • Murphy Randall
  • ", "
  • Merrick Christensen
  • "].

    Si noti che tutto ciò che è accaduto è che abbiamo creato un nuovo array e aggiunto

  • a ciascun elemento dell'array originale.

    La cosa fantastica della mappa è che si adatta perfettamente a React (ed è integrato in JavaScript). Quindi nel nostro componente figlio sopra, stiamo mappando i nomi, avvolgendo ciascun nome in una coppia di tag

  • e salvandolo nella nostra variabile ListItems. Quindi, il nostro metodo di rendering restituisce un elenco non ordinato con tutti i nostri amici.

    Vediamo un altro esempio prima di smettere di parlare di oggetti di scena. È importante capire che ovunque i dati vivono è il luogo esatto in cui desideri manipolarli. Questo rende semplice ragionare sui tuoi dati. Tutti i metodi getter / setter per un determinato dato saranno sempre nello stesso componente in cui sono stati definiti quei dati. Se avessi bisogno di manipolare alcuni dati all'esterno del luogo in cui vivono i dati, passeresti il ​​metodo getter / setter in quel componente come oggetti di scena. Diamo un'occhiata a un esempio del genere.

    class FriendsContainer estende React.Component {
      costruttore (oggetti di scena) {
        super (oggetti di scena)
    this.state = {
          nome: "Tyler McGinnis",
          amici: [
            "Jake Lingwall",
            "Sarah Drasner",
            "Merrick Christensen"
          ],
        }
    this.addFriend = this.addFriend.bind (this)
      }
      addFriend (amico) {
        this.setState ((state) => ({
          amici: state.friends.concat ([amico])
        }))
      }
      render () {
        ritorno (
          
            

    Nome: {this.state.name}

                                 )   } }
    . Si noti che nel nostro metodo addFriend abbiamo introdotto un nuovo modo per invocare setState. Invece di passargli un oggetto, gli stiamo passando una funzione che viene quindi passata allo stato. Ogni volta che si imposta il nuovo stato del componente in base allo stato precedente (come stiamo facendo con il nostro array di amici), si desidera passare a setState una funzione che accetta lo stato corrente e restituisce i dati per unirli con il nuovo stato. Controllalo qui.
    class AddFriend estende React.Component {
      costruttore (oggetti di scena) {
        super (oggetti di scena)
    this.state = {
          nuovo amico: ''
        }
    this.updateNewFriend = this.updateNewFriend.bind (this)
        this.handleAddNew = this.handleAddNew.bind (this)
      }
      updateNewFriend (e) {
        this.setState ({
          newFriend: e.target.value
        })
      }
      handleAddNew () {
        this.props.addNew (this.state.newFriend)
        this.setState ({
          nuovo amico: ''
        })
      }
      render () {
        ritorno (
          
                                 )   } }
    class ShowList estende React.Component {
      render () {
        ritorno (
          
            

    Amici

            
                {this.props.names.map ((friend) => {             restituisce
    • {amico}
    •           })}                     )   } }

    Noterai che il codice sopra è per lo più lo stesso dell'esempio precedente, tranne ora che abbiamo la possibilità di aggiungere un nome al nostro elenco di amici. Nota come ho creato un nuovo componente AddFriend che gestisce il nuovo amico che aggiungeremo.

    Il motivo è che il componente genitore (FriendContainer) non si preoccupa del nuovo amico che stai aggiungendo, si preoccupa solo di tutti i tuoi amici nel loro insieme (l'array di amici). Tuttavia, poiché stiamo rispettando la regola di manipolare i tuoi dati solo dal componente che se ne preoccupa, abbiamo passato il metodo addFriend nel nostro componente AddFriend come prop, e lo chiamiamo con il nuovo amico una volta che handleAddNew viene chiamato metodo.

    A questo punto, ti consiglio di provare a ricreare questa stessa funzionalità da solo usando il codice sopra come guida una volta che sei rimasto bloccato per 3-4 minuti.

    Prima di passare dagli oggetti di scena, voglio coprire altre due funzioni di React relative agli oggetti di scena. Sono propTypes e defaultProps. Non entrerò in troppi dettagli qui perché entrambi sono piuttosto semplici.

    i tipi di oggetti di scena consentono di controllare la presenza o i tipi di determinati oggetti di scena passati al componente figlio. Con propTypes, puoi specificare che sono richiesti determinati oggetti di scena o che determinati oggetti di scena sono di un tipo specifico.

    A partire da React 15, PropTypes non è più incluso nel pacchetto React. Dovrai installarlo separatamente eseguendo npm install prop-types.

    defaultProps consente di specificare un valore predefinito (o un backup) per determinati oggetti di scena nel caso in cui tali oggetti non vengano mai passati al componente.

    Ho modificato i nostri componenti da prima ad ora, usando propTypes, per richiedere che addFriend sia una funzione e che sia passato al componente AddFriend. Inoltre, utilizzando defaultProps, ho specificato che se non viene assegnato alcun array di amici al componente ShowList, verrà impostato automaticamente un array vuoto.

    import React da 'reagire'
    importare PropTypes da 'prop-types'
    class AddFriend estende React.Component {
      costruttore (oggetti di scena) {
        super (oggetti di scena)
    this.state = {
          nuovo amico: ''
        }
      }
      updateNewFriend (e) {
        this.setState ({
          newFriend: e.target.value
        })
      }
      handleAddNew () {
        this.props.addNew (this.state.newFriend)
        this.setState ({
          nuovo amico: ''
        })
      }
      render () {
        ritorno (
          
                                 )   } }
    AddFriend.propTypes: {
      addNew: PropTypes.func.isRequired
    }
    class ShowList estende React.Component {
      render () {
        ritorno (
          
            

    Amici

            
                {this.props.names.map ((friend) => {             restituisce
    • {amico}
    •           })}                     )   } }
    ShowList.defaultProps = {
      nomi: []
    }

    Bene, siamo all'ultimo tratto di questo primo tutorial. Diamo un'occhiata alla nostra guida e vediamo cosa ci rimane.

     JSX - Ci permette di scrivere HTML come sintassi che ottiene
    trasformato in oggetti JavaScript leggeri.
     DOM virtuale - Una rappresentazione JavaScript dell'attuale
    DOM.
     React.Component - Il modo in cui si crea un nuovo componente.
     render (metodo): descrive l'aspetto dell'interfaccia utente
    il componente particolare.
     ReactDOM.render - Trasforma un componente React in un nodo DOM.
     stato - L'archivio dati interno (oggetto) di un componente.
     costruttore (this.state) - Il modo in cui si stabilisce
    lo stato iniziale di un componente.
     setState - Un metodo di supporto utilizzato per aggiornare lo stato di a
    componente e rendering dell'interfaccia utente
     oggetti di scena - I dati che vengono passati al componente figlio
    dal componente principale.
     propTypes: consente di controllare la presenza o i tipi di
    alcuni oggetti di scena sono passati al componente figlio.
     defaultProps - Ti permette di impostare oggetti di scena predefiniti per il tuo componente.
    Ciclo di vita dei componenti
      - componentDidMount: attivato dopo il montaggio del componente
      - componentWillUnmount: attivato prima che il componente venga smontato
      - getDerivedStateFromProps: attivato quando il componente viene montato e
    ogni volta che cambiano gli oggetti di scena. Utilizzato per aggiornare lo stato di a
    componente quando cambiano i suoi oggetti di scena
     Eventi
      - al clic
      - onSubmit
      - onChange

    Siamo così vicini!

    Ciclo di vita dei componenti

    Ogni componente creato avrà i propri eventi del ciclo di vita utili per varie cose. Ad esempio, se volessimo effettuare una richiesta Ajax sul rendering iniziale e recuperare alcuni dati, dove lo faremmo? Oppure, se volessimo eseguire qualche logica ogni volta che cambiano i nostri oggetti di scena, come potremmo farlo? I diversi eventi del ciclo di vita sono le risposte a entrambi. Analizziamoli.

    class App estende React.Component {
      costruttore (oggetti di scena) {
        super (oggetti di scena)
    this.state = {
          nome: 'Tyler McGinnis'
        }
      }
      componentDidMount () {
        // Richiamato una volta che il componente è montato sul DOM
        // Buono per fare richieste AJAX
      }
      statico getDerivedStateFromProps (nextProps, prevState) {
        // L'oggetto restituito da questa funzione sarà
        // si fonde con lo stato corrente.
      }
      componentWillUnmount () {
        // Chiamato IMMEDIATAMENTE prima che un componente venga smontato
        // Buono per ripulire gli ascoltatori
      }
      render () {
        ritorno (
          
            Ciao, {this.state.name}            )   } }

    componentDidMount: richiamato una volta dopo il rendering iniziale. Poiché il componente è già stato richiamato quando viene invocato questo metodo, è possibile accedere al DOM virtuale se necessario. Puoi farlo chiamando this.getDOMNode (). Quindi questo è l'evento del ciclo di vita in cui invierai le tue richieste AJAX per recuperare alcuni dati.

    componentWillUnmount: questo ciclo di vita viene richiamato immediatamente prima che un componente venga smontato dal DOM. Qui è dove puoi fare le pulizie necessarie.

    getDerivedStateFromProps - A volte è necessario aggiornare lo stato del componente in base agli oggetti di scena che vengono passati. Questo è il metodo del ciclo di vita in cui lo faresti. Gli oggetti di scena e lo stato verranno passati e l'oggetto che restituisci verrà unito allo stato corrente.

    Bene, se hai bloccato con me fino a questo punto, ottimo lavoro. Spero che questo tutorial ti sia stato utile e ora ti senti almeno leggermente a tuo agio con React.

    Per uno sguardo molto più approfondito ai fondamenti di React, dai un'occhiata al nostro corso sui Fondamenti di React.

    Tyler McGinnis