React Livscykel - Olika faser av reaktionslivscykel med exempel

Introduktion till React Lifecycle

Eftersom vi vet att komponenter är grundläggande byggstenar för reaktion är det viktigt att veta om olika stadier som är involverade i en reaktionskomponents livscykel. I den här artikeln kommer vi att beskriva de olika händelserna och metoderna som är involverade i en komponents livscykel. Vi kommer också att täcka några exempel som ger en tydlig bild av React-komponentens livscykel.

Faser av React Life Cycle

Komponenternas livscykel definieras som sekvensen av metoder som åberopas i olika stadier av en komponent. Följande är olika faser involverade i en reaktionskomponenters livscykel:

1. Initiering

Detta steg kräver att utvecklaren definierar egenskaper och komponentens initiala tillstånd. Detta görs i konstruktören för komponenten. Följande kod visar initialiseringsfasen för en reaktionskomponent:

Koda:

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

2. Montering

Montering är fasen i reaktionslivscykeln som kommer efter att initialiseringen är klar. Montering sker när komponenten placeras på DOM-behållaren och komponenten återges på en webbsida. Monteringsfasen har två metoder som är:

• compnentWillMount () : Den här metoden kallas precis innan komponenten placeras på DOM, det vill säga den här funktionen kallas precis innan renderfunktionen körs för första gången.
• componentDidMount () : Den här metoden kallas precis efter att komponenten har placerats på DOM, det vill säga den här funktionen kallas precis efter att render-funktionen har utförts. För första gången.

Från namnet på ovanstående två metoder har vi förstått betydelsen av nyckelord "Will" och "Did". Det är nu tydligt att "Will" används för innan en viss händelse och "gjorde" används i händelse av efter en viss händelse.

3. Uppdatering

Uppdatering är en fas där tillstånd och egenskaper som fylls vid initialiseringen ändras vid behov efter vissa användarhändelser. Följande är olika funktioner som åberopas under uppdateringsfasen:

• componentWillReceiveProps (): Denna funktion är oberoende av komponenttillstånd. Denna metod kallas innan en komponent som är monterad på DOM får sina rekvisita omtilldelade. Funktionen accepterar nya rekvisita som kan vara identiska eller skiljer sig från originalrekvisita. I huvudsak kan vissa pre-renderingskontroller tillämpas i detta steg.
• shouldComponentUpdate (): Ibland är det önskvärt att inte visa de nya rekvisita på utdatasidan. För att uppnå detta returnerar denna metod falsk, vilket innebär att de nyligen återgivna rekvisita inte bör visas på utdatasidan.
• componentWillUpdate (): Denna funktion kallas innan en komponent återges, det vill säga den här metoden kallas en gång innan renderfunktionen utförs efter uppdatering.
• componentDidUpdate (): Denna funktion kallas efter att en komponent har återgivits, det vill säga den här metoden kallas en gång efter att renderfunktionen har utförts efter uppdatering.

4. Demontering

Detta är den sista fasen i komponentens livscykel och i denna fas tas en komponent bort från DOM-behållaren . Följande metod faller under denna fas.

• componentWillUnmount (): Den här funktionen aktiveras innan en komponent äntligen tas bort från DOM-behållaren som är den här metoden kallas när en komponent tas bort helt från sidan och detta visar slutet på dess livscykel.

Exempel på React Lifecycle

Här kommer vi att se några kodexempel som visar livscykeln för en reaktionskomponent.

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 ovanstående program körs initialt kommer det att visa nedre utdata på webbsidan.

När du klickar på Klicka här-området kommer texten att ändras till följande:

Nu på konsolen kan du se sekvensen av metoder som anropas, konsolen kommer att visa den nedanföljande utgången:

Efter att ha klickat på skärmen kommer återgivningen att ske och visar följande i konsolen:

Ovanstående konsolutgång ger en tydlig förståelse för reaktionslivscykelmetoder som åberopas under reaktionskomponentens livscykel.

Slutsats

Efter att ha täckt detaljer om olika faser involverade i reaktionslivscykeln är det uppenbart att det finns livscykelmetoder som kommer att ringas automatiskt. Dessa livscykelmetoder i olika faser av en komponent ger oss friheten att utföra anpassade händelser när en komponent skapas, uppdateras eller förstörs. Dessutom tillåter dessa metoder oss att hantera rekvisita och tillståndsändringar samt enkelt integrera tredjepartsbibliotek.

Rekommenderade artiklar

Detta är en guide till React Lifecycle. Här diskuterar vi faser av reaktionslivscykel som initialisering, montering, uppdatering och montering tillsammans med exemplet. Du kan också titta på följande artiklar för att lära dig mer -

1. React Native vs React
2. Smidig livscykel
3. ITIL Livscykel
4. Java-distributionsverktyg
5. Guide till knapp i reagera infödda