Hogyan lehet megérteni egy komponens életciklusának módszereit a ReactJS-ben

Programozás

Ebben a cikkben a ReactJS életciklusának módszereit fogjuk feltárni. De mielőtt továbblépnénk a React életciklusának különböző módszereire, meg kell értenünk, mi ez.

Mint tudjuk, ezen a világon minden egy ciklust követ (mondjuk emberek vagy fák). Születünk, növekedünk, majd meghalunk. Szinte minden életében ezt a ciklust követi, és a React komponensek is. Az összetevők létrejönnek (a DOM-ra vannak felszerelve), frissítéssel növekednek, majd meghalnak (leválasztás a DOM-ról). Ezt komponens életciklusnak nevezik .

Különböző életciklus-módszerek léteznek, amelyeket a React biztosít az alkatrészek életének különböző szakaszaiban. A React automatikusan meghívja a felelős módszert annak a fázisnak megfelelően, amelyben az alkatrész van. Ezek a módszerek jobb kontrollt biztosítanak komponensünk felett, és ezeket a módszereket felhasználva manipulálhatjuk őket.

Jelenleg tudjuk, hogy mi az életciklus-módszer és miért fontos. Tehát mik ezek a különböző módszerek? Vessünk egy pillantást rájuk.

Életciklus-módszerek

Az alkatrészek életciklusát nagyjából négy részre osztják:

  • inicializálás
  • beépítési
  • frissítés, és
  • leszerelés .

Beszéljük meg az életciklus különböző módszereit, amelyek ezekben a különböző fázisokban elérhetők (pl. Inicializálás, telepítés, frissítés és leszerelés).

Inicializálás

Ez az a fázis, amelyben az alkatrész megkezdi útját az állapot (lásd alább) és a kellékek beállításával. Ez általában a konstruktor módszer belsejében történik (lásd alább, hogy jobban megértsük az inicializálási fázist).

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

Beépítési

A név magától értetődő. A felszerelés az a fázis, amelyben a React komponensünk fel van szerelve a DOM-ra (azaz létrejön és beilleszkedik a DOM-ba).

Ez a szakasz az inicializálási szakasz befejezése után kerül a helyszínre. Ebben a fázisban komponensünk renderel először. Az ebben a szakaszban rendelkezésre álló módszerek a következők:

1. componentWillMount ()

Ezt a módszert közvetlenül azelőtt hívják meg, hogy egy alkatrész felkerül a DOM-ra, vagy a renderelési metódust meghívják. E módszer után az alkatrész fel lesz szerelve.

Megjegyzés: Ebben a módszerben nem szabad API-hívásokat vagy bármilyen adatmódosítást végrehajtani a this.setstate használatával, mert a renderelési módszer előtt hívják meg. Tehát semmit sem lehet kezdeni a DOM-tal (azaz az adatok frissítésével az API-válasz segítségével), mivel még nincs csatlakoztatva. Ezért nem tudjuk frissíteni az állapotot az API válaszával.

2. componentDidMount ()

Ezt a módszert hívják meg, miután az alkatrész fel lett szerelve a DOM-ra. A componentWillMount-hoz hasonlóan az életciklusban is egyszer hívják meg. A metódus végrehajtása előtt meghívják a render metódust (azaz elérhetjük a DOM-ot). Hívhatunk API-t és frissíthetjük az állapotot az API-val.

Tekintse át, hogy megértse ezeket a rögzítési módszereket:

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

Frissítés

Ez a harmadik szakasz, amelyen keresztül komponensünk áthalad. A komponens létrehozási szakasza után a frissítési fázis bekerül a színtérbe. Itt változik a komponens állapota, és így következik az újrarenderelés.

Ebben a fázisban az összetevő adatai (állapot és kellékek) frissülnek a felhasználói eseményekre, például kattintásra, gépelésre stb. Reagálva. Ennek eredményeként az alkatrész újra megjelenik. Az ebben a szakaszban rendelkezésre álló módszerek a következők:

  1. shouldComponentUpdate ()

Ez a módszer meghatározza, hogy az összetevőt frissíteni kell-e vagy sem. Alapértelmezés szerint igazra tér vissza. De egy bizonyos ponton, ha valamilyen feltétellel vissza akarja adni az összetevőt, akkor a shouldComponentUpdate metódus a megfelelő hely.

Tegyük fel, hogy például csak akkor akarja újra előállítani az összetevőt, ha változás következik be a támaszban - akkor használja ki ennek a módszernek az erejét. Olyan argumentumokat kap, mint a nextProps és a nextState, amelyek segítenek abban, hogy eldöntsük, újra kell-e renderelni, összehasonlítva az aktuális prop értékkel.

2. componentWillUpdate ()

A többi módszerhez hasonlóan a neve is magától értetődő. A komponens újrarendezése előtt hívják meg. A ' shouldComponentUpdate ' metódus után egyszer hívják meg . Ha az alkatrész újrarendelése, valamint az állapot és a prop frissítése után néhány számítást szeretne végrehajtani, akkor erre a legjobb hely. A 'shouldComponentUpdate' módszerhez hasonlóan olyan argumentumokat is kap, mint a nextProps és a nextState.

3. ComponentDidUpdate ()

Ezt a módszert közvetlenül az összetevő újrarenderelése után hívják meg. Miután az új (frissített) összetevő frissül a DOM-on, a ' componentDidUpdate ' módszer végrehajtásra kerül. Ez a módszer olyan argumentumokat kap, mint a prevProps és a prevState.

Vessen egy pillantást a frissítési módszerek jobb megértésére:

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

Leszerelés

Ez az alkatrész életciklusának utolsó szakasza. Amint a neve egyértelműen sugallja, ebben a szakaszban az alkatrész leválik a DOM-ról. Az ebben a fázisban rendelkezésre álló módszer a következő:

1. componentWillUnmount ()

Ezt a módszert akkor hívják meg, mielőtt a komponens leválasztása megtörténik. Az összetevő DOM-ból való eltávolítása előtt a ' componentWillUnMount' végrehajtja. Ez a módszer az alkatrész életciklusának végét jelöli.

Az életciklus-módszerek folyamatábrája:

That’s all about this important part of the React world — lifecycle methods. I hope you enjoyed reading it.

Thanks!