Reagendi komponendid - rekvisiidid ja olekud ReactJS-is koos näidetega

See React Componentsi ajaveeb räägib komponentide põhialustest, nende loomisest koos kogu reaktiivkomponendi elutsükliga.

'Reactis on kõik komponent'

Kui olete Reactiga tuttav, peate seda fraasi olema mitu korda kuulnud või lugenud. Kuid kas teate, mida see täpselt tähendab ja kuidas seda kasutatakse? Kui te seda ei tee, lugege seda ajaveebi, et saada teavet React'i komponentide ja elutsükli erinevate etappide kohta. Selleks ajaks, kui olete lõpetanud, olen kindel seda blogi lugedes saate täieliku ülevaate Reacti komponentidest ja seda ümbritsevatest mõistetest. Kuid enne jätkamist vaadake kiiresti läbi teemad, mida arutan:

fibonacci kood c ++

Mis on React komponendid?

Varem pidid arendajad lihtsa ühelehelise rakenduse väljatöötamiseks kirjutama 1000 rida koodi. Enamik neist rakendustest järgisid traditsioonilist DOM-i struktuuri ja nende muutmine oli arendajatele väga keeruline ja tüütu ülesanne.Nad pidid käsitsi otsima muutmist vajava elemendi ja seda vastavalt värskendama. Isegi väike viga tooks kaasa rakenduse tõrke. Pealegi oli DOM-i värskendamine väga kulukas. Nii võeti kasutusele komponendipõhine lähenemine. Selles lähenemises on kogu rakendus jaotatud loogilisteks tükkideks, mida nimetatakse komponentideks. Reageerimine oli üks raamistikest, kes selle lähenemise valis.Kui plaanite oma karjääri veebiarenduses üles ehitada, avaks varajane alustamine teile palju võimalusi.



Saame nüüd aru, mis need komponendid on.

Reageerivaid komponente peetakse kasutajaliidese ehituskivideks. Kõik need komponendid eksisteerivad samas ruumis, kuid toimivad üksteisest sõltumatult. Reageerivatel komponentidel on nii oma struktuur, meetodid kui ka API-d. Need on korduvkasutatavad ja neid saab vajadusel liidestesse süstida. Parema arusaamise saamiseks pidage kogu kasutajaliidest puuks.Siin saab algkomponendist juur ja kõigist iseseisvatest tükkidest harud, mis jagunevad veel alamharudeks.



UI puu - reageerivad komponendid - EdurekaSee hoiab meie kasutajaliidese korrastatuna ning võimaldab andmete ja oleku muudatustel loogiliselt liikuda juurest harudesse ja seejärel alamharudesse. Komponendid helistavad serverile otse kliendipoolelt, mis võimaldab DOM-il dünaamiliselt värskendada ilma lehte värskendamata. Seda seetõttu, et reageerimiskomponendid on üles ehitatud AJAX-i päringute kontseptsioonile. Igal komponendil on oma liides, mis võimaldab serverisse helistada ja neid värskendada. Kuna need komponendid on üksteisest sõltumatud, saavad kõik värskendada, mõjutamata teisi ega kasutajaliidese tervikut.

Me kasutame React.createClass () meetod komponendi loomiseks. See meetod peab edastama objekti argumendi, mis määratleb komponendi React. Iga komponent peab sisaldama täpselt ühte renderdama () meetod. See on komponendi kõige olulisem omadus, mis vastutab JavaScripti JSX-i HTML-i sõelumise eest. Seda renderdama () tagastab DOM-sõlmena komponendi HTML-esituse. Seetõttu peavad kõik HTML-märgendid olema suletud renderdama () .

Järgnevalt on näidiskood komponendi loomiseks.



import React reast'reage 'impordi ReactDOM klassist' react-dom 'Minu komponent laiendab React.Componenti {render () {return (

Teie ID on {this.state.id}

)}} ReactDOM.render (, document.getElementById ('sisu'))

Osariigid vs rekvisiidid

Reageerige komponendi elutsükkel

React pakub erinevaid meetodeid, mis annavad teada komponendi olelusringi teatud etapist. Neid meetodeid nimetatakse olelusringi meetoditeks. Need olelusringi meetodid pole eriti keerulised. Võite mõelda neile meetoditele kui spetsiaalsetele sündmuste käitlejatele, kellele helistatakse komponentide eluea jooksul erinevates punktides. Erinevate ülesannete täitmiseks võite nendele meetoditele lisada isegi oma koodi. Rääkides komponendi elutsüklist, on elutsükkel jagatud 4 faasi. Nemad on:

  1. Algfaas
  2. Faasi värskendamine
  3. Rekvisiidid muudavad faasi
  4. Lahtipaneku faas

Kõik need etapid sisaldavad ainult neile omaseid olelusringi meetodeid. Uurime nüüd, mis juhtub nende etappide ajal.

a. Algfaas - React komponendi elutsükli esimene etapp on algfaas või renderdamise algfaas. Selles etapiskomponent alustab oma teekonda ja suundub DOM-i. See etapp koosneb järgmistest meetoditest, mida kasutatakse ettemääratud järjekorras.

  1. getDefaultProps (): Seda meetodit kasutatakse vaikeväärtuse määramiseks see.props . Sellele helistatakse enne, kui teie komponent on isegi loodud või vanema rekvisiidid sellesse kantakse.
  2. getInitialState (): Seda meetodit kasutataksetäpsustage vaikeväärtus see.riik enne teie komponendi loomist.
  3. componentWillMount (): See on viimane meetod, millele saate helistada enne, kui teie komponent renderdatakse DOM-i. Aga kui helistate setState () selle meetodi abil ei renderdata teie komponenti uuesti.
  4. renderdama (): Th is meetod on vastutav ühe juur HTML-sõlme tagastamise eest ja see peab olema määratletud igas komponendis. Võite naasta null või vale kui te ei soovi midagi renderdada.
  5. componentDidMount (): Kui komponent on renderdatud ja DOM-i paigutatud, tehakse see meetodit nimetatakse. Siin saate teha mis tahes DOM-i päringuoperatsioone.

b. Faasi värskendamine - Kui komponent on DOM-i lisatud, saavad nad värskendada ja uuesti renderdada ainult siis, kui toimub olekumuutus. Iga kord, kui olek muutub, kutsub komponent seda renderdama () uuesti. Iga komponent, mis tugineb selle komponendi väljundile, kutsub seda ka renderdama () uuesti. Seda tehakse tagamaks, et meie komponent kuvab enda uusimat versiooni. Nii saate komponentide edukaks värskendamiseks kasutada järgmisi meetodeid antud järjekorras:

  1. peaksComponentUpdate (): Selle meetodi abil saate kontrollida oma komponendi käitumist ise värskendamisel. Kui tagastate selle meetodi abil tõese,komponent uueneb. Muul juhul, kui see meetod tagastab avale, jätab komponent värskendamise vahele.
  2. componentWillUpdate (): Ttema meetodit nimetatakse jenne, kui teie komponent värskendab. Selles meetodis ei saa te oma komponendi olekut helistades muuta this.setState .
  3. renderdama (): Kui tagastate vale kaudu peaksComponentUpdate () , kood sees renderdama () käivitatakse uuesti, et tagada teie komponendi korralik kuvamine.
  4. componentDidUpdate (): Kui komponent on värskendatud ja renderdatud, käivitatakse see meetod. Selle meetodi sisse saate panna mis tahes koodi, mille soovite pärast komponendi värskendamist käivitada.

c. Toetab faasi muutmist - Pärast komponent on renderdatud DOM-i, ainus teine ​​kord, kui komponent uueneb, on oleku muutus peale selle, kui selle prop väärtus muutub. Praktiliselt töötab see faas sarnaselt eelmisele etapile, kuid riigi asemel tegeleb see rekvisiitidega. Seega on sellel etapil ainult üks täiendav meetod värskendamisetapist.

  1. componentWillReceiveProps (): See meetod tagastab ühe argumendi, mis sisaldab komponendile määratava uue rekvisiidi väärtust.
    Ülejäänud olelusringi meetodid käituvad samamoodi kui eelmises etapis.
  2. peaksComponentUpdate ()
  3. componentWillUpdate ()
  4. renderdama ()
  5. componentDidUpdate ()

d.Lahtipaneku etapp -See on komponentide elutsükli viimane etapp, kus komponent hävitatakse ja eemaldatakse täielikult DOM-ist. See sisaldab ainult ühte meetodit:

  1. componentWillUnmount (): Kui sellele meetodile on viidud, eemaldatakse teie komponent DOM-ist jäädavalt.Selles meetodis Ysaate teha mis tahes koristamisega seotud ülesandeid, näiteks eemaldada sündmuste kuulajad, peatada taimereid jne.

Järgnevalt on toodud kogu elutsükli diagramm:

Sellega jõuame React Components'i ajaveebi lõpuni. Loodan, et suutsin selles blogis selgitada, mis on React Components, kuidas neid kasutatakse. Võite viidata minu ajaveebile veebisaidil , juhul kui soovite ReactJS-i kohta rohkem teada saada.

Kui soovite Reactis koolitust saada ja soovite ise huvitavaid kasutajaliideseid arendada, vaadake järgmist autor Edureka, usaldusväärne veebiõppeettevõte, mille võrgustik koosneb enam kui 250 000 rahulolevast õppijast ja mis levib üle kogu maailma.

Kas teil on meile küsimus? Palun mainige seda kommentaaride jaotises ja võtame teiega ühendust.