Cosa sono i metodi del ciclo di vita dei componenti in React JS ??

Come tutti noi, anche i componenti React nascono, crescono e muoiono!

(Habilelabs) (7 dicembre 2020)

Di Payal Mittal

metodi del ciclo di vita dei componenti in reactjs
Metodi del ciclo di vita dei componenti in React.js

Ogni componente della classe React passa attraverso una serie di” metodi del ciclo di vita ”. Fondamentalmente, tutto in React è costituito da componenti o da una parte dei componenti.

Questi componenti sono soggetti a seguire un certo ciclo di vita, quasi come quello di qualsiasi creatura vivente sulla terra. Nascono, crescono e infine muoiono. La fase in cui nascono si chiama montaggio, quando crescono si chiama aggiornamento e lultima fase della morte è nota come smontaggio.

Lintero processo è chiamato “Ciclo di vita dei componenti”. Per ciascuna di queste fasi, React.js esegue il rendering di alcuni metodi incorporati denominati metodi del ciclo di vita che controllano il comportamento dei componenti allinterno di unapplicazione.

In questo blog, esamineremo questo ciclo di vita e otterremo per conoscere questi metodi del ciclo di vita –

Cosa sono i metodi del ciclo di vita dei componenti?

I metodi del ciclo di vita dei componenti sono suddivisi in tre diverse fasi, come-

  • Montaggio
  • Aggiornamento
  • Smontaggio

Lintero ciclo di vita del componente può essere compreso da questa semplice illustrazione visiva –

Diagramma del ciclo di vita del componente

Ora discuteremo in dettaglio ciascuna delle fasi e i relativi metodi. Andiamo quindi –

✔ Montaggio dei metodi del ciclo di vita

Dopo aver completato il componente inizializzazione, inizia il montaggio del componente in cui il componente viene creato e inserito nel DOM.

Qui discuteremo i metodi del ciclo di vita più comunemente usati-

1. costruttore ()

Il constructor() viene chiamato prima dellinizio del montaggio ed è fondamentalmente utilizzato per servire questi due scopi-

Invece di utilizzare setState(), puoi assegnare direttamente lo stato iniziale a this.state() nel metodo constructor. Ecco come possiamo definire il nostro stato:

constructor(props) {
super(props);this.state = { count: 0 };
this.handleClick = this.handleClick.bind(this);
console.log("Constructor!");
}

2. render ()

Il prossimo in linea è il metodo render()! Monta il componente sul DOM e ne esegue il rendering nellinterfaccia utente. Questo metodo viene richiamato per esaminare gli attributi this.state e this.props ogni volta che è presente una variazione negli state o props.

render è il metodo più comunemente usato in React. Se desideri eseguire il rendering di elementi nel DOM, render() è il metodo da guardare con ansia perché puoi scriverli qui.

Ogni volta che viene chiamato, può restituire molti tipi, ad esempio stringhe, numeri, array, frammenti, booleani o null valore, portale o elementi React. Alcuni esempi sono forniti qui:

class MyComponent extends React.Component {
render() {//return string
return "Hello!!"//return null value in case you don"t want to render anything
return null//return fragments
return
Hello

Friends

//return arrays
return [
Hello
,
World

]; }
}

Nota : Se il metodo componentShouldMount restituisce booleano false, il metodo di rendering non verrà evocato.

3. componentDidMount ()

Questo metodo viene chiamato immediatamente dopo che il componente è stato inserito nel DOM tramite il metodo render . Viene chiamato solo una volta in un ciclo di vita.

  • Se stai cercando di impostare degli abbonamenti, allora questo è il posto giusto per farlo. Tuttavia, dovrai annullare liscrizione in componetWillUnmount().
  • Inoltre, è un buon posto per istanziare una richiesta di rete se devi caricare dati da un telecomando endpoint.
  • Puoi persino chiamare setState() qui. Sebbene attiverà nuovamente un rendering, non vedrai almeno lo stato intermedio. Tuttavia, è necessario essere cauti durante lutilizzo perché causa problemi di prestazioni. In effetti, dovresti assegnare lo stato iniziale nel metodo constructor(), come consigliabile. Ma questo approccio è utile quando è necessario misurare un nodo DOM prima di eseguire il rendering di qualcosa che dipende dalle sue dimensioni.

✔ Aggiornamento dei metodi del ciclo di vita

A differenza di “Montaggio “che si verifica solo una volta durante il montaggio del componente, la fase” Aggiornamento “può verificarsi più volte.

Ogni volta che si verifica una modifica negli oggetti di scena / stato del componente che deve essere aggiornato, un timer chiama affinché render e componentDidupdate riconoscano, aggiornino e visualizzino la modifica, entra in gioco la fase di aggiornamento.

1. static getDerivedStateFromProps ()

Questo è il primo metodo che viene chiamato nella fase di aggiornamento del ciclo di vita. Può essere richiamato più volte perché viene richiamato ogni volta che viene avviato il metodo render . Quindi, è ovvio che viene chiamato durante le fasi di montaggio e aggiornamento.

Questo metodo non è molto comune e viene utilizzato raramente in casi specifici, ad esempio quando lo stato del componente varia con i cambiamenti negli oggetti di scena nel tempo. Come suggerisce il nome, deriva state da props.

2. shouldComponentUpdate ()

Questo metodo viene chiamato quando il componente sta per essere rieseguito. Determina se le modifiche correnti nel states / props influiscono sulloutput del componente. Viene utilizzato solo come mezzo di ottimizzazione delle prestazioni e ci informa che “il componente deve essere aggiornato o meno”, espresso in booleano true o false valori. Per impostazione predefinita, restituisce true.

Se

shouldComponentUpdate() restituisce false valore, significa che stai dicendo a React di saltare questo aggiornamento e quindi i metodi render e componentDidUpdate non verranno chiamati.

Utilizzo del metodo shouldComponentUpdate

Tuttavia, puoi anche impedire il rendering non necessario utilizzando

React.PureComponent che ti consente di confrontare il nuovo e il vecchio state / props e ti impedisce di saltare qualsiasi aggiornamento necessario.

3. render ()

Poi arriva render. Il fatto che venga chiamato o meno dipende dal valore restituito da shouldComponentUpdate. Si attiverà solo nel caso in cui venga restituito true .

4. getSnapshotBeforeUpdate ()

Dopo aver chiamato render ,

getSnapshotBeforeUpdate viene dopo. Non è comunemente usato ma è molto utile in alcuni casi specifici, come quando è necessario accedere ad alcune informazioni nel DOM e modificarle, subito dopo che è stato aggiornato.

Questo metodo consente al componente di acquisire alcune informazioni (altezza di scorrimento) dal DOM in modo che possano essere regolate in seguito (dopo laggiornamento). Tuttavia, devi capire che laltezza di scorrimento catturata qui indica laltezza prima che fosse aggiornata a DOM.

Possiamo passare prevState e prevProps come argomenti, come indicato qui –

getSnapshotBeforeUpdate(prevProps, prevState) {return null;}

5. componentDidUpdate ()

Questo metodo viene richiamato immediatamente dopo che il componente è stato aggiornato e rieseguito. Riceve prevState e prevProps come parametri e può anche accedere allo stato o agli oggetti di scena appena modificati.

Tuttavia, si consiglia vivamente di non impostare mai direttamente lo stato allinterno di questa funzione, altrimenti attiverà ulteriormente render e componentDidUpdate.

Attraverso questo metodo, possiamo calcolare la scrollHeight differenza tra ciò che era prima dopo essere stato aggiornato.

Questo è solo un caso duso, lì sono molti altri come –

👉 Per prelevare dati dal server

👉 Per accedere ai nodi DOM del componente React

Per ottenere dettagli sui suoi casi duso , controlla la documentazione ufficiale –

React.Component – React

Questa pagina contiene un riferimento API dettagliato per la classe del componente React definizione. Si presume che tu “abbia familiarità con …

reactjs.org

✔ Smontaggio dei metodi del ciclo di vita

Questa è lultima fase in cui un componente di reazione passa attraverso la quale viene smontato da DOM e distrutto. Cè solo un metodo del ciclo di vita in questa fase.

1. componentWillUnmount ()

componentWillUnmount viene chiamato per primo nella fase di smontaggio, appena prima che il componente venga distrutto.Questo è il luogo in cui puoi eseguire qualsiasi metodo di pulizia, essenzialmente annullando le richieste di rete, invalidando i timer o ripulendo gli abbonamenti indesiderati che sono stati creati con il metodo componentDidMount .

Riepilogo:

Esistono altri metodi che vengono richiamati nel caso in cui venga generato un errore da un componente discendente, questi metodi sono chiamati metodi del ciclo di vita di gestione degli errori. Li troverai qui .

Erano tutti programmatori !! Spero che possiate comprendere meglio i metodi del ciclo di vita del componente React attraverso questo blog. Tornate presto a voi con un altro blog approfondito.

Fino a allora, buona lettura !! 🙃

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *