Mitkä ovat komponentin elinkaarimenetelmät reaktiossa JS ??

Kuten me kaikki, myös React-komponentit synnyttävät, kasvavat ja kuolevat!

(Habilelabs) (7. joulukuuta 2020)

Kirjoittaja: Payal Mittal

komponenttien elinkaarimenetelmät reagoissa
Komponenttien elinkaarimenetelmät React.js-tiedostossa

Jokainen React-luokan komponentti käy läpi sarjan” elinkaarimenetelmät ”. Periaatteessa kaikki Reactissa koostuu joko komponenteista tai osista komponentteja.

Nämä komponentit seuraavat tietyn elinkaaren, melkein kuin minkä tahansa maan päällä olevan elävän olennon. He syntyvät, kasvavat ja kuolevat lopulta. Vaihetta, jolloin he syntyvät, kutsutaan kasvavaksi, kun heidän kasvua kutsutaan päivitykseksi, ja kuoleman viimeistä vaihetta kutsutaan irrotukseksi.

Tätä koko prosessia kutsutaan komponentin elinkaareksi. Jokaisessa näistä vaiheista React.js renderöi tiettyjä sisäänrakennettuja menetelmiä, joita kutsutaan elinkaarimenetelmiksi, jotka hallitsevat komponenttien toimintaa sovelluksessa.

Tässä blogissa käymme läpi tämän elinkaaren ja saat tietää näistä elinkaarimenetelmistä –

Mitä ovat komponenttien elinkaarimenetelmät?

Komponenttien elinkaarimenetelmät on jaettu kolmeen eri vaiheeseen, as-

  • Asennus
  • Päivittäminen
  • Irrotus

Koko komponentin elinkaari voidaan ymmärtää tällä yksinkertaisella visuaalisella piirroksella –

komponentin elinkaarikaavio

Keskustelemme nyt vaiheista ja niiden menetelmistä yksityiskohtaisesti. Mennään sitten –

✔ Elinkaarimenetelmien asennus

Komponentin valmistuttua alustaminen, komponenttien asennus alkaa, jolloin komponentti luodaan ja lisätään DOM: iin.

Tässä keskustellaan yleisimmin käytetyistä elinkaarimenetelmistä-

1. konstruktori ()

constructor() kutsutaan ensin ennen asennuksen alkua ja sitä käytetään periaatteessa näiden kahden palvelemiseen Tarkoitus-

Sen sijaan, että käyttäisit setState(), voit määrittää alkutilan suoraan this.state() -menetelmälle constructor. Näin voimme määrittää tilamme-

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

2. render ()

Seuraava rivi on menetelmä render()! Se kiinnittää komponentin DOM: iin ja tekee ne käyttöliittymään. Tätä menetelmää käytetään tutkimaan this.state – ja this.props -attribuutteja aina, kun komponentin state tai props.

render on kaikista reaktioissa yleisimmin käytetty menetelmä. Jos haluat renderöidä elementtejä DOM: iin, render() on menetelmä, jota odotamme, koska voit kirjoittaa ne tänne.

Aina kun sitä kutsutaan, se voi palata monen tyyppisiä, ts. merkkijonot, numerot, taulukot, fragmentit, Boolean tai null -arvo-, portaali- tai React-elementit. Tässä on joitain esimerkkejä –

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

]; }
}

Huomautus : Jos componentShouldMount -menetelmä palauttaa loogisen false -tavan, renderöintimenetelmää ei kutsuta.

3. componentDidMount ()

Tätä menetelmää kutsutaan välittömästi sen jälkeen, kun komponentti on lisätty DOM: iin menetelmällä render . Sitä kutsutaan vain kerran elinkaaressa.

  • Jos haluat luoda tilauksia, tämä on yhtä hyvä paikka kuin mikä tahansa. Mutta sinun on peruutettava tilaus componetWillUnmount().
  • Se on myös hyvä paikka välitellä verkkopyyntö, jos sinun on ladattava tietoja kaukosäätimestä päätepiste.
  • Voit jopa soittaa tähän setState() . Vaikka se laukaisee jälleen renderöinnin uudelleen, et näe ainakaan välitilaa. Sinun on kuitenkin oltava varovainen käyttäessäsi tätä, koska se aiheuttaa suorituskykyongelmia. Itse asiassa sinun tulisi määrittää alkutila constructor() -menetelmässä, suositeltavasti. Mutta tämä lähestymistapa on kätevä, kun sinun on mitattava DOM-solmu ennen kuin renderoit jotain, joka riippuu sen koosta.

✔ Elinkaarimenetelmien päivittäminen

Toisin kuin Asennus vaihe, joka tapahtuu vain kerran komponenttia asennettaessa, päivitysvaihe voi tapahtua useita kertoja.

Aina kun komponentin rekvisiitta / tila muuttuu päivitettäväksi, ajastin soittaa render ja componentDidupdate muutoksen kuittaamiseksi, päivittämiseksi ja esittämiseksi päivitysvaihe tulee esiin.

1. static getDerivedStateFromProps ()

