Share
I componenti di reazione incapsulano parti dell'interfaccia utente. L'interfaccia utente dell'applicazione React completa viene visualizzata come un albero con molti componenti nidificati. A seconda del flusso delle applicazioni, i singoli componenti devono eseguire alcune attività prima e dopo il rendering, nonché prima e dopo l'aggiornamento.
Infine, anche la pulizia e la gestione degli errori sono importanti. React fornisce un gran numero di metodi per il ciclo di vita che puoi escludere e iniettare la tua logica nel posto giusto. In questo tutorial imparerai a conoscere il ciclo di vita di un componente React dalla culla alla tomba, quali metodi sono disponibili in ogni fase e quando è opportuno sovrascriverli.
Nota che uso il moderno stile delle classi ES6 in questo tutorial.
Userò un componente chiamato PopularBar per illustrare tutti i metodi del ciclo di vita e come si comportano. Il codice sorgente completo è disponibile su GitLab.
La popolare barra contiene altri due componenti chiamati ClickCounter. Ogni ClickCounter componente contiene un pulsante con un'emoji e visualizza il numero di volte in cui è stato fatto clic su aggiunto alla proprietà count che riceve dal suo host. Ecco il render () metodo di ClickCounter:
Accentsconagua
render () return ( let clickCount = this.state.clickCount + 1 this.setState (clickCount: clickCount)> This.getTotal () < 100 ? this.getTotal() : "99+" ); Il componente PopularBar esegue il rendering di due componenti ClickCounter con emoji thumbs up e thumbs down. Nota che se il puntatore "mostra" è falso, restituisce un div vuoto. Questo sarà importante più tardi quando discuteremo di montaggio e smontaggio.
render () if (! this.props.show) return () ritorno ()
I componenti di reazione esistono quando sono resi da un componente padre o dall'applicazione radice. Ma prima che un componente possa essere reso, deve essere costruito (solo una volta) e montato nel DOM virtuale (ogni volta che viene aggiunto al DOM virtuale).
L'ordine degli eventi è che prima viene costruito il componente, quindi il componentWillMount () viene chiamato il metodo, il componente viene montato nel DOM virtuale e quindi il componentDidMount ()è chiamato. Ciò ti offre molte opportunità per eseguire diversi tipi di inizializzazione.
Il costruttore di un componente verrà chiamato una volta per applicazione (se si aggiorna la pagina nel browser, viene considerata una nuova applicazione). Ecco il costruttore per il componente PopularBar. In realtà non fa nulla se non chiamare super(), che è richiesto e accedere alla console.
la classe PopularBar estende Component constructor () super () console.log ('--- PopularBar constructor is here!')Il costruttore di ClickCounter inizializza il suo clickCount stato a zero:
classe ClickCounter estende Component costruttore (oggetti di scena) super (props) this.state = clickCount: 0 console.log (props.emoji + '=== Costruttore ClickCounter è qui!')
Questo è un esempio perfetto di un'inizializzazione che deve essere eseguita una volta per applicazione. Se un componente ClickCounter viene montato più volte, deve mantenere il conteggio dei clic.
Il componentWillMount () il metodo viene chiamato prima che il componente sia montato, quindi non c'è ancora alcun componente. In generale, non c'è molto che possa essere fatto in questa fase, a meno che non si abbia un'inizializzazione speciale che si verifica ogni volta che il componente viene montato, ma anche quello può attendere componentDidMount ()metodo.
Ecco le implementazioni del metodo per PopularBar e ClickCounter:
// PopularBar componentWillMount () console.log ('--- PopularBar monterà. Yay!') // ClickCounter componentWillMount () console.log (this.props.emoji + '=== ClickCounter monterà. ! ') Puoi chiamare this.setState () qui se vuoi. I puntelli ovviamente non sono accessibili.
Qui, il componente è già montato ed è possibile eseguire qualsiasi lavoro necessario per accedere al componente nel contesto del DOM virtuale. Ecco le implementazioni del metodo per PopularBar e ClickCounter. Il componente esiste già, quindi è possibile accedere e visualizzare le sue proprietà (oggetti di scena).
componentDidMount () console.log ('--- PopularBar ha montato. upCount:' + this.props.upCount + ', downCount:' + this.props.downCount) // ClickCounter componentDidMount () console.log ( this.props.emoji + '=== ClickCounter ha fatto mount. count:' + this.props.count Per riassumere la sezione di montaggio, vediamo l'ordine degli eventi attraverso la PopBar e i due componenti di ClickCounter che contiene. Per comodità, visualizzo le emoji per ciascun ClickCounter, in modo che possano essere distinte.
--- Il costruttore di PopularBar è qui! --- PopularBar monterà. Sìì! 👍 === Il costruttore ClickCounter è qui! 👍 === ClickCounter verrà montato. Sìì! 👎 === Il costruttore ClickCounter è qui! 👎 === ClickCounter verrà montato. Sìì! 👍 === ClickCounter è stato montato. conta: 5 👎 === ClickCounter ha fatto mount. conta: 8 --- PopularBar ha fatto mount. upCount: 5, downCount: 8
Innanzitutto, la Popolarità è costruita e la sua componentWillMount () il metodo è chiamato. Quindi, il costruttore e componentWillMount () vengono chiamati i metodi di ciascun componente ClickCounter, seguito dal componentDidMount () chiama a entrambi i componenti ClickCounter. Finalmente, il componentDidMount () viene chiamato il metodo di PopularBar. Nel complesso, il flusso è nidificato dove tutti i sottocomponenti devono essere completamente montati prima che il loro componente di contenimento sia completamente montato.
Una volta montato, il componente può essere reso. Ogni tanto, lo stato del componente o degli oggetti di scena che riceve dal suo contenitore può cambiare. Tali modifiche portano al re-rendering, ma il componente ha la possibilità di essere avvisato e persino di controllare se il rendering debba avvenire o meno.
Ci sono quattro metodi coinvolti nel processo di aggiornamento e li coprirò in ordine.
Il componentWillReceiveProps () il metodo viene chiamato quando vengono ricevuti nuovi oggetti dal contenitore. Hai accesso agli oggetti di scena attuali tramite this.props e ai prossimi oggetti di scena tramite il nextProps parametro. Ecco il componentWillReceiveProps () metodo di ClickCounter.
componentWillReceiveProps (nextProps) console.log (this.props.emoji + '=== ClickCounter riceverà oggetti di scena.' + 'prossimi oggetti di scena:' + nextProps.count)
Hai l'opportunità qui per controllare quali oggetti sono cambiati e modificare lo stato del componente, se lo desideri. Va bene chiamare this.setState () Qui.
Il shouldComponentUpdate () è un metodo chiave. Si chiama quando vengono ricevuti nuovi oggetti di scena (dopo componentWillReceiveProps () viene chiamato) o dopo che lo stato del componente è stato modificato altrove. Se non si implementa questo metodo, il componente verrà nuovamente sottoposto a rendering ogni volta.
Ma se lo si implementa e si restituisce 'false', il componente e le sue componenti figlio non verranno renderizzati. Si noti che se lo stato dei componenti figlio viene modificato, verrà ripetuto nuovamente anche se si restituisce sempre 'falso' da quello del genitore shouldComponentUpdate ().
Puoi accedere qui ai prossimi oggetti di scena e al prossimo stato, in modo da avere tutte le informazioni necessarie per prendere una decisione. Il componente ClickCounter visualizza 99+ quando il suo conteggio supera 99, quindi è necessario aggiornarlo solo se il conteggio è inferiore a 100. Ecco il codice:
shouldComponentUpdate (nextProps, nextState) let currTotal = this.getTotal () let shouldUpdate = currTotal < 100 console.log(this.props.emoji + '=== ClickCounter should ' + (shouldUpdate ?": 'NOT ') + 'update') return shouldUpdate
Il componentWillUpdateMethod () viene chiamato dopo il componente shouldComponentUpdate () solo se shouldComponentUpdate () restituito vero A questo punto, hai sia i prossimi oggetti di scena che lo stato successivo. Non puoi modificare lo stato qui perché causerà shouldComponentUpdate () essere chiamato di nuovo.
Ecco il codice:
componentWillUpdate (nextProps, nextState) console.log (this.props.emoji + '=== ClickCounter aggiornerà' + 'nextProps.count:' + nextProps.count + 'nextState.clickCount:' + nextState.clickCount)
Finalmente, dopo il rendering, il componentDidUpdate () il metodo è chiamato. Va bene chiamare this.setState () qui perché il rendering per la modifica dello stato precedente è già stato completato.
Ecco il codice:
componentDidUpdate () console.log (this.props.emoji + '=== ClickCounter ha aggiornato')
Vediamo i metodi di aggiornamento in azione. Farò due tipi di aggiornamenti. Innanzitutto, farò clic sul pulsante "Mi piace" per attivare una modifica dello stato:
--- Il costruttore di PopularBar è qui! PopularBar.js: 10 --- PopularBar verrà montato. Sìì! PopularBar.js: 14 👍 === Il costruttore ClickCounter è qui! 👍 === ClickCounter verrà montato. Sìì! 👎 === Il costruttore ClickCounter è qui! 👎 === ClickCounter verrà montato. Sìì! 👍 === ClickCounter è stato montato. count: 5 ClickCounter.js: 20 👎 === ClickCounter ha fatto mount. count: 8 ClickCounter.js: 20 --- PopularBar ha fatto mount. upCount: 5, downCount: 8 👍 === ClickCounter dovrebbe aggiornare 👍 === ClickCounter aggiornerà nextProps.count: 5 nextState.clickCount: 1 👍 === ClickCounter ha aggiornato
Si noti che il nextState.clickCount è 1, che attiva il ciclo di aggiornamento. Il prossimo aggiornamento sarà causato dal fatto che il genitore passi nuovi oggetti di scena. Per facilitare questo, aggiungerò una piccola funzione che si attiva ogni 5 secondi e incrementa il conteggio di 20. Ecco il codice nel componente principale dell'app che contiene la PopularBar. Il cambiamento si propagherà fino a ClickCounter.
classe App estende Component costruttore () super () this.state = showPopularBar: true, upCount: 5, downCount: 8 componentDidMount () this.timer = setInterval (this.everyFiveSeconds.bind (this), 5000 ); everyFiveSeconds () let state = this.state state.upCount + = 20 this.setState (stato)
Ecco l'output. Si noti che ClickCounter willReceiveProps () il metodo è stato chiamato e il nextState.clickCount rimane a zero, ma nextProps.Count è ora 25.
--- Il costruttore di PopularBar è qui! --- PopularBar monterà. Sìì! 👍 === Il costruttore ClickCounter è qui! 👍 === ClickCounter verrà montato. Sìì! 👎 === Il costruttore ClickCounter è qui! 👎 === ClickCounter verrà montato. Sìì! 👍 === ClickCounter è stato montato. conta: 5 👎 === ClickCounter ha fatto mount. conta: 8 --- PopularBar ha fatto mount. upCount: 5, downCount: 8 👍 === ClickCounter riceverà puntelli. prossimi oggetti di scena: 25 👍 === ClickCounter dovrebbe aggiornare 👍 === ClickCounter aggiornerà nextProps.count: 25 nextState.clickCount: 0
I componenti possono essere smontati e montati di nuovo e possono esserci errori durante il ciclo di vita di un componente.
Se un componente non viene reso dal suo contenitore, viene smontato dal DOM virtuale e dal componente non montato componentWillUnmount () il metodo è chiamato. La PopularBar non renderizza i suoi sottocomponenti ClickCounter se lo spettacolo è falso. Il componente App esegue il rendering di PopularBar e passa il programma di spettacolo in base alla casella di controllo.
Ecco l'App render () metodo:
render () return ()Bar popolare
Quando l'utente deseleziona la casella di controllo, la PopolaritàBar viene ancora sottoposta a rendering, ma non esegue il rendering dei componenti secondari, che vengono smontati. Ecco il codice e l'output:
componentWillUnmount () console.log (this.props.emoji + '=== ClickCounter smonterà :-(') Output: 👍 === ClickCounter smonterà :-( 👎 === ClickCounter smonterà :-( Non c'è componentDidUnmount () metodo perché non ci sono componenti a questo punto.
Il componentDidCatch () il metodo è stato aggiunto di recente in React 16. È stato progettato per aiutare con un errore durante il rendering che in precedenza ha portato a messaggi di errore oscuri. Ora, è possibile definire speciali componenti del limite di errore che avvolgono qualsiasi componente figlio che potrebbe generare errori e il componente del limite di errore verrà visualizzato solo se si è verificato l'errore.
I componenti di React hanno un ciclo di vita ben definito, e metodi speciali ti permettono di interpellare la tua logica e intraprendere azioni, controllare lo stato a un livello molto fine e persino gestire gli errori.
Il più delle volte questo non è richiesto, e puoi semplicemente passare gli oggetti di scena e implementare il render () metodo, ma è bene sapere che in circostanze più specialistiche non rimarrai a guardare una scatola nera.
Negli ultimi due anni, React è cresciuto in popolarità. In effetti, sul mercato sono disponibili numerosi articoli disponibili per l'acquisto, la revisione, l'implementazione e così via. Se stai cercando risorse aggiuntive intorno a React, non esitare a verificarle.
