Ciclo di vita del componente React: cosa devi sapere [2022]
Pubblicato: 2021-01-06In React, l'applicazione è suddivisa nei pezzi più piccoli possibili noti come Componenti. I componenti possono essere di presentazione o contenitore.
Quando si parla di componenti di presentazione, non hanno logica. Sono incorporati all'interno dei componenti; ha solo l'interfaccia utente.
I componenti del contenitore sono quelli che utilizzano componenti di presentazione e hanno la logica aziendale nel componente. Tali componenti spesso devono mantenere gli oggetti statali locali per ottenere uno dei tanti casi d'uso di cui potrebbero essere responsabili. Questi componenti utilizzano componenti di presentazione come componenti figlio e trasmettono dati utilizzando vari oggetti di scena.
React ti consente di avere componenti di classe o funzionali. Un modello prevalente utilizzato nell'ecosistema di reazione è che il componente di presentazione è un tipo funzionale di componente e i componenti del contenitore sono di tipo classe.
Il ciclo di vita di reazione mostra il processo esatto attraverso il quale passano i componenti e il motivo alla base del ciclo di vita del componente di reazione .
Sommario
Componenti Funzionali
Questi sono quelli che non hanno uno stato e vengono eseguite solo le manipolazioni che utilizzano gli oggetti di scena.
Tutti i metodi del ciclo di vita dei componenti o setState non possono essere utilizzati o accessibili all'interno di tali componenti.
Checkout: Reagire alle idee di progetto
Componenti di classe
Questi componenti possono avere lo stato locale e hanno accesso ai metodi del ciclo di vita e setState .
Un tipico componente di classe in react è simile a:- 
Il ciclo di vita dei componenti ha tre fasi:-
- Montaggio
- In aggiornamento
- Smontaggio
Montaggio
Quando un componente viene creato e inserito in DOM (Document Object Model), i metodi utilizzati sono:
● costruttore()
● getDerivedStateFromProps() statico
● render()
● componenteDidMount()
In aggiornamento
Quando l'oggetto o lo stato fornito a un componente viene modificato, il re-rendering del componente è anche noto come fase di aggiornamento. In questa fase, di seguito sono riportati i seguenti metodi del ciclo di vita che vengono chiamati:
● getDerivedStateFromProps() statico
● shouldComponentUpdate()
● render()
● getSnapshotBeforeUpdate()
● componenteDidUpdate()
Leggi: Vue vs React: differenza tra Vue e React
Smontaggio
Questo metodo viene chiamato durante lo smontaggio di qualsiasi componente:-
● componente willUnmount()
È l'ultima funzione da invocare prima che il modello a oggetti del documento venga distrutto. Funziona come pulizia per qualsiasi elemento costruito durante componentWillMount.
Ai fini della gestione degli errori nel componente, ci sono alcuni metodi riservati:-
● getDerivedStateFromError() statico
● componenteDidCatch()
Metodi del ciclo di vita comunemente usati spiegati in dettaglio: -
● costruttore (oggetti di scena)
Questo metodo del ciclo di vita viene utilizzato durante la fase di montaggio dei componenti. Si può avere un oggetto di stato locale dichiarato qui. Il super(props) viene chiamato all'interno del costruttore prima di qualsiasi altra istruzione; in caso contrario, si verifica un errore durante l'accesso a this.props.
Se non si mira a dichiarare l'oggetto stato locale o associare il gestore di eventi all'istanza, non è necessario scrivere il metodo del ciclo di vita dei componenti.
Lo stato di chiamata nel costruttore() non è consigliato in quanto attiverebbe il re-rendering prima che il ciclo precedente sia terminato.
Constructor() è l'unico posto in cui è possibile assegnare direttamente lo stato. In caso contrario, se è necessario modificare lo stato o assegnare qualcosa al suo interno, è necessario utilizzare this.setSate .
● render()
All'interno di questi componenti del metodo, viene scritta la parte JSX. JSX è simile a HTML ma è una sintassi estesa di javascript. Quando utilizziamo JSX, possiamo anche utilizzare espressioni Javascript all'interno del metodo di rendering.
Il metodo render() di qualsiasi componente genitore può avere componenti figlio al suo interno. Il tutto seguendo lo schema di composizione, che è alla base dei componenti di reazione.
Ogni volta che viene chiamato il metodo di rendering del genitore, il rendering inizia anche per i componenti figlio e il rendering del genitore è completo solo dopo che l'intero rendering del figlio è stato completato.
Il metodo di rendering è un metodo obbligatorio; senza questo, il componente non può essere realizzato in quanto questo è l'unico posto in cui è possibile scrivere la parte della vista di un componente.
Il metodo di rendering è puro; questo significa che non può modificare lo stato al suo interno.
Per qualsiasi componente nella fase di aggiornamento, il rendering di un particolare componente avverrà o meno, potrebbe dipendere dal tipo restituito o dall'uso del metodo del ciclo di vita shouldComponentUpdate() .
Non è consigliabile avere chiamate API e qualsiasi interazione con il browser all'interno di questo metodo e genererà un errore.
● componenteDidMount()
Questo metodo viene richiamato immediatamente dopo il montaggio del componente. Ora DOM è disponibile per ulteriori manipolazioni. Si può chiamare setState all'interno di questo metodo.
Inoltre, l'interazione con il browser o le chiamate API può essere effettuata da qui.
Questo metodo viene chiamato solo una volta, ovvero durante la fase di creazione. Il metodo non verrà eseguito in nessun'altra parte di re-rendering e anche la logica al suo interno non verrà eseguita.
● componenteDidUpdate()
Questo è lo stesso del componenteDidMount.; si può ottenere un errore con l'unica differenza che questo viene chiamato solo quando si verifica il re-rendering di un componente. Questo metodo non viene chiamato per il rendering iniziale.
Il setState e gli effetti collaterali possono essere eseguiti all'interno di questo metodo. Ma setState deve essere racchiuso in una condizione; in caso contrario, si potrebbe finire nel ciclo di rendering infinito e il rendering non finirebbe mai.
Anche componentDidUpdate non verrà chiamato se shouldComponentUpdate() restituisce false.
● componenteWillUnmount()
Questo metodo viene chiamato quando è in corso la fase di smontaggio di un componente.
All'interno del metodo, idealmente, è possibile ottenere la rimozione dei gestori di eventi e la pulizia della memoria.
La funzione setState() non dovrebbe essere chiamata all'interno di questo in quanto provoca il re-rendering di un componente.
● shouldComponentUpdate()
Durante lo sviluppo di applicazioni di reazione, ci sono spesso casi in cui è necessario evitare il re-rendering non necessario dei componenti. Per ottenere questo componente in classe, si ha il metodo sopra menzionato. Se questo metodo restituisce false, il rendering del componente e dei suoi componenti figlio non verrà eseguito.
Gli oggetti di scena precedenti possono essere controllati e confrontati con quelli nuovi forniti per garantire che non vi siano modifiche, quindi restituiscono false.
Chiamare il metodo setState() all'interno di questo non è consigliato poiché di nuovo causerebbe il re-rendering.
Inoltre, gli effetti collaterali non dovrebbero essere eseguiti all'interno di questo metodo.
C'è anche un'altra alternativa a questo metodo. È possibile utilizzare React.pureComponents estendendo la classe. Questo è molto più stabile e affidabile di shouldComponentUpdate().
Ultimo ma non meno importante, esistono limiti di errore tipo di componenti di reazione che sono presenti per rilevare gli errori.
Si deve avvolgere semplicemente il componente con il componente limite di errore.
All'interno di questo componente speciale, sono utilizzati due metodi del ciclo di vita:-
- getDerivedStateFromError() statico
- componenteDidCatch()
Entrambi vengono chiamati se un componente discendente genera un errore.
Il primo viene chiamato durante la fase di rendering, quindi non sono ammessi effetti collaterali al suo interno. Il secondo viene chiamato durante la fase di commit, quindi al suo interno sono consentiti effetti collaterali.
Leggi anche: Stipendio per sviluppatori ReactJS in India
Impara i corsi di ingegneria del software online dalle migliori università del mondo. Guadagna programmi Executive PG, programmi di certificazione avanzati o programmi di master per accelerare la tua carriera.
Conclusione
Il ciclo di vita del componente react aggiunge complessità al codice, ma l'esecuzione e la manipolazione sistematiche eseguite attraverso i metodi sembrano piuttosto allettanti dal punto di vista dello sviluppatore. Il ciclo di vita di React consente di ristrutturare o manipolare i componenti.
Se sei interessato a saperne di più sullo sviluppo di react, full-stack, dai un'occhiata al programma Executive PG di upGrad & IIIT-B in Full-stack Software Development, progettato per i professionisti che lavorano e offre oltre 500 ore di formazione rigorosa, oltre 9 progetti e incarichi, status di Alumni IIIT-B, progetti pratici pratici e assistenza sul lavoro con le migliori aziende.
