Reacționează ciclul de viață - Diferite faze de reacție ale ciclului de viață cu exemple

Introducere în reacția ciclului de viață

După cum știm că componentele sunt elemente de bază de reacție, este important să cunoaștem diferite etape implicate în ciclul de viață al unei componente de reacție. În acest articol, vom descrie diferite evenimente și metode implicate în ciclul de viață al unei componente. De asemenea, vom acoperi câteva exemple care vor oferi o imagine clară a ciclului de viață al componentelor React.

Fazele ciclului de viață reacționat

Ciclul de viață al componentelor este definit ca secvența metodelor invocate în diferite etape ale unei componente. Următoarele sunt diferite faze implicate în ciclul de viață al unei componente de reacție:

1. Initializare

Această etapă impune dezvoltatorului să definească proprietățile și starea inițială a componentei. Acest lucru se realizează în constructorul componentei. Următorul cod arată faza de inițializare a unei componente de reacție:

Cod:

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

2. Montare

Montarea este faza ciclului de viață al reacției care vine după finalizarea inițializării. Montarea are loc atunci când componenta este plasată pe containerul DOM și componenta este redată pe o pagină web. Faza de montare are două metode care sunt:

• compnentWillMount () : Această metodă este apelată chiar înainte ca componenta să fie plasată pe DOM, care este această funcție este apelată chiar înainte de executarea funcției de randare pentru prima dată.
• componentDidMount () : Această metodă se numește imediat după ce componenta este plasată pe DOM, care este această funcție este apelată imediat după executarea funcției de redare. Pentru prima dată.

Din numele celor două metode de mai sus am înțeles semnificația cuvintelor cheie „Will” și „Did”. Acum este clar că „Voința” este folosită înainte de un anumit eveniment și „a făcut” este folosită în cazul după un anumit eveniment.

3. Actualizare

Actualizarea este o fază în care starea și proprietățile populate la momentul inițializării sunt schimbate, dacă este necesar după unele evenimente ale utilizatorului. Următoarele sunt diferite funcții invocate în faza de actualizare:

• componentWillReceiveProps (): Această funcție este independentă de starea componentelor. Această metodă este numită înainte ca o componentă care este montată pe DOM să fie reasignată recuzita. Funcția acceptă recuzită nouă care poate fi identică sau diferită de recuzită originală. În principal, unele verificări pre-redare pot fi aplicate în acest pas.
• shouldComponentUpdate (): Uneori, este de dorit să nu se afișeze noi accesorii pe pagina de ieșire. Pentru a obține acest lucru, această metodă returnează false, ceea ce înseamnă că recuzitele nou-redate nu trebuie afișate pe pagina de ieșire.
• componentWillUpdate (): Această funcție este apelată înainte ca o componentă să fie redenumită, care este această metodă este apelată o dată înainte ca funcția de randare să fie executată după actualizare.
• componentDidUpdate (): Această funcție se numește după ce o componentă este redistribuită, care este această metodă este apelată o dată după ce funcția de randare este executată după actualizare.

4. Demontarea

Aceasta este ultima fază din ciclul de viață al componentelor și în această fază, o componentă este detașată de containerul DOM . Următoarea metodă se încadrează în această fază.

• componentWillUnmount (): Această funcție este invocată înainte ca o componentă să fie detașată definitiv de containerul DOM, care este această metodă, se numește atunci când o componentă este complet eliminată de pe pagină și aceasta arată sfârșitul ciclului său de viață.

Exemplu de ciclu de reacție

Aici vom vedea câteva exemple de cod care arată ciclul de viață al unei componente de reacție.

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'));

Când programul de mai sus este executat inițial, va afișa ieșirea de mai jos pe pagina web.

Când faceți clic pe zona Faceți clic aici, textul se va schimba la următoarele:

Acum pe consolă, puteți vedea secvența metodelor numite, consola va afișa ieșirea atașată mai jos:

După ce faceți clic pe ecran, va avea loc redarea și va afișa următoarele în consolă:

Ieșirea de pe consola de mai sus oferă o înțelegere clară a metodelor de ciclu de viață a reacției invocate în timpul ciclului de viață al componentei de reacție.

Concluzie

După acoperirea detaliilor diferitelor faze implicate în ciclul de viață al reacției, este clar că există metode ale ciclului de viață care sunt apelate automat. Aceste metode ale ciclului de viață în diferite faze ale unei componente ne oferă libertatea de a efectua evenimente personalizate atunci când o componentă este creată, actualizată sau distrusă. Mai mult, aceste metode ne permit să gestionăm recuzită și modificări de stare, precum și să integrăm ușor bibliotecile de la terți.

Articole recomandate

Acesta este un ghid pentru ciclul de reacție. Aici discutăm faze ale ciclului de viață al reacției, cum ar fi inițializarea, montarea, actualizarea și demontarea împreună cu exemplul. De asemenea, puteți consulta următoarele articole pentru a afla mai multe -

1. Reactează nativul și reacționează
2. Ciclu de viață agil
3. ITIL Ciclul de viață
4. Instrumente de implementare Java
5. Ghid pentru buton în React Native