Sådan forstås en komponents livscyklusmetoder i ReactJS

I denne artikel skal vi undersøge livscyklusmetoderne i ReactJS. Men inden vi går videre til React's forskellige livscyklusmetoder, skal vi forstå, hvad det er.

Som vi ved følger alt i denne verden en cyklus (siger mennesker eller træer). Vi fødes, vokser og dør derefter. Næsten alt følger denne cyklus i sit liv, og React-komponenter gør det også. Komponenter oprettes (monteret på DOM), vokser ved opdatering og dør derefter (afmonteres på DOM). Dette kaldes en komponentens livscyklus.

Der er forskellige livscyklusmetoder, som React giver i forskellige faser af en komponents liv. React kalder automatisk den ansvarlige metode i henhold til den fase, hvor komponenten er. Disse metoder giver os bedre kontrol over vores komponent, og vi kan manipulere dem ved hjælp af disse metoder.

På nuværende tidspunkt ved vi, hvad livscyklusmetoder er, og hvorfor de er vigtige. Så hvad er disse forskellige metoder? Lad os se nærmere på dem.

Livscyklusmetoder

En komponents livscyklus er bredt klassificeret i fire dele:

  • initialisering
  • montering
  • opdatering, og
  • afmontering .

Lad os diskutere de forskellige livscyklusmetoder, der er tilgængelige i disse forskellige faser (dvs. initialisering, montering, opdatering og afmontering).

Initialisering

Dette er den fase, hvor komponenten skal starte sin rejse ved at indstille tilstanden (se nedenfor) og rekvisitterne. Dette gøres normalt inden for konstruktormetoden (se nedenfor for bedre at forstå initialiseringsfasen).

class Initialize extends React.Component { constructor(props) { // Calling the constructor of // Parent Class React.Component super(props); // initialization process this.state = { date : new Date(), clickedStatus: false }; }

Montering

Navnet er selvforklarende. Montering er den fase, hvor vores React-komponent monteres på DOM (dvs. oprettes og indsættes i DOM).

Denne fase kommer på scenen, efter initialiseringsfasen er afsluttet. I denne fase gengives vores komponent første gang. De metoder, der er tilgængelige i denne fase er:

1. componentWillMount ()

Denne metode kaldes lige før en komponent monteres på DOM eller gengivelsesmetoden kaldes. Efter denne metode monteres komponenten.

Bemærk: Du bør ikke foretage API-opkald eller dataændringer ved hjælp af this.setstate i denne metode, fordi den kaldes før renderingsmetoden. Så der kan ikke gøres noget med DOM (dvs. opdatering af data med API-svar), da de ikke er monteret. Derfor kan vi ikke opdatere tilstanden med API-svaret.

2. componentDidMount ()

Denne metode kaldes, når komponenten bliver monteret på DOM. Ligesom componentWillMount kaldes det en gang i en livscyklus. Før udførelsen af ​​denne metode kaldes gengivelsesmetoden (dvs. vi kan få adgang til DOM). Vi kan foretage API-opkald og opdatere tilstanden med API-svaret.

Se for at forstå disse monteringsmetoder:

class LifeCycle extends React.Component { componentWillMount() { console.log('Component will mount!') } componentDidMount() { console.log('Component did mount!') this.getList(); } getList=()=>{ /*** method to make api call*** } render() { return ( 

Hello mounting methods!

); } }

Opdaterer

Dette er den tredje fase, gennem hvilken vores komponent passerer. Efter monteringsfasen, hvor komponenten er oprettet, kommer opdateringsfasen ind i scenen. Det er her, komponentens tilstand ændres, og derfor finder gendannelse sted igen.

I denne fase opdateres komponentens data (tilstand og rekvisitter) som svar på brugerhændelser som at klikke, skrive og så videre. Dette resulterer i en gengivelse af komponenten. De metoder, der er tilgængelige i denne fase er:

  1. shouldComponentUpdate ()

Denne metode bestemmer, om komponenten skal opdateres eller ej. Som standard returnerer det sandt. Men på et eller andet tidspunkt, hvis du vil gengive komponenten på en eller anden måde, skal ComponentUpdate-metoden være det rigtige sted.

Antag for eksempel, at du kun vil gengive din komponent igen, når der er en ændring i prop - brug derefter kraften i denne metode. Det modtager argumenter som nextProps og nextState, som hjælper os med at beslutte, om vi skal gengive igen ved at lave en sammenligning med den aktuelle propværdi.

2. componentWillUpdate ()

Ligesom andre metoder er dets navn også selvforklarende. Det kaldes, før komponenten re-gengives. Det kaldes en gang efter metoden ' shouldComponentUpdate '. Hvis du vil udføre nogle beregninger, før du gengiver komponenten og efter opdatering af tilstand og prop, er dette det bedste sted at gøre det. Ligesom metoden 'shouldComponentUpdate' modtager den også argumenter som nextProps og nextState.

3. ComponentDidUpdate ()

Denne metode kaldes lige efter gendannelsen af ​​komponenten. Når den nye (opdaterede) komponent opdateres på DOM, udføres metoden ' componentDidUpdate '. Denne metode modtager argumenter som prevProps og prevState.

Se for bedre at forstå opdateringsmetoderne:

class LifeCycle extends React.Component { constructor(props) { super(props); this.state = { date : new Date(), clickedStatus: false, list:[] }; } componentWillMount() { console.log('Component will mount!') } componentDidMount() { console.log('Component did mount!') this.getList(); } getList=()=>{ /*** method to make api call*** fetch('//api.mydomain.com') .then(response => response.json()) .then(data => this.setState({ list:data })); } shouldComponentUpdate(nextProps, nextState){ return this.state.list!==nextState.list } componentWillUpdate(nextProps, nextState) { console.log('Component will update!'); } componentDidUpdate(prevProps, prevState) { console.log('Component did update!') } render() { return ( 

Hello Mounting Lifecycle Methods!

); } }

Afmontering

Dette er den sidste fase i komponentens livscyklus. Som navnet tydeligt antyder, afmonteres komponenten fra DOM i denne fase. Metoden, der er tilgængelig i denne fase, er:

1. componentWillUnmount ()

Denne metode kaldes, før afmontering af komponenten finder sted. Før komponenten fjernes fra DOM'en, udføres ' componentWillUnMount' . Denne metode angiver slutningen af ​​komponentens livscyklus.

Her er et flowchart-billede af livscyklusmetoder:

Det handler om denne vigtige del af React-verdenen - livscyklusmetoder. Jeg håber, du nød at læse det.

Tak!