Kuidas mõista komponendi elutsükli meetodeid ReactJS-is

Selles artiklis uurime ReactJS-i elutsükli meetodeid. Kuid enne React'i erinevate elutsüklimeetodite juurde liikumist peaksime mõistma, mis see on.

Nagu me teame, toimub siin maailmas kõik tsükli järgi (ütleme inimesed või puud). Me sünnime, kasvame ja sureme siis. Peaaegu kõik järgib seda tsüklit oma elus ja ka React komponendid. Komponendid luuakse (paigaldatakse DOM-ile), kasvavad värskendades ja surevad (eemaldatakse DOM-ist). Seda nimetatakse komponendi elutsükliks.

Reactc pakub komponendi elu erinevates etappides erinevaid elutsüklimeetodeid. React kutsub automaatselt vastutavat meetodit vastavalt faasile, milles komponent asub. Need meetodid annavad meile parema kontrolli oma komponendi üle ja saame neid neid meetodeid kasutades manipuleerida.

Praegu teame, mis on olelusringi meetodid ja miks need on olulised. Mis on need erinevad meetodid? Vaatame neid.

Elutsükli meetodid

Komponendi elutsükkel on üldjoontes jagatud nelja ossa:

  • initsialiseerimine
  • kinnitus
  • ajakohastamine ja
  • lahtihaakimine .

Arutleme erinevate elutsükli meetodite üle, mis on nendes erinevates etappides saadaval (st initsialiseerimine, ühendamine, värskendamine ja lahtiühendamine).

Initsialiseerimine

See on faas, kus komponent hakkab oma teekonda alustama oleku (vt allpool) ja rekvisiitide seadistamisega. Tavaliselt tehakse seda konstruktori meetodi sees (lähtestamisetapi paremaks mõistmiseks vaadake allpool).

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

Paigaldamine

Nimi on iseenesestmõistetav. Paigaldus on faas, kus meie Reacti komponent paigaldatakse DOM-i (st luuakse ja sisestatakse DOM-i).

See etapp tuleb sündmuskohale pärast initsialiseerimise lõppu. Selles etapis renderdab meie komponent esimest korda. Selles etapis on saadaval järgmised meetodid:

1. komponentWillMount ()

Seda meetodit nimetatakse vahetult enne komponendi kinnitamist DOM-i või renderdamismeetodi kutsumist. Pärast seda meetodit saab komponent paigaldatud.

Märkus. Selle meetodi this.setstate abil ei tohiks teha API-kõnesid ega andmemuudatusi, kuna seda kutsutakse enne renderdamismeetodit. Niisiis ei saa DOM-iga midagi teha (st andmete värskendamine API-vastusega), kuna see pole installitud. Seega ei saa me olekut API vastusega värskendada.

2. komponentDidMount ()

Seda meetodit nimetatakse pärast seda, kui komponent on DOM-ile paigaldatud. Nagu komponentWillMount, nimetatakse seda ka üks kord kogu elutsükli jooksul. Enne selle meetodi käivitamist kutsutakse renderdamismeetod (st pääseme juurde DOM-ile). Saame teha API kõnesid ja värskendada olekut API vastusega.

Vaadake, kuidas mõista neid kinnitusviise:

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!

); } }

Uuendamine

See on kolmas faas, mille kaudu meie komponent läbib. Pärast paigaldusetappi, kus komponent on loodud, tuleb uuendusetapp. Siin muutub komponendi olek ja seega toimub uuesti renderdamine.

Selles etapis värskendatakse komponendi andmeid (olek ja rekvisiidid) vastuseks kasutaja sündmustele, nagu klõpsamine, tippimine ja nii edasi. Selle tulemuseks on komponendi uuesti renderdamine. Selles etapis on saadaval järgmised meetodid:

  1. peaksComponentUpdate ()

See meetod määrab, kas komponenti tuleks värskendada või mitte. Vaikimisi tagastatakse tõene. Kuid mingil hetkel, kui soovite komponendi mingil tingimusel uuesti renderdada, peaks meetod ComponentUpdate olema õige koht.

Oletame, et soovite näiteks oma komponendi uuesti renderdada ainult siis, kui prop on muutunud - siis kasutage selle meetodi jõudu. See saab selliseid argumente nagu nextProps ja nextState, mis aitavad meil otsustada, kas uuesti renderdada, võrreldes praeguse rekvisiidi väärtusega.

2. komponentWillUpdate ()

Nagu teised meetodid, on ka selle nimi iseenesestmõistetav. Seda kutsutakse enne, kui komponent uuesti renderdatakse. Seda kutsutakse üks kord meetodi ' shouldComponentUpdate ' järel. Kui soovite enne komponendi uuesti renderdamist ning pärast oleku ja propi värskendamist teha mõned arvutused, siis on see parim koht seda teha. Nagu meetod „shouldComponentUpdate”, saab see ka selliseid argumente nagu nextProps ja nextState.

3. ComponentDidUpdate ()

Seda meetodit nimetatakse vahetult pärast komponendi uuesti renderdamist. Pärast uue (värskendatud) komponendi DOM-is värskendamist käivitatakse meetod " componentDidUpdate ". See meetod saab selliseid argumente nagu prevProps ja prevState.

Vaadake, kuidas värskendusmeetodeid paremini mõista:

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!

); } }

Lahtihoidmine

See on komponendi elutsükli viimane etapp. Nagu nimigi selgelt osutab, eemaldatakse komponent selles etapis DOM-ist. Selles etapis on saadaval järgmine meetod:

1. komponentWillUnmount ()

Seda meetodit nimetatakse enne komponendi lahtihaakimist. Enne komponendi eemaldamist DOM- ist käivitab ' componentWillUnMount' . See meetod tähistab komponendi elutsükli lõppu.

Siin on olelustsükli meetodite vooskeem:

See on kõik selle Reacti maailma olulise osa - elutsükli meetodite kohta. Loodan, et teile meeldis seda lugeda.

Aitäh!