Hvad er komponentlivscyklusmetoder i React JS ??

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

(Habilelabs) (7. dec 2020)

Af Payal Mittal

komponentlivscyklusmetoder i reactjs
Komponentlivscyklusmetoder i React.js

Hver React-klassekomponent gennemgår en række” livscyklusmetoder ”. Grundlæggende består alt i React af enten komponenter eller en del af komponenterne.

Disse komponenter udsættes for at følge en bestemt livscyklus, næsten som for enhver levende skabning på jorden. De føder, vokser og dør til sidst. Fasen, når de fødes, kaldes montering, når de vokser kaldes opdatering, og den sidste fase af døden kaldes afmontering.

Hele denne proces kaldes Component Lifecycle. For hver af disse faser gengiver React.js visse indbyggede metoder kaldet livscyklusmetoder, der styrer komponenternes opførsel i en applikation.

I denne blog gennemgår vi denne livscyklus og får at vide om disse livscyklusmetoder –

Hvad er komponentlivscyklusmetoder?

Komponentens livscyklusmetoder er opdelt i tre forskellige faser, som-

  • Montering
  • Opdatering
  • Afmontering

Hele komponentens livscyklus kan forstås ved denne enkle visuelle illustration –

Diagram over komponentens livscyklus

Nu vil vi diskutere hver af faserne og deres metoder i detaljer. Lad os gå så –

✔ Montering af livscyklusmetoder

Efter færdiggørelse af komponenten initialisering, komponentmontering begynder, hvor komponenten oprettes og indsættes i DOM.

Her vil vi diskutere de mest anvendte livscyklusmetoder-

1. konstruktør ()

constructor() kaldes først inden monteringen begynder og bruges grundlæggende til at betjene disse to formål-

I stedet for at bruge setState(), kan du direkte tildele den oprindelige tilstand til this.state() i constructor -metoden. Her er hvordan vi kan definere vores tilstand-

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

2. gengiv ()

Næste i linjen er metoden render()! Den monterer komponenten på DOM og gengiver dem til brugergrænsefladen. Denne metode kaldes til at undersøge this.state og this.props attributter, når der er nogen variation i komponentens state eller props.

render er den mest anvendte metode af alle i React. Hvis du vil gengive elementer i DOM, er render() metoden du kan se frem til, fordi du kan skrive dem her.

Når det kaldes, kan det vende tilbage mange typer, dvs. strenge, tal, arrays, fragmenter, booleanske eller null værdi-, portal- eller React-elementer. Nogle eksempler er givet 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

]; }
}

Bemærk : Hvis componentShouldMount -metoden returnerer boolsk false, vil gengivelsesmetoden ikke blive fremkaldt.

3. componentDidMount ()

Denne metode kaldes straks efter komponenten er indsat i DOM via render -metoden . Det kaldes kun én gang i en livscyklus.

  • Hvis du ønsker at oprette abonnementer, er dette et lige så godt sted som nogen at gøre det. Men du bliver nødt til at afmelde dig i componetWillUnmount().
  • Det er også et godt sted at starte en netværksanmodning, hvis du har brug for at indlæse data fra en fjernbetjening slutpunkt.
  • Du kan endda ringe til setState() her. Selvom det yderligere vil udløse en gengivelse igen, vil du ikke se den mellemliggende tilstand i det mindste. Du skal dog være forsigtig, når du bruger dette, fordi det forårsager ydeevneproblemer. Faktisk skal du tildele den oprindelige tilstand i metoden constructor(), som det anbefales. Men denne tilgang er praktisk, når du skal måle en DOM-node, før du gengiver noget, der afhænger af dens størrelse.

✔ Opdatering af livscyklusmetoder

I modsætning til Montering fase, der kun optræder en gang, mens komponenten monteres, kan Opdateringsfasen forekomme flere gange.

Når der er nogen ændring i rekvisitter / tilstand for komponenten, der skal opdateres, kalder en timer for render og componentDidupdate for at anerkende, opdatere og gengive ændringen, kommer opdateringsfasen i spil.

1. statisk getDerivedStateFromProps ()

Dette er den første metode, der kaldes i opdateringslivscyklusfasen. Det kan kaldes flere gange, fordi det kaldes på, hver gang render metoden starter. Så det er indlysende, at det kaldes under både monterings- og opdateringsfaser.

Denne metode er ikke særlig almindelig og bruges sjældent i specifikke tilfælde, for eksempel når komponentens tilstand varierer med ændringer i rekvisitter over tid. Som navnet antyder, stammer det fra rekvisitter.

2. shouldComponentUpdate ()

Denne metode kaldes, når komponenten er ved at blive gengivet igen. Den bestemmer, om de aktuelle ændringer i states / props påvirker komponentens output. Det bruges kun som et middel til ydeevneoptimering og lad os vide hvis komponenten opdateres eller ej, hvilket udtrykkes af boolsk true eller false værdier. Som standard returnerer den true.

Hvis

shouldComponentUpdate() returnerer false værdi, det betyder, at du beder React om at springe denne opdatering over, og render og componentDidUpdate metoder kaldes derfor ikke.

Arbejde med shouldComponentUpdate Method

Du kan dog også forhindre unødvendig gengivelse ved at bruge indbygget

React.PureComponent som lader dig sammenligne den nye og gamle state / props og gør det usandsynligt for dig at springe over enhver nødvendig opdatering.

3. gengiv ()

Dernæst kommer render. Hvorvidt det kaldes eller ej, afhænger af den værdi, der returneres af shouldComponentUpdate. Det udløses kun i det tilfælde, når true returneres.

4. getSnapshotBeforeUpdate ()

Efter at render kaldes,

getSnapshotBeforeUpdate kommer dernæst. Det bruges ikke almindeligt, men det er meget praktisk i visse specifikke tilfælde, f.eks. Når du har brug for adgang til nogle oplysninger i DOM og ændrer det, lige efter at det er blevet opdateret.

Denne metode gør det muligt for komponenten at fange nogle oplysninger (rullehøjde) fra DOM, så de kan justeres senere (efter opdatering). Du skal dog forstå, at rullehøjden, der er fanget her, angiver højden før den blev opdateret til DOM.

Vi kan videregive prevState og prevProps som argumenter, som angivet her –

getSnapshotBeforeUpdate(prevProps, prevState) {return null;}

5. componentDidUpdate ()

Denne metode påberåbes straks efter at komponenten er opdateret og gengivet igen. Den modtager prevState og prevProps som parametre og kan også få adgang til den nyligt ændrede tilstand eller rekvisitter.

Dog det tilrådes på det kraftigste aldrig at indstille tilstanden inden for denne funktion, ellers vil den yderligere udløse render og componentDidUpdate.

Gennem denne metode får vi beregnet scrollHeight forskellen mellem hvad det var før efter opdatering.

Dette er kun en brugssag, der er flere andre som –

👉 At hente data fra serveren

👉 For at få adgang til DOM-noder på React-komponenten

For at få detaljer om dens brugssager , tjek den officielle dokumentation –

React.Component – React

Denne side indeholder en detaljeret API-reference til React-komponentklassen definition. Det antager, at du “er fortrolig med …

reactjs.org

✔ Afmontering af livscyklusmetoder

Dette er den sidste fase, hvor en reaktionskomponent går igennem, hvor den afmonteres fra DOM og ødelægges. Der er kun en livscyklusmetode i denne fase.

1. componentWillUnmount ()

componentWillUnmount metode kaldes først i afmonteringsfasen, lige før komponenten ødelægges.Dette er stedet, hvor du kan udføre en hvilken som helst rengøringsmetode, i det væsentlige annullere netværksanmodninger, ugyldige timere eller rydde op i uønskede abonnementer, der blev oprettet i componentDidMount -metoden.

Oversigt:

Der er nogle andre metoder, der påberåbes, hvis en fejl kastes af en efterkommende komponent kaldes disse metoder fejlhåndteringsmetoder for livscyklus. Du finder dem her .

Det var alle kodere !! Jeg håber, at du får en bedre forståelse af React-komponentens livscyklusmetoder gennem denne blog. Kom snart tilbage til dig med en anden indsigtsfuld blog.

Till så glad læsning !! 🙃

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *