Un componente ReactJS ha un ciclo di vita che viene suddiviso principalmente in tre fasi:
1. Fase di montaggio (Mounting): In questa fase, il componente viene creato e inserito nel DOM. Ci sono diversi metodi di ciclo di vita in questa fase, tra cui il costruttore, static getDerivedStateFromProps, render e componentDidMount.
- Il costruttore viene chiamato prima di tutto. Questo è solitamente dove si inizializza lo stato dell’oggetto e si esegue il legame dei metodi dell’evento.
- static getDerivedStateFromProps viene chiamato appena dopo il costruttore e prima del render. Questo è usato per aggiornare lo stato basandosi sui cambiamenti delle prop.
- render è il metodo che effettivamente disegna la nostra UI.
- componentDidMount viene chiamato dopo che il componente è stato renderizzato e il DOM è stato aggiornato. Questo è il posto migliore per fare richieste di rete o eseguire altre operazioni asincrone.
1. Fase di aggiornamento (Updating): Questa fase inizia quando lo stato del componente cambia o si ricevono nuove proprietà (props). I metodi di ciclo di vita in questa fase includono static getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate e componentDidUpdate.
- static getDerivedStateFromProps e render funzionano nello stesso modo descritto nella fase di montaggio.
- shouldComponentUpdate viene chiamato prima dell’aggiornamento del componente e può essere utilizzato per ottimizzare le prestazioni saltando il rendering se non è necessario.
- getSnapshotBeforeUpdate viene chiamato prima che le modifiche al DOM siano effettuate. Questo può essere utilizzato per salvare qualche informazione del DOM che potrebbe andare persa in seguito alla modifica.
- componentDidUpdate viene chiamato dopo che il DOM è stato aggiornato. Questo è un buon posto per fare richieste di rete basate sui nuovi props o lo stato.
1. Fase di smontaggio (Unmounting): In questa fase, il componente viene rimosso dal DOM. L’unico metodo di ciclo di vita in questa fase è componentWillUnmount. Questo metodo viene chiamato prima che il componente sia rimosso e può essere utilizzato per annullare qualsiasi operazione effettuata nel componentDidMount o altri metodi del ciclo di vita.
È importante ricordare che React 17 ha introdotto un cambiamento nel ciclo di vita dei componenti, deprecando alcuni metodi (componentWillMount, componentWillReceiveProps, e componentWillUpdate) e aggiungendo nuovi metodi (getDerivedStateFromProps e getSnapshotBeforeUpdate). Le informazioni sopra riguardano il ciclo di vita del componente nella versione più recente di React.
