Levenscyclus reageren - Verschillende fasen van reactielevenscyclus met voorbeelden

Inleiding tot de levenscyclus van React

Omdat we weten dat componenten basale bouwstenen van react zijn, is het belangrijk om op de hoogte te zijn van de verschillende fasen die betrokken zijn bij de levenscyclus van een reactcomponent. In dit artikel beschrijven we de verschillende gebeurtenissen en methoden die betrokken zijn bij de levenscyclus van een component. We zullen ook enkele voorbeelden behandelen die een duidelijk beeld geven van de levenscyclus van de React-componenten.

Fasen van Reactlevenscyclus

De levenscyclus van componenten wordt gedefinieerd als de reeks methoden die in verschillende fasen van een component worden aangeroepen. De volgende zijn verschillende fasen die betrokken zijn bij de levenscyclus van een reactiecomponent:

1. Initialisatie

In deze fase moet de ontwikkelaar eigenschappen en de begintoestand van de component definiëren. Dit gebeurt in de constructor van de component. De volgende code toont de initialisatiefase van een reactiecomponent:

Code:

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

2. Montage

Montage is de fase van de reactlevenscyclus die volgt nadat de initialisatie is voltooid. Montage vindt plaats wanneer het component op de DOM-container wordt geplaatst en het component op een webpagina wordt weergegeven. De montagefase heeft twee methoden die zijn:

• compnentWillMount () : Deze methode wordt aangeroepen net voordat de component op DOM wordt geplaatst. Deze methode wordt aangeroepen net voordat de renderfunctie voor de allereerste keer wordt uitgevoerd.
• componentDidMount () : deze methode wordt aangeroepen net nadat de component op DOM is geplaatst, wat betekent dat deze functie wordt aangeroepen net nadat de renderfunctie is uitgevoerd. Voor de allereerste keer.

Uit de naam van de bovenstaande twee methoden hebben we de betekenis begrepen van trefwoorden "Will" en "Did". Het is nu duidelijk dat "Will" wordt gebruikt voor een bepaalde gebeurtenis en "deed" wordt gebruikt in het geval van na een bepaalde gebeurtenis.

3. Updates

Updates is een fase waarin de status en eigenschappen die ten tijde van de initialisatie waren ingevuld, indien nodig na bepaalde gebruikersgebeurtenissen worden gewijzigd. Hierna volgen verschillende functies die tijdens de updatefase zijn aangeroepen:

• componentWillReceiveProps (): deze functie is onafhankelijk van de status van de component. Deze methode wordt aangeroepen voordat een component die op DOM is gemonteerd, zijn rekwisieten opnieuw toegewezen krijgt. De functie accepteert nieuwe rekwisieten die identiek of verschillend kunnen zijn van originele rekwisieten. In deze stap kunnen voornamelijk enkele controles voor weergave worden toegepast.
• shouldComponentUpdate (): soms is het wenselijk om de nieuwe rekwisieten niet op de uitvoerpagina weer te geven. Om dit te bereiken, retourneert deze methode false, wat betekent dat de nieuw gerenderde rekwisieten niet op de uitvoerpagina moeten worden weergegeven.
• componentWillUpdate (): deze functie wordt aangeroepen voordat een component opnieuw wordt gerenderd, wat betekent dat deze methode één keer wordt aangeroepen voordat de renderfunctie wordt uitgevoerd na de update.
• componentDidUpdate (): deze functie wordt aangeroepen nadat een component opnieuw wordt gerenderd, wat betekent dat deze methode een keer wordt aangeroepen nadat de renderfunctie is uitgevoerd na de update.

4. Afkoppelen

Dit is de laatste fase in de levenscyclus van componenten en in deze fase wordt een component losgekoppeld van de DOM-container . De volgende methode valt onder deze fase.

• componentWillUnmount (): deze functie wordt aangeroepen voordat een component definitief wordt losgekoppeld van de DOM-container. Deze methode wordt aangeroepen wanneer een component volledig van de pagina wordt verwijderd en dit het einde van zijn levenscyclus aangeeft.

Voorbeeld van Reactlevenscyclus

Hier zullen we enkele codevoorbeelden zien die de levenscyclus van een react-component tonen.

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

Wanneer het bovenstaande programma in eerste instantie wordt uitgevoerd, wordt de onderstaande uitvoer op de webpagina weergegeven.

Als u op Klik hier klikt, wordt de tekst als volgt gewijzigd:

Nu op de console, kunt u de opeenvolging van methoden zien, de console toont de hieronder bijgevoegde uitvoer:

Nadat u op het scherm hebt geklikt, vindt de weergave opnieuw plaats en wordt het volgende in de console weergegeven:

De bovenstaande console-uitvoer geeft een duidelijk inzicht in de reactlevenscyclusmethoden die worden aangeroepen tijdens de levenscyclus van de reactcomponent.

Conclusie

Na het behandelen van details van verschillende fasen die betrokken zijn bij de reactlevenscyclus, is het duidelijk dat er levenscyclusmethoden zijn die automatisch worden aangeroepen. Deze levenscyclusmethoden in verschillende fasen van een component geven ons de vrijheid om aangepaste gebeurtenissen uit te voeren wanneer een component wordt gemaakt, bijgewerkt of vernietigd. Bovendien stellen deze methoden ons in staat om rekwisieten en statuswijzigingen af ​​te handelen en eenvoudig bibliotheken van derden te integreren.

Aanbevolen artikelen

Dit is een gids voor de Reactlevenscyclus. Hier bespreken we fasen van reactlevenscyclus zoals initialisatie, mounten, updaten en unmounten samen met het voorbeeld. U kunt ook de volgende artikelen bekijken voor meer informatie -

1. Reageren Native vs React
2. Agile Lifecycle
3. ITIL levenscyclus
4. Hulpmiddelen voor Java-implementatie
5. Handleiding voor Button in React Native