React Components - rekvisiitta ja tilat ReactJS: ssä esimerkkien avulla

'Reactissa kaikki on komponentti'

Jos tunnet Reactin, sinun on oltava kuullut tai lukenut tämän lauseen monta kertaa. Mutta tiedätkö mitä se tarkalleen tarkoittaa ja miten sitä käytetään? Jos et, lue tämä blogi saadaksesi lisätietoja React-komponenteista ja elinkaaren eri vaiheista. Olen varma siihen mennessä, kun olet valmis lukemalla tätä blogia, saat täydellisen käsityksen React-komponenteista ja sitä ympäröivistä käsitteistä. Mutta ennen kuin jatkat, tutustu nopeasti aiheisiin, joista keskustelen:

• Mitä ovat React-komponentit?
• Reagoivien komponenttien edut
• Rekvisiitta
• Osavaltiot
• Osavaltiot vs. rekvisiitta
• Reagoi komponentin elinkaari

Mitä ovat React-komponentit?

Aikaisemmin kehittäjien oli kirjoitettava 1000 riviä koodia yksinkertaisen yhden sivun sovelluksen kehittämiseksi. Suurin osa näistä sovelluksista noudatti perinteistä DOM-rakennetta, ja niihin tehtyjen muutosten tekeminen oli erittäin haastava ja työläs tehtävä kehittäjille.Heidän täytyi etsiä muutosta tarvitseva elementti manuaalisesti ja päivittää se vastaavasti. Jopa pieni virhe johtaisi sovelluksen epäonnistumiseen. Lisäksi DOM: n päivittäminen oli erittäin kallista. Siten otettiin käyttöön komponenttipohjainen lähestymistapa. Tässä lähestymistavassa koko sovellus on jaettu loogisiin paloihin, joita kutsutaan komponenteiksi. React oli yksi kehyksistä, jotka valitsivat tämän lähestymistavan.Jos aiot rakentaa urasi verkkokehityksessä, varhainen aloittaminen avaisi sinulle paljon mahdollisuuksia.

Ymmärretään nyt, mitä nämä komponentit ovat.

Reagoivia komponentteja pidetään käyttöliittymän rakennuspalikoina. Jokainen näistä komponenteista on samassa tilassa, mutta ne toimivat toisistaan ​​riippumatta. Reaktiokomponenteilla on oma rakenne, menetelmät ja API: t. Ne ovat uudelleenkäytettäviä ja ne voidaan injektoida rajapintoihin tarpeen mukaan. Saadaksesi paremman käsityksen, pidä koko käyttöliittymää puuna.Tällöin alkukomponentista tulee juuri ja jokaisesta itsenäisestä kappaleesta tulee haaroja, jotka jaetaan edelleen alaosiksi.

Tämä pitää käyttöliittymämme järjestyksessä ja antaa tietojen ja tilamuutosten loogisesti virrata juuresta haaroihin ja sitten alahakemiin. Komponentit soittavat palvelimelle suoraan asiakaspuolelta, jolloin DOM voi päivittää dynaamisesti sivua päivittämättä. Tämä johtuu siitä, että reaktiokomponentit perustuvat AJAX-pyyntöjen käsitteeseen. Jokaisella komponentilla on oma käyttöliittymä, joka voi soittaa palvelimelle ja päivittää ne. Koska nämä komponentit ovat toisistaan ​​riippumattomia, kukin voi päivittää vaikuttamatta muihin tai käyttöliittymään kokonaisuutena.

Käytämme React.createClass () menetelmä komponentin luomiseksi. Tämä menetelmä on välitettävä objekti-argumentti, joka määrittää React-komponentin. Jokaisessa komponentissa on oltava täsmälleen yksi tehdä () menetelmä. Se on komponentin tärkein ominaisuus, joka on vastuussa HTML: n jäsentämisestä JavaScript, JSX: ssä. Tämä tehdä () palauttaa komponentin HTML-esityksen DOM-solmuna. Siksi kaikkien HTML-tunnisteiden on oltava suljettuina tehdä () .

Seuraava on esimerkkikoodi komponentin luomista varten.

datan tyyppi päivämäärälle neliömetriin

import React from 'react' import ReactDOM from 'react-dom' class MyComponent laajentaa React.Component {render () {return (
Tunnuksesi on {this.state.id}
)}} ReactDOM.render (, document.getElementById ('content'))

Osavaltiot vs. rekvisiitta

Reagoi komponentin elinkaari

React tarjoaa erilaisia ​​menetelmiä, jotka ilmoittavat, kun komponentin elinkaaressa tapahtuu tietty vaihe. Näitä menetelmiä kutsutaan elinkaarimenetelmiksi. Nämä elinkaarimenetelmät eivät ole kovin monimutkaisia. Voit ajatella näitä menetelmiä erikoistuneina tapahtumankäsittelijöinä, joita kutsutaan komponenttien käyttöiän eri vaiheissa. Voit jopa lisätä oman koodisi näihin menetelmiin erilaisten tehtävien suorittamiseksi. Komponentin elinkaaresta puhuttaessa elinkaari on jaettu neljään vaiheeseen. He ovat:

1. Alkuvaihe
2. Päivitetään vaihetta
3. Rekvisiitta vaihtaa vaihetta
4. Irrotusvaihe

