React livscyklus - Forskellige faser af reageret livscyklus med eksempler

Introduktion til React Livscyklus

Da vi ved, at komponenter er grundlæggende byggesten til reaktion, er det vigtigt at vide om forskellige stadier involveret i en reaktionskomponents livscyklus. I denne artikel beskriver vi de forskellige begivenheder og metoder, der er involveret i en komponents livscyklus. Vi dækker også nogle eksempler, der giver et klart billede af React-komponentens livscyklus.

Faser af React Life Cycle

Komponenters livscyklus defineres som sekvensen af ​​metoder, der påberåbes i forskellige faser af en komponent. Følgende er forskellige faser, der er involveret i en reaktionskomponenters livscyklus:

1. Initialisering

Dette trin kræver, at udvikleren definerer egenskaber og den oprindelige tilstand af komponenten. Dette gøres i konstruktøren af ​​komponenten. Følgende kode viser initialiseringsfasen for en reaktionskomponent:

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 den fase af reaktionslivscyklen, der kommer efter, at initialiseringen er afsluttet. Montering sker, når komponenten placeres på DOM-containeren, og komponenten gengives på en webside. Monteringsfasen har to metoder, der er:

• compnentWillMount () : Denne metode kaldes lige før komponenten placeres på DOM, det er denne funktion bliver kaldt lige før renderfunktionen udføres for allerførste gang.
• componentDidMount () : Denne metode kaldes lige efter, at komponenten er placeret på DOM, det er denne funktion bliver kaldt lige efter render-funktionen er udført. For allerførste gang.

Fra navnet på de to ovennævnte metoder har vi forstået betydningen af ​​nøgleord “Vil” og “Har”. Det er nu klart, at "Vilje" bruges til før en bestemt begivenhed, og "gjorde" bruges i tilfælde af efter en bestemt begivenhed.

3. Opdatering

Opdatering er en fase, hvor staten og egenskaber, der befolkes på initialiseringstidspunktet, ændres om nødvendigt efter nogle brugerhændelser. Følgende er forskellige funktioner, der påberåbes i opdateringsfasen:

• componentWillReceiveProps (): Denne funktion er uafhængig af komponenttilstand. Denne metode kaldes, før en komponent, der er monteret på DOM, får sine rekvisitter tildelt. Funktionen accepterer nye rekvisitter, der kan være identiske eller forskellige fra originale rekvisitter. Hovedsageligt kan nogle præ-renderingskontroller anvendes i dette trin.
• shouldComponentUpdate (): Nogle gange er det ønskeligt ikke at vise de nye rekvisitter på outputsiden. For at opnå dette returnerer denne metode falsk, hvilket betyder, at de nyligt givne rekvisitter ikke skal vises på outputsiden.
• componentWillUpdate (): Denne funktion kaldes, før en komponent gendannes igen, dvs. denne metode kaldes én gang, før renderfunktionen udføres efter opdatering.
• componentDidUpdate (): Denne funktion kaldes efter, at en komponent er gengivet igen, dvs. denne metode kaldes en gang, efter at render-funktionen er udført efter opdatering.

4. Demontering

Dette er den sidste fase i komponentens livscyklus, og i denne fase løsnes en komponent fra DOM-beholderen . Følgende metode falder ind under denne fase.

• componentWillUnmount (): Denne funktion aktiveres, før en komponent til sidst løsnes fra DOM-containeren, som er denne metode kaldes, når en komponent fjernes helt fra siden, og dette viser slutningen på dens livscyklus.

Eksempel på React Livscyklus

Her vil vi se nogle kodeeksempler, der viser en cykluskomponenters livscyklus.

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 ovenstående program udføres initialt, viser det nedenstående output på websiden.

Når du klikker på Klik her-området, ændres teksten til følgende:

Nu på konsollen kan du se sekvensen af ​​opkaldte metoder, konsol viser den nedenstående vedhæftede output:

Efter at der er klikket på skærmen, finder gengivelse sted sted og vises følgende i konsollen:

Ovenstående konsoloutput giver en klar forståelse af reaktionslivscyklusmetoder, der påberåbes i løbet af reaktionskomponentens livscyklus.

Konklusion

Efter at have dækket detaljer om forskellige faser, der er involveret i reaktionslivscyklussen, er det tydeligt, at der findes livscyklusmetoder, der bliver kaldt automatisk. Disse livscyklusmetoder i forskellige faser af en komponent giver os friheden til at udføre tilpassede begivenheder, når en komponent oprettes, opdateres eller ødelægges. Desuden giver disse metoder os mulighed for at håndtere rekvisitter og tilstandsændringer samt integrere tredjepartsbiblioteker let.

Anbefalede artikler

Dette er en guide til React Livscyklus. Her diskuterer vi faser af reaktionslivscyklus som initialisering, montering, opdatering og afmontering sammen med eksemplet. Du kan også se på de følgende artikler for at lære mere -

1. React Native vs React
2. Agile livscyklus
3. ITIL livscyklus
4. Java-implementeringsværktøjer
5. Vejledning til knap i reaktivt indfødt