Ciclo di vita di React - Diverse fasi del ciclo di vita di React con esempi

Introduzione al ciclo di vita di React

Poiché sappiamo che i componenti sono gli elementi base della reazione, è importante conoscere le diverse fasi coinvolte nel ciclo di vita di un componente di reazione. In questo articolo, descriveremo i diversi eventi e metodi coinvolti nel ciclo di vita di un componente. Inoltre, tratteremo alcuni esempi che forniranno un quadro chiaro del ciclo di vita del componente React.

Fasi del ciclo di vita di React

Il ciclo di vita dei componenti è definito come la sequenza di metodi invocati in diverse fasi di un componente. Le seguenti sono diverse fasi coinvolte nel ciclo di vita di un componente di reazione:

1. Inizializzazione

Questa fase richiede allo sviluppatore di definire le proprietà e lo stato iniziale del componente. Questo viene fatto nel costruttore del componente. Il codice seguente mostra la fase di inizializzazione di un componente di reazione:

Codice:

class Test extends React.Component (
constructor(props)
(
//Calling parent class constructor
super(props);
// Set initial state
this.state = ( hello : "Test component!" );
)
)

2. Montaggio

Il montaggio è la fase del ciclo di vita della reazione che viene dopo il completamento dell'inizializzazione. Il montaggio si verifica quando il componente viene inserito nel contenitore DOM e il componente viene visualizzato su una pagina Web. La fase di montaggio prevede due metodi:

• compnentWillMount () : questo metodo viene chiamato appena prima che il componente venga posizionato su DOM, ovvero questa funzione viene chiamata appena prima che la funzione di rendering venga eseguita per la prima volta.
• componentDidMount () : questo metodo viene chiamato subito dopo l'inserimento del componente su DOM, ovvero questa funzione viene chiamata subito dopo l'esecuzione della funzione di rendering. Per la prima volta.

Dal nome dei due metodi precedenti abbiamo capito il significato delle parole chiave "Volontà" e "Did". Ora è chiaro che "Will" è usato prima di un evento particolare e "did" è usato in caso di dopo un evento particolare.

3. Aggiornamento

L'aggiornamento è una fase in cui lo stato e le proprietà popolate al momento dell'inizializzazione vengono modificati se necessario dopo alcuni eventi dell'utente. Le seguenti sono diverse funzioni invocate durante la fase di aggiornamento:

• componentWillReceiveProps (): questa funzione è indipendente dallo stato del componente. Questo metodo viene chiamato prima che un componente montato su DOM venga riassegnato ai suoi oggetti di scena. La funzione accetta nuovi oggetti di scena che possono essere identici o diversi dagli oggetti di scena originali. In questo passaggio è possibile applicare principalmente alcuni controlli di pre-rendering.
• shouldComponentUpdate (): a volte è preferibile non mostrare i nuovi oggetti di scena sulla pagina di output. Per raggiungere questo obiettivo, questo metodo restituisce false, il che significa che i nuovi oggetti di scena renderizzati non devono essere visualizzati nella pagina di output.
• componentWillUpdate (): questa funzione viene chiamata prima del rendering di un componente, ovvero questo metodo viene chiamato una volta prima dell'esecuzione della funzione di rendering dopo l'aggiornamento.
• componentDidUpdate (): questa funzione viene chiamata dopo il rendering di un componente, ovvero questo metodo viene chiamato una volta dopo l'esecuzione della funzione di rendering dopo l'aggiornamento.

4. Smontaggio

Questa è l'ultima fase del ciclo di vita dei componenti e in questa fase un componente viene rimosso dal contenitore DOM . Il seguente metodo rientra in questa fase.

• componentWillUnmount (): questa funzione viene invocata prima che un componente venga finalmente staccato dal contenitore DOM che viene chiamato questo metodo quando un componente viene rimosso completamente dalla pagina e questo mostra la fine del suo ciclo di vita.

Esempio di ciclo di vita di React

Qui vedremo alcuni esempi di codice che mostrano il ciclo di vita di un componente di reazione.

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

Quando il programma sopra viene eseguito inizialmente, mostrerà l'output di seguito sulla pagina web.

Facendo clic su Fare clic qui, il testo cambierà nel seguente modo:

Ora sulla console, puoi vedere la sequenza dei metodi chiamati, la console mostrerà l'output allegato seguente:

Dopo aver fatto clic sullo schermo, il rendering verrà eseguito e mostrerà quanto segue nella console:

L'output della console di cui sopra fornisce una chiara comprensione dei metodi del ciclo di vita di reazioni richiamati durante il ciclo di vita del componente di reazione.

Conclusione

Dopo aver coperto i dettagli delle diverse fasi coinvolte nel ciclo di vita della reazione, è chiaro che ci sono metodi del ciclo di vita che vengono chiamati automaticamente. Questi metodi del ciclo di vita in diverse fasi di un componente ci danno la libertà di eseguire eventi personalizzati quando un componente viene creato, aggiornato o distrutto. Inoltre, questi metodi ci consentono di gestire oggetti di scena e cambiamenti di stato, nonché di integrare facilmente librerie di terze parti.

Articoli consigliati

Questa è una guida al ciclo di vita di React. Qui discutiamo fasi del ciclo di vita di reazione come l'inizializzazione, il montaggio, l'aggiornamento e lo smontaggio insieme all'esempio. Puoi anche consultare i seguenti articoli per saperne di più -

1. React Native vs React
2. Ciclo di vita agile
3. Ciclo di vita ITIL
4. Strumenti di distribuzione Java
5. Guida al pulsante in React Native