Hva er komponentlivssyklusmetoder i React JS ??

Som oss alle, tar React-komponenter også fødsel, vokser og dør!

(Habilelabs) (7. des. 2020)

Av Payal Mittal

Metoder for komponentens livssyklus i reactjs
Komponentens livssyklusmetoder i React.js

Hver React-klassekomponent går gjennom en serie med» livssyklusmetoder ”. I utgangspunktet består alt i React av enten komponenter eller en del av komponentene.

Disse komponentene følges av en viss livssyklus, nesten som for enhver levende skapning på jorden. De føder, vokser og dør til slutt. Fasen når de blir født kalles montering, når de vokser kalles oppdatering, og den siste fasen av døden er kjent som demontering.

Hele denne prosessen kalles Component Lifecycle. For hver av disse fasene gjengir React.js visse innebygde metoder som kalles livssyklusmetoder som styrer oppførselen til komponenter i et program.

I denne bloggen vil vi gå gjennom denne livssyklusen og få å vite om disse livssyklusmetodene –

Hva er komponenter for livssykluskomponenter?

Komponentens livssyklusmetoder er delt inn i tre forskjellige faser, som-

  • Montering
  • Oppdatering
  • Demontering

Hele komponentens livssyklus kan forstås av denne enkle visuelle illustrasjonen –

Component Lifecycle Diagram

Nå skal vi diskutere hver av fasene og metodene deres i detalj. La oss gå da –

✔ Montering av livssyklusmetoder

Etter å ha fullført komponenten initialisering begynner komponentmontering der komponenten blir opprettet og satt inn i DOM.

Her vil vi diskutere de mest brukte livssyklusmetodene-

1. konstruktør ()

constructor() kalles først før monteringen begynner og brukes i utgangspunktet til å betjene disse to formål-

  • Å initialisere den lokale tilstanden til en komponent
  • Å binde hendelsesbehandling metoder til en forekomst

I stedet for å bruke setState(), kan du tilordne starttilstanden direkte til this.state() i constructor -metoden. Slik kan vi definere tilstanden vår

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

2. gjengi ()

Neste i rekken er render() -metoden! Den monterer komponenten på DOM og gjengir dem til brukergrensesnittet. Denne metoden blir påkalt for å undersøke this.state og this.props attributter når det er noen variasjon i komponentens state eller props.

render er den mest brukte metoden av alle i React. Hvis du vil gjengi elementer i DOM, er render() metoden du kan se frem til fordi du kan skrive dem her.

Når den blir ringt, kan den returnere mange typer, dvs. strenger, tall, matriser, fragmenter, boolere eller null verdi, portal eller React-elementer. Noen eksempler er gitt her –

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

]; }
}

Merk : Hvis componentShouldMount -metoden returnerer boolsk false, blir gjengivelsesmetoden ikke fremkalt.

3. componentDidMount ()

Denne metoden kalles umiddelbart etter at komponenten er satt inn i DOM via render -metoden . Det kalles bare en gang i løpet av en livssyklus.

  • Hvis du ønsker å konfigurere abonnementer, er dette et like bra sted som noe å gjøre det. Men du må avslutte abonnementet i componetWillUnmount().
  • Det er også et bra sted å starte en nettverksforespørsel hvis du trenger å laste inn data fra en fjernkontroll endepunkt.
  • Du kan til og med ringe setState() her. Selv om det ytterligere vil utløse en gjengivelse igjen, vil du ikke se mellomtilstanden i det minste. Du må imidlertid være forsiktig når du bruker dette fordi det forårsaker ytelsesproblemer. Faktisk bør du tilordne starttilstanden i constructor() -metoden, som det anbefales. Men denne tilnærmingen er nyttig når du trenger å måle en DOM-node før du gjengir noe som avhenger av størrelsen.

✔ Oppdaterer livssyklusmetoder

I motsetning til Montering fase som bare skjer en gang mens komponenten monteres, kan Oppdateringsfasen forekomme flere ganger.

Når det er noen endring i rekvisitter / tilstand for komponenten som må oppdateres, ringer en tidtaker for render og componentDidupdate for å erkjenne, oppdatere og gjengi endringen, kommer oppdateringsfasen til spill.

1. statisk getDerivedStateFromProps ()

Dette er den første metoden som blir kalt i den oppdaterte livssyklusfasen. Det kan kalles flere ganger fordi det blir påkalt når render metoden starter. Så det er åpenbart at det kalles under både monterings- og oppdateringsfaser.

Denne metoden er ikke veldig vanlig og brukes sjelden i spesifikke tilfeller, for eksempel når komponentens tilstand varierer med endringer i rekvisitter over tid. Som navnet antyder, kommer den fra rekvisitter.

2. shouldComponentUpdate ()

Denne metoden kalles når komponenten skal gjengis på nytt. Den avgjør om de nåværende endringene i states / props påvirker komponentens utgang. Den brukes bare som et middel for ytelsesoptimalisering og gi oss beskjed skal komponenten oppdateres eller ikke, som uttrykkes av boolsk true eller false verdier. Som standard returnerer den true.

Hvis

shouldComponentUpdate() returnerer false verdi, det betyr at du ber React om å hoppe over denne oppdateringen, og dermed blir render og componentDidUpdate metoder ikke kalt.

Arbeid med shouldComponentUpdate Method

Du kan imidlertid også forhindre unødvendig gjengivelse ved å bruke innebygd

React.PureComponent som lar deg sammenligne den nye og gamle state / props og gjør det lite sannsynlig for deg å hoppe over nødvendig oppdatering.

3. gjengi ()

Neste kommer render. Hvorvidt det blir kalt eller ikke, avhenger av verdien som returneres av shouldComponentUpdate. Det utløses bare i tilfelle når true returneres.

4. getSnapshotBeforeUpdate ()

Etter at render heter,

getSnapshotBeforeUpdate kommer neste. Det brukes ikke ofte, men er veldig nyttig i visse spesifikke tilfeller, for eksempel når du trenger tilgang til litt informasjon i DOM og endre den, rett etter at den er oppdatert.

Denne metoden lar komponenten fange litt informasjon (rullehøyde) fra DOM slik at den kan justeres senere (etter oppdatering). Du må skjønne at rullehøyden som er tatt her indikerer høyden før den ble oppdatert til DOM.

Vi kan passere prevState og prevProps som argumenter, som gitt her –

getSnapshotBeforeUpdate(prevProps, prevState) {return null;}

5. componentDidUpdate ()

Denne metoden blir påkalt umiddelbart etter at komponenten er oppdatert og gjengitt på nytt. Den mottar prevState og prevProps som parametere og kan også få tilgang til den nylig endrede tilstanden eller rekvisittene.

Imidlertid det anbefales sterkt å aldri sette tilstanden direkte i denne funksjonen, ellers vil den ytterligere utløse render og componentDidUpdate.

Gjennom denne metoden får vi beregne scrollHeight forskjellen mellom hva den var før etter oppdatering.

Dette er bare en brukssak, der er flere andre som –

👉 Å hente data fra serveren

👉 Å få tilgang til DOM-nodene til React-komponenten

For å få detaljer om brukssakene , sjekk ut den offisielle dokumentasjonen –

React.Component – React

Denne siden inneholder en detaljert API-referanse for React-komponentklassen definisjon. Det forutsetter at du «er kjent med…

reactjs.org

✔ Demontering av livssyklusmetoder

Dette er den siste fasen der en reaktorkomponent går gjennom der den blir demontert fra DOM og ødelagt. Det er bare en livssyklusmetode i denne fasen.

1. componentWillUnmount ()

componentWillUnmount metoden kalles først i avmonteringsfasen, like før komponenten blir ødelagt.Dette er stedet der du kan utføre en hvilken som helst rengjøringsmetode, i hovedsak avbryte nettverksforespørsler, ugyldiggjøre tidtakere eller rydde opp i uønskede abonnementer som ble opprettet i componentDidMount -metoden. > Sammendrag:

Det er noen andre metoder som påkalles i tilfelle en feil kastes av en etterkommende komponent, kalles disse metodene feilhåndteringssyklusmetoder. Du finner dem her .

Det var alle kodere !! Jeg håper du får en bedre forståelse av React-komponentens livssyklusmetoder gjennom denne bloggen. Kom snart tilbake til deg med en annen innsiktsfull blogg.

Till så glad lesing !! 🙃

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *