Kako razumjeti metode životnog ciklusa komponente u ReactJS-u

U ovom ćemo članku istražiti metode životnog ciklusa ReactJS-a. No, prije nego što prijeđemo na različite reakcijske metode životnog ciklusa, trebali bismo shvatiti što su to.

Kao što znamo, sve na ovom svijetu slijedi ciklus (recimo ljudi ili drveće). Rođeni smo, rastemo i onda umiremo. Gotovo sve prati ovaj ciklus u životu, a reagiraju i komponente React. Komponente se kreiraju (montiraju na DOM), rastu ažuriranjem i zatim umiru (demontiraju se na DOM-u). To se naziva životnim ciklusom komponente.

Postoje različite metode životnog ciklusa koje React pruža u različitim fazama života komponente. React automatski poziva odgovornu metodu prema fazi u kojoj je komponenta. Te nam metode daju bolju kontrolu nad našom komponentom i njima možemo manipulirati pomoću ovih metoda.

Trenutno znamo što su metode životnog ciklusa i zašto su važne. Pa koje su to različite metode? Pogledajmo ih.

Metode životnog ciklusa

Životni ciklus komponente široko je podijeljen u četiri dijela:

  • inicijalizacija
  • montažu
  • ažuriranje i
  • demontaža .

Razmotrimo različite metode životnog ciklusa koje su dostupne u tim različitim fazama (tj. Inicijalizacija, montiranje, ažuriranje i demontaža).

Inicijalizacija

Ovo je faza u kojoj će komponenta započeti svoje putovanje postavljanjem stanja (vidi dolje) i rekvizita. To se obično radi unutar metode konstruktora (pogledajte dolje kako biste bolje razumjeli fazu inicijalizacije).

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 }; }

Montaža

Ime je samo po sebi razumljivo. Montiranje je faza u kojoj se naša komponenta React postavlja na DOM (tj. Stvara se i ubacuje u DOM).

Ova faza dolazi na scenu nakon završetka faze inicijalizacije. U ovoj se fazi naša komponenta prikazuje prvi put. Metode koje su dostupne u ovoj fazi su:

1. componentWillMount ()

Ova se metoda poziva neposredno prije nego što se komponenta montira na DOM ili se pozove metoda prikaza. Nakon ove metode, komponenta se montira.

Napomena: Ne biste trebali upućivati ​​API pozive ili bilo kakve promjene podataka koristeći this.setstate u ovoj metodi, jer se poziva prije metode generiranja. Dakle, s DOM-om se ništa ne može učiniti (tj. Ažuriranje podataka API odgovorom) jer nije montiran. Stoga ne možemo ažurirati stanje pomoću API odgovora.

2. komponentaDidMount ()

Ova se metoda poziva nakon što se komponenta montira na DOM. Kao i komponentaWillMount, poziva se jednom u životnom ciklusu. Prije izvođenja ove metode poziva se metoda renderiranja (tj. Možemo pristupiti DOM-u). Možemo upućivati ​​API pozive i ažurirati stanje pomoću API odgovora.

Pogledajte kako biste razumjeli ove metode montiranja:

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!

); } }

Ažuriranje

Ovo je treća faza kroz koju prolazi naša komponenta. Nakon faze montiranja u kojoj je komponenta stvorena, na scenu stupa faza ažuriranja. Tu se mijenja stanje komponente i stoga dolazi do ponovnog prikazivanja.

U ovoj se fazi podaci komponente (stanje i rekviziti) ažuriraju kao odgovor na korisničke događaje poput klika, tipkanja i tako dalje. To rezultira ponovnim prikazivanjem komponente. Metode koje su dostupne u ovoj fazi su:

  1. shouldComponentUpdate ()

Ova metoda određuje treba li komponentu ažurirati ili ne. Po defaultu vraća true. Ali u nekom trenutku, ako želite ponovno prikazati komponentu pod nekim uvjetom, tada je metodaComComntintUpdate pravo mjesto.

Pretpostavimo da, na primjer, želite ponovno prikazati komponentu samo kad dođe do promjene u svojstvu - tada iskoristite snagu ove metode. Prima argumente poput nextProps i nextState koji nam pomažu da odlučimo hoće li se ponovno prikazati usporedbom s trenutnom vrijednošću oslonca.

2. componentWillUpdate ()

Kao i druge metode, i njegovo je ime samo po sebi objašnjenje. Poziva se prije ponovnog prikazivanja komponente. Poziva se jednom nakon metode ' shouldComponentUpdate '. Ako želite izvršiti neki izračun prije ponovnog prikazivanja komponente i nakon ažuriranja stanja i oslonca, onda je ovo najbolje mjesto za to. Poput metode 'shouldComponentUpdate', ona također prima argumente poput nextProps i nextState.

3. ComponentDidUpdate ()

Ova se metoda poziva neposredno nakon ponovnog prikazivanja komponente. Nakon što se nova (ažurirana) komponenta ažurira na DOM-u, izvršava se metoda ' componentDidUpdate '. Ova metoda prima argumente poput prevProps i prevState.

Pogledajte kako biste bolje razumjeli metode ažuriranja:

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!

); } }

Demontaža

Ovo je zadnja faza u životnom ciklusu komponente. Kao što naziv jasno sugerira, komponenta se u ovoj fazi demontira iz DOM-a. Metoda koja je dostupna u ovoj fazi je:

1. componentWillUnmount ()

Ova se metoda poziva prije nego što se izvrši demontaža komponente. Prije uklanjanja komponente iz DOM -a izvršava se ' componentWillUnMount' . Ova metoda označava kraj životnog ciklusa komponente.

Evo prikaza dijagrama toka metoda životnog ciklusa:

To je sve o ovom važnom dijelu svijeta React - metodama životnog ciklusa. Nadam se da ste uživali čitajući ga.

Hvala!