Jokainen näistä vaiheista sisältää joitain vain heille ominaisia ​​elinkaarimenetelmiä. Joten selvitetään nyt, mitä tapahtuu näiden vaiheiden aikana.

a. Alkuvaihe - React-komponentin elinkaaren ensimmäinen vaihe on alkuvaihe tai renderointivaihe. Tässä vaiheessakomponentti on alkamassa matkansa ja matkalla DOM: iin. Tämä vaihe koostuu seuraavista menetelmistä, joihin vedotaan ennalta määrätyssä järjestyksessä.

1. getDefaultProps (): Tätä menetelmää käytetään määrittämään oletusarvo tämä. tukee . Sitä kutsutaan, ennen kuin komponenttisi on edes luotu tai vanhempien rekvisiitta siirretään siihen.
2. getInitialState (): Tätä menetelmää käytetääntäsmentää oletusarvo tämä. valtio ennen komponentin luomista.
3. componentWillMount (): Tämä on viimeinen tapa, johon voit soittaa, ennen kuin komponenttisi renderöidään DOM: iin. Mutta jos soitat setState () tämän menetelmän sisällä komponenttia ei tehdä uudelleen.
4. renderöinti (): Th is -menetelmä on vastuussa yksittäisen HTML-juurisolmun palauttamisesta, ja se on määriteltävä jokaisessa komponentissa. Voit palata tyhjä tai väärä jos et halua tehdä mitään.
5. componentDidMount (): Kun komponentti on renderöity ja asetettu DOM: iin, tämä menetelmää kutsutaan. Täällä voit suorittaa mitä tahansa DOM-kyselytoimintoja.

b. Vaihe päivitetään - Kun komponentti on lisätty DOM: iin, ne voivat päivittää ja renderöidä vain, kun tilamuutos tapahtuu. Aina kun tila muuttuu, komponentti kutsuu sen tehdä () uudelleen. Mikä tahansa komponentti, joka perustuu tämän komponentin lähtöön, kutsuu sitä myös tehdä () uudelleen. Tämä tehdään sen varmistamiseksi, että komponenttimme näyttää uusimman version itsestään. Tällöin komponenttien tilan päivittäminen onnistuu seuraavilla tavoilla:

1. shouldComponentUpdate (): Tämän menetelmän avulla voit hallita komponentin käyttäytymistä päivittää itseään. Jos palautat tosi tältä menetelmältä,komponentti päivittyy. Muuten, jos tämä menetelmä palauttaa aväärä, komponentti ohittaa päivityksen.
2. componentWillUpdate (): Thänen menetelmäänsä kutsutaan jennen kuin komponenttisi on päivittymässä. Tässä menetelmässä et voi muuttaa komponenttitilaa soittamalla this.setState .
3. renderöinti (): Jos palautat väärää kautta shouldComponentUpdate () , koodi sisällä tehdä () käynnistetään uudelleen sen varmistamiseksi, että komponenttisi näyttää itsensä oikein.
4. componentDidUpdate (): Kun komponentti on päivitetty ja hahmonnettu, tätä menetelmää käytetään. Voit lisätä tähän menetelmään minkä tahansa koodin, jonka haluat suorittaa, kun komponentti on päivitetty.

c. Tukee vaihevaihetta - Jälkeen komponentti on renderöity DOM: iin, ainoa toinen kerta, kun komponentti päivittyy, lukuun ottamatta tilamuutosta, kun sen prop-arvo muuttuu. Käytännössä tämä vaihe toimii samalla tavalla kuin edellinen vaihe, mutta valtion sijaan se käsittelee rekvisiitta. Siten tässä vaiheessa on vain yksi lisämenetelmä päivitysvaiheesta.

1. componentWillReceiveProps (): Tämä menetelmä palauttaa yhden argumentin, joka sisältää komponentille määritettävän uuden prop-arvon.
   Loput elinkaarimenetelmät käyttäytyvät identtisesti menetelmien kanssa, jotka näimme edellisessä vaiheessa.
   
2. shouldComponentUpdate ()
3. componentWillUpdate ()
4. tehdä ()
5. componentDidUpdate ()

d.Irrotusvaihe -Tämä on komponenttien elinkaaren viimeinen vaihe, jossa komponentti tuhoutuu ja poistetaan kokonaan DOM: sta. Se sisältää vain yhden menetelmän:

1. componentWillUnmount (): Kun tämä menetelmä on aktivoitu, komponenttisi poistetaan DOM: sta pysyvästi.Tässä menetelmässä Yvoit suorittaa puhdistamiseen liittyviä tehtäviä, kuten poistaa tapahtumakuuntelijat, pysäyttää ajastimet jne.

Seuraava on koko elinkaarikaavio:

Tämä vie meidät React Components -blogin loppuun. Toivon tässä blogissa, että pystyin selittämään selkeästi, mitkä ovat React Components, miten niitä käytetään. Voit viitata blogiini , jos haluat oppia lisää ReactJS: stä.

Jos haluat saada koulutusta Reactissa ja haluat kehittää mielenkiintoisia käyttöliittymiä itse, tutustu Edureka, luotettava verkko-oppimisyritys, jolla on yli 250 000 tyytyväisen oppijan verkosto, joka levisi ympäri maailmaa.

Onko sinulla kysymys meille? Mainitse se kommenttiosassa ja palaamme sinuun.