Tämä on ensimmäinen menetelmä, jota kutsutaan päivityksen elinkaarivaiheessa. Sitä voidaan kutsua useita kertoja, koska sitä kutsutaan aina, kun render -menetelmä aloitetaan. Joten on selvää, että sitä kutsutaan sekä asennus- että päivitysvaiheessa.

Tämä menetelmä ei ole kovin yleinen ja sitä käytetään harvoin erityistapauksissa, esimerkiksi kun komponentin tila vaihtelee rekvisiittaisten muutosten myötä ajan myötä. Kuten nimestä käy ilmi, se saa tilan rekvisiitasta.

2. shouldComponentUpdate ()

Tätä menetelmää kutsutaan, kun komponentti on hahmontamassa uudelleen. Se määrittää, vaikuttavatko states / props -kohdan nykyiset muutokset komponentin ulostuloon. Sitä käytetään vain keinona suorituskyvyn optimointiin, ja ilmoita meille komponentin pitäisi päivittyä vai ei, joka ilmaistaan ​​Boolen true tai false -arvot. Oletuksena se palauttaa true.

Jos

shouldComponentUpdate() palauttaa false arvo, se tarkoittaa, että käsket Reactia ohittamaan tämän päivityksen, joten render – ja componentDidUpdate -menetelmiä ei kutsuta.

Työskentely shouldComponentUpdate-menetelmällä

Voit kuitenkin estää myös tarpeettoman hahmonnuksen käyttämällä sisäänrakennettua

React.PureComponent jonka avulla voit verrata uutta ja vanhaa state / props ja tekee tuskin mahdollisen päivityksen ohittamisen.

3. render ()

Seuraavaksi tulee render. Se, kutsutaanko sitä, riippuu arvosta, jonka palauttaa shouldComponentUpdate. Se laukeaa vain, jos true palautetaan.

4. getSnapshotBeforeUpdate ()

Kun render kutsutaan,

getSnapshotBeforeUpdate tulee seuraavaksi. Sitä ei käytetä yleisesti, mutta se on erittäin kätevä tietyissä erityistapauksissa, kuten silloin, kun tarvitset pääsyn joihinkin DOM: n tietoihin ja muutat niitä heti päivityksen jälkeen.

Tämä menetelmä antaa komponentille kaapata joitain tietoja (vierityskorkeus) DOM: sta, jotta niitä voidaan säätää myöhemmin (päivityksen jälkeen). Sinun on kuitenkin ymmärrettävä, että tähän otettu vierityskorkeus osoittaa korkeuden ennen kun se päivitettiin DOM: ksi.

Voimme siirtää prevState ja prevProps argumentteina, kuten tässä on annettu –

getSnapshotBeforeUpdate(prevProps, prevState) {return null;}

5. componentDidUpdate ()

Tätä menetelmää käytetään välittömästi sen jälkeen, kun komponentti on päivitetty ja hahmonnettu uudelleen. Se vastaanottaa parametreina prevState ja prevProps ja voi myös käyttää äskettäin muutettua tilaa tai rekvisiittaa.

Kuitenkin, on erittäin suositeltavaa, ettet koskaan aseta tilaa suoraan tähän toimintoon, muuten se laukaisee edelleen render ja componentDidUpdate.

Tämän menetelmän avulla voimme laskea scrollHeight eron sen välillä, mikä se oli ennen päivityksen jälkeen.

Tämä on vain yksi käyttötapa. ovat useita muita, kuten –

👉 Tietojen noutaminen palvelimelta

👉 Pääsy React-komponentin DOM-solmuihin

Saat lisätietoja sen käyttötapauksista , tutustu virallisiin asiakirjoihin –

React.Component – React

Tämä sivu sisältää yksityiskohtaisen API-viitteen React-komponenttiluokalle määritelmä. Se olettaa, että olet perehtynyt…

reactjs.org

✔ Elinkaarimenetelmien irrotus

Tämä on viimeinen vaihe, jossa reaktiokomponentti käy läpi, missä se irrotetaan DOM: sta ja tuhotaan. Tässä vaiheessa on vain yksi elinkaarimenetelmä.

1. componentWillUnmount ()

componentWillUnmount menetelmää kutsutaan ensin irrotusvaiheessa, juuri ennen komponentin tuhoutumista.Tämä on paikka, jossa voit suorittaa minkä tahansa puhdistustavan, keskeyttää verkon pyynnöt, mitätöidä ajastimet tai puhdistaa ei-toivotut tilaukset, jotka on luotu menetelmällä componentDidMount .

Yhteenveto:

On joitain muita menetelmiä, joita käytetään, jos virhe heittää jälkeläiskomponentti, näitä menetelmiä kutsutaan virheiden käsittelyn elinkaarimenetelmiksi. Löydät ne täältä .

Se oli kaikki koodaajia !! Toivon, että saat paremman käsityksen React-komponentin elinkaarimenetelmistä tämän blogin kautta. Ota yhteyttä pian uuden oivaltavan blogin avulla.

Till onnellista lukemista !! 🙃

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *