Reager livssyklus - Ulike faser av reaktert livssyklus med eksempler

Introduksjon til React Livssyklus

Som vi vet at komponenter er grunnleggende byggesteiner for å reagere, er det viktig å vite om forskjellige stadier involvert i livssyklusen til en reaksjonskomponent. I denne artikkelen vil vi beskrive de forskjellige hendelsene og metodene som er involvert i livssyklusen til en komponent. Vi vil også dekke noen eksempler som vil gi et tydelig bilde av React-komponentens livssyklus.

Faser av reagerer livssyklus

Komponentenes livssyklus er definert som sekvensen av metoder som påberopes i forskjellige stadier av en komponent. Følgende er forskjellige faser involvert i livssyklusen til en reaksjonskomponent:

1. Initialisering

Dette trinnet krever at utvikleren definerer egenskaper og den opprinnelige tilstanden til komponenten. Dette gjøres i konstruktøren til komponenten. Følgende kode viser initialiseringsfasen til en reaksjonskomponent:

Kode:

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

2. Montering

Montering er fasen i reaksjonssyklusen som kommer etter at initialiseringen er fullført. Montering skjer når komponenten plasseres på DOM-beholderen og komponenten gjengis på en webside. Monteringsfasen har to metoder som er:

• compnentWillMount () : Denne metoden kalles rett før komponenten plasseres på DOM, det er denne funksjonen blir kalt rett før render-funksjonen blir utført for aller første gang.
• componentDidMount () : Denne metoden kalles like etter at komponenten er plassert på DOM, det er denne funksjonen blir kalt rett etter at render-funksjonen er utført. For aller første gang.

Fra navnet på de to ovennevnte metodene har vi forstått betydningen av nøkkelord “Vilje” og “Gjorde”. Det er nå klart at “Vilje” brukes til før en bestemt hendelse og “gjorde” brukes i tilfelle etter en bestemt hendelse.

3. Oppdatering

Oppdatering er en fase der tilstanden og egenskapene som er befolket på initialiseringstidspunktet endres om nødvendig etter noen brukerhendelser. Følgende er forskjellige funksjoner som påberopes under oppdateringsfasen:

• componentWillReceiveProps (): Denne funksjonen er uavhengig av komponenttilstand. Denne metoden kalles før en komponent som er montert på DOM får rekvisisjonene på nytt. Funksjonen godtar nye rekvisitter som kan være identiske eller forskjellige fra originale rekvisitter. I hovedsak kan noen pre-rendering sjekker brukes på dette trinnet.
• shouldComponentUpdate (): Noen ganger er det ønskelig å ikke vise de nye rekvisittene på utdatasiden . For å oppnå dette returnerer denne metoden falsk, noe som betyr at de nylig gjengitte rekvisittene ikke skal vises på utdatasiden.
• componentWillUpdate (): Denne funksjonen kalles før en komponent gjengis på nytt, det er denne metoden kalles en gang før render-funksjonen blir utført etter oppdatering.
• componentDidUpdate (): Denne funksjonen kalles etter at en komponent er gjengitt på nytt, det er denne metoden kalles en gang etter at render-funksjonen er utført etter oppdatering.

4. Demontering

Dette er den siste fasen i komponentens livssyklus, og i denne fasen løsnes en komponent fra DOM-beholderen . Følgende metode faller inn under denne fasen.

• componentWillUnmount (): Denne funksjonen blir påkalt før en komponent til slutt blir fjernet fra DOM-beholderen, som er denne metoden kalles når en komponent er fullstendig fjernet fra siden, og dette viser slutten på livssyklusen.

Eksempel på React Livssyklus

Her vil vi se noen kodeeksempler som viser livssyklusen til en reaksjonskomponent.

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

Når programmet ovenfor blir utført innledningsvis, vil det vise utdataene nedenfor på hjemmesiden.

Når du klikker Klikk her-området, vil teksten endres til følgende:

Nå på konsollen, kan du se sekvensen av metoder som heter, konsoll vil vise den vedlagte utskriften:

Etter å ha klikket på skjermen vil gjengivelse finne sted og vil vise følgende i konsollen:

Ovennevnte konsollutgang gir en klar forståelse av reaksjonssyklusmetoder som påberopes under livssyklusen til reaksjonskomponenten.

Konklusjon

Etter å ha dekket detaljer om forskjellige faser involvert i reaksjonssyklusen, er det tydelig at det er livssyklusmetoder som blir automatisk kalt. Disse livssyklusmetodene i forskjellige faser av en komponent gir oss friheten til å utføre tilpassede hendelser når en komponent blir opprettet, oppdatert eller ødelagt. Videre lar disse metodene oss håndtere rekvisitter og tilstandendringer samt integrere tredjepartsbiblioteker.

Anbefalte artikler

Dette er en guide til React Lifecycle. Her diskuterer vi faser av reaksjonssyklus som initialisering, montering, oppdatering og demontering sammen med eksemplet. Du kan også se på følgende artikler for å lære mer -

1. React Native vs React
2. Smidig livssyklus
3. ITIL livssyklus
4. Java-distribusjonsverktøy
5. Guide to Button in React Native