Wat zijn Component Lifecycle Methods in React JS ??

Net als wij allemaal worden React-componenten geboren, groeien ze en sterven ze!

(Habilelabs) (7 december 2020)

Door Payal Mittal

Component Lifecycle Methods in reactjs
Component Lifecycle Methods in React.js

Elk React-klasseonderdeel doorloopt een reeks van” levenscyclusmethoden ”. In principe bestaat alles in React uit componenten of een deel van de componenten.

Deze componenten worden onderworpen aan een bepaalde levenscyclus, bijna zoals die van elk levend wezen op aarde. Ze worden geboren, groeien op en sterven uiteindelijk. De fase waarin ze worden geboren, wordt montage genoemd, wanneer ze groeien, wordt updaten genoemd, en de laatste fase van overlijden wordt ontkoppeld genoemd.

Dit hele proces wordt ‘Component Lifecycle’ genoemd. Voor elk van deze fasen geeft React.js bepaalde ingebouwde methoden weer, die lifecycle-methoden worden genoemd en die het gedrag van componenten binnen een applicatie bepalen.

In deze blog zullen we deze levenscyclus doorlopen en krijgen om meer te weten over deze levenscyclusmethoden –

Wat zijn Component Lifecycle Methods?

De levenscyclusmethoden van de componenten zijn onderverdeeld in drie verschillende fasen, zoals-

  • Montage
  • Updaten
  • Demontage

De volledige levenscyclus van componenten kan worden begrepen aan de hand van deze eenvoudige visuele illustratie –

Component Lifecycle Diagram

Nu zullen we elk van de fasen en hun methoden in detail bespreken. Laten we dan gaan –

✔ Montage levenscyclus methoden

Na het voltooien van het onderdeel initialisatie, begint het aankoppelen van het onderdeel waarin het onderdeel wordt gemaakt en in de DOM wordt ingevoegd.

Hier bespreken we de meest gebruikte levenscyclusmethoden-

1. constructor ()

De constructor() wordt eerst aangeroepen voordat het aankoppelen begint en wordt in feite gebruikt om deze twee te bedienen doelen-

In plaats van setState(), kunt u de begintoestand direct toewijzen aan this.state() in de constructor methode. Hier is hoe we onze toestand kunnen definiëren:

constructor(props) {
super(props);this.state = { count: 0 };
this.handleClick = this.handleClick.bind(this);
console.log("Constructor!");
}

2. render ()

De volgende in de rij is de render() methode! Het monteert de component op de DOM en geeft ze weer naar de gebruikersinterface. Deze methode wordt aangeroepen om this.state en this.props attributen te onderzoeken wanneer er enige variatie is in de state of props.

render is de meest gebruikte methode van allemaal in React. Als je elementen in de DOM wilt renderen, dan is render() de methode om naar uit te kijken, omdat je ze hier kunt schrijven.

Elke keer dat het wordt aangeroepen, kan het terugkeren vele typen, dwz strings, getallen, arrays, fragmenten, Booleans of null waarde-, portal- of React-elementen. Enkele voorbeelden worden hier gegeven –

class MyComponent extends React.Component {
render() {//return string
return "Hello!!"//return null value in case you don"t want to render anything
return null//return fragments
return
Hello

Friends

//return arrays
return [
Hello
,
World

]; }
}

Opmerking : Als de componentShouldMount -methode boolean false retourneert, wordt de rendermethode niet opgeroepen.

3. componentDidMount ()

Deze methode wordt aangeroepen onmiddellijk nadat de component in de DOM is ingevoegd via de render methode . Het wordt slechts één keer in een levenscyclus gebeld.

  • Als u abonnementen wilt opzetten, dan is dit een goede plek om dat te doen. Maar u moet zich afmelden in componetWillUnmount().
  • Het is ook een goede plek om een ​​netwerkverzoek te starten als u gegevens van een externe eindpunt.
  • Je kunt hier zelfs setState() aanroepen. Hoewel het opnieuw een weergave zal activeren, zult u in ieder geval de tussenliggende status niet zien. U moet echter voorzichtig zijn wanneer u dit gebruikt, omdat dit prestatieproblemen veroorzaakt. In feite zou u de begintoestand in de constructor() -methode moeten toewijzen, zoals aanbevolen. Maar deze benadering is handig wanneer u een DOM-knooppunt moet meten voordat u iets rendert dat afhankelijk is van de grootte.

✔ Levenscyclusmethoden bijwerken

In tegenstelling tot de Mounting fase die slechts één keer voorkomt tijdens het mounten van de component, kan de Updating-fase meerdere keren voorkomen.

Telkens wanneer er een verandering is in de props / status van de component die moet worden bijgewerkt, roept een timer voor render en componentDidupdate om de wijziging te erkennen, bij te werken en weer te geven, komt de updatefase in het spel.

1. static getDerivedStateFromProps ()

Dit is de eerste methode die wordt aangeroepen in de fase van het bijwerken van de levenscyclus. Het kan meerdere keren worden aangeroepen omdat het wordt aangeroepen wanneer de render -methode wordt gestart. Het is dus duidelijk dat het wordt aangeroepen tijdens zowel de montage- als de updatefase.

Deze methode is niet erg gebruikelijk en wordt zelden gebruikt in specifieke gevallen, bijvoorbeeld wanneer de staat van het onderdeel varieert met veranderingen in rekwisieten in de tijd. Zoals de naam aangeeft, is de status afgeleid van rekwisieten.

2. shouldComponentUpdate ()

Deze methode wordt aangeroepen wanneer de component op het punt staat opnieuw te renderen. Het bepaalt of de huidige wijzigingen in de states / props de uitvoer van de component beïnvloeden. Het wordt alleen gebruikt als een middel voor prestatieoptimalisatie en laat het ons weten moet de component updaten of niet, wat wordt uitgedrukt door Boolean true of false waarden. Standaard retourneert het true.

Als

shouldComponentUpdate() retourneert false waarde, betekent dit dat je React vertelt om deze update over te slaan en daarom zullen render en componentDidUpdate methoden niet worden aangeroepen.

Werking van shouldComponentUpdate-methode

U kunt echter ook onnodige weergave voorkomen door het ingebouwde

React.PureComponent waarmee je de nieuwe en oude state / props kunt vergelijken en het onwaarschijnlijk maakt dat je een noodzakelijke update overslaat.

3. render ()

Vervolgens komt render. Of het wordt aangeroepen, hangt af van de waarde die wordt geretourneerd door shouldComponentUpdate. Het wordt alleen geactiveerd in het geval dat true wordt geretourneerd.

4. getSnapshotBeforeUpdate ()

Nadat render wordt aangeroepen,

getSnapshotBeforeUpdate komt daarna. Het wordt niet vaak gebruikt, maar is erg handig in bepaalde specifieke gevallen, zoals wanneer u toegang nodig heeft tot bepaalde informatie in de DOM en deze wilt wijzigen, direct nadat deze is bijgewerkt.

Met deze methode kan de component verzamel wat informatie (scrollhoogte) van de DOM zodat deze later (na update) kan worden aangepast. U moet echter begrijpen dat de hier vastgelegde scrollhoogte de hoogte aangeeft voordat het werd bijgewerkt naar DOM.

We kunnen prevState en prevProps als argumenten, zoals hier gegeven –

getSnapshotBeforeUpdate(prevProps, prevState) {return null;}

5. componentDidUpdate ()

Deze methode wordt onmiddellijk aangeroepen nadat de component is bijgewerkt en opnieuw is weergegeven. Het ontvangt de prevState en prevProps als parameters en heeft ook toegang tot de nieuw gewijzigde status of rekwisieten.

Echter, het wordt sterk aangeraden om nooit direct de status binnen deze functie in te stellen, anders zal het render en componentDidUpdate verder triggeren.

Via deze methode kunnen we het scrollHeight verschil berekenen tussen wat het was voordat het werd bijgewerkt.

Dit is slechts één use-case, daar zijn er verschillende zoals –

👉 Om gegevens van de server op te halen

👉 Om toegang te krijgen tot de DOM-knooppunten van de React-component

Om details te krijgen over de gebruikssituaties , bekijk de officiële documentatie –

React.Component – React

Deze pagina bevat een gedetailleerde API-referentie voor de React-componentklasse definitie. Er wordt vanuit gegaan dat u “bekend bent met …

reactjs.org

✔ Ontkoppelen van levenscyclusmethoden

Dit is de laatste fase waarin een reactiecomponent doorloopt, waar deze wordt ontkoppeld van DOM en vernietigd. Er is slechts één levenscyclusmethode in deze fase.

1. componentWillUnmount ()

componentWillUnmount methode wordt als eerste aangeroepen in de ontkoppelingsfase, net voordat de component wordt vernietigd.Dit is de plek waar u elke reinigingsmethode kunt uitvoeren, in feite netwerkverzoeken annuleren, timers ongeldig maken of ongewenste abonnementen opschonen die zijn gemaakt met de componentDidMount -methode.

Samenvatting:

Er zijn enkele andere methoden die worden aangeroepen in het geval er een fout wordt gegenereerd door een onderliggende component, worden deze methoden de levenscyclusmethoden voor foutafhandeling genoemd. Je vindt ze hier .

Dat waren allemaal codeerders !! Ik hoop dat je via deze blog een beter begrip krijgt van de levenscyclusmethoden van de React-component. Kom snel bij je terug met nog een inzichtelijke blog.

Tot veel leesplezier !! 🙃

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *