„React Components“ - „ReactJS“ atramos ir būsenos su pavyzdžiais

„Reaguodami viskas yra komponentas“

Jei esate susipažinęs su „React“, turėtumėte daug kartų girdėti ar skaityti šią frazę. Bet ar žinote, ką tai tiksliai reiškia ir kaip jis naudojamas? Jei to nepadarėte, perskaitykite šį tinklaraštį, kad sužinotumėte viską apie „React“ komponentus ir įvairius gyvenimo ciklo etapus. Esu tikras, kol baigsi skaitydami šį tinklaraštį turėsite išsamų supratimą apie „React“ komponentus ir su juo susijusias sąvokas. Bet prieš tęsdami, greitai pažvelkite į temas, kurias aptarsiu:

• Kas yra „React“ komponentai?
• Reakcinių komponentų pranašumai
• Rekvizitai
• Valstybes
• Valstijos prieš rekvizitus
• Reaguokite komponento gyvavimo ciklą

Kas yra „React“ komponentai?

Anksčiau kūrėjai turėjo parašyti 1000 eilučių kodo, kad būtų sukurta paprasta vieno puslapio programa. Dauguma šių programų atitiko tradicinę DOM struktūrą, o jų pakeitimai kūrėjams buvo labai sudėtinga ir varginanti užduotis.Jie rankiniu būdu turėjo ieškoti elemento, kurį reikėjo pakeisti, ir jį atitinkamai atnaujinti. Net ir nedidelė klaida sukeltų programos gedimą. Be to, DOM atnaujinimas buvo labai brangus. Taigi buvo įvestas komponentais pagrįstas požiūris. Šiuo požiūriu visa programa yra padalinta į loginius gabalus, kurie vadinami komponentais. „React“ buvo vienas iš rėmų, pasirinkusių šį požiūrį.Jei planuojate kurti savo karjerą kurdami internetą, ankstyvas startas jums atvers daugybę galimybių.

Dabar supraskime, kokie yra šie komponentai.

Reakcijos komponentai laikomi vartotojo sąsajos statybiniais elementais. Kiekvienas iš šių komponentų egzistuoja toje pačioje erdvėje, tačiau vykdo nepriklausomai vienas nuo kito. Reakcijos komponentai turi savo struktūrą, metodus ir API. Jie yra daugkartinio naudojimo ir gali būti įleidžiami į sąsajas pagal poreikį. Norėdami geriau suprasti, laikykite visą vartotojo sąsają medžiu.Čia pradinis komponentas tampa šaknimi, o kiekvienas nepriklausomas gabalas tampa šakomis, kurios dar padalijamos į poskyrius.

Tai palaiko mūsų vartotojo sąsają sutvarkytą ir leidžia duomenims ir būsenos pokyčiams logiškai tekėti iš šaknies į šakas, o po to į pošakas. Komponentai skambina į serverį tiesiai iš kliento pusės, o tai leidžia DOM dinamiškai atnaujinti neatnaujinant puslapio. Taip yra todėl, kad reagavimo komponentai yra sukurti remiantis AJAX užklausų koncepcija. Kiekvienas komponentas turi savo sąsają, kuri gali skambinti į serverį ir juos atnaujinti. Kadangi šie komponentai yra vienas nuo kito nepriklausomi, kiekvienas gali atsinaujinti nepaveikdamas kitų ar visos vartotojo sąsajos.

Mes naudojame React.createClass () metodas sukurti komponentą. Šis metodas turi būti perduotas objekto argumentas, apibrėžiantis komponentą React. Kiekviename komponente turi būti tiksliai vienas pateikti () metodas. Tai yra svarbiausia komponento, atsakingo už HTML analizavimą „JavaScript“, JSX, ypatybė. Tai pateikti () grąžins komponento HTML vaizdą kaip DOM mazgą. Todėl visos HTML žymos turi būti įterptos į vidinę žymę pateikti () .

Toliau pateikiamas komponento kūrimo kodo pavyzdys.

ką reiškia vardų sritis c ++

importuoti „React“ iš „reaguoti“ importuoti „ReactDOM“ iš „react-dom“ klasės „MyComponent“ pratęsia „React.Component“ {render () {return (
Jūsų ID yra {this.state.id}
)}} ReactDOM.render (, document.getElementById ('content'))

Valstijos prieš rekvizitus

Reaguokite komponento gyvavimo ciklą

„React“ pateikia įvairius metodus, kurie praneša, kada įvyksta tam tikras komponento gyvavimo ciklo etapas. Šie metodai vadinami gyvavimo ciklo metodais. Šie gyvavimo ciklo metodai nėra labai sudėtingi. Galite galvoti apie šiuos metodus kaip apie specializuotus įvykių tvarkytojus, kurie yra iškviečiami įvairiais komponentų naudojimo momentais. Jūs netgi galite pridėti savo kodą prie šių metodų, kad atliktumėte įvairias užduotis. Kalbant apie komponento gyvavimo ciklą, gyvavimo ciklas yra padalintas į 4 fazes. Jie yra:

1. Pradinis etapas
2. Atnaujinamas etapas
3. Rekvizitai keičia fazę
4. Atjungimo fazė

Kiekviename iš šių etapų yra keli tik jiems būdingi gyvavimo ciklo metodai. Taigi dabar sužinokime, kas vyksta kiekviename iš šių etapų.

a. Pradinis etapas - Pirmasis „React“ komponento gyvavimo ciklo etapas yra pradinė fazė arba pradinė atvaizdavimo fazė. Šiame etapekomponentas ruošiasi pradėti savo kelią ir patekti į DOM. Ši fazė susideda iš šių metodų, kurie naudojami iš anksto nustatyta tvarka.

1. „getDefaultProps“ (): Šis metodas naudojamas nurodant numatytąją reikšmę tai.palaiko . Jis iškviečiamas dar prieš jūsų komponento sukūrimą ar į jį perduodant tėvų rekvizitus.
2. „getInitialState“ (): Šis metodas yra naudojamasnurodyti numatytoji vertė tai.valstybė prieš sukuriant komponentą.
3. componentWillMount (): Tai yra paskutinis metodas, kurį galite iškviesti prieš komponentui pateikiant DOM. Bet jei paskambinsite „setState“ () šiame metode jūsų komponentas nebus pateiktas iš naujo.
4. pateikti (): Th is metodas yra atsakingas už vieno šakninio HTML mazgo grąžinimą ir turi būti apibrėžtas kiekviename komponente. Galite grįžti niekinis arba melagingas jei nenorite nieko perteikti.
5. componentDidMount (): Kai komponentas bus pateiktas ir įdėtas į DOM, tai metodas vadinamas. Čia galite atlikti bet kokias DOM užklausų operacijas.

b. Atnaujinamas etapas - Pridėjus komponentą prie DOM, jie gali atnaujinti ir perteikti tik tada, kai pasikeičia būsena. Kiekvieną kartą, kai keičiasi būsena, komponentas iškviečia ją pateikti () vėl. Bet kuris komponentas, kuris remiasi šio komponento išvestimi, taip pat jį vadins pateikti () vėl. Tai daroma siekiant užtikrinti, kad mūsų komponentas rodytų naujausią savo versiją. Taigi norint sėkmingai atnaujinti komponentų būseną, nurodytoje eilės tvarka naudojami šie metodai:

1. shouldComponentUpdate (): Naudodami šį metodą galite kontroliuoti komponento elgseną, kaip pats atnaujinti. Jei naudosite šį metodą teisinga,komponentas bus atnaujintas. Kitu atveju, jei šis metodas pateikia amelagingas, komponentas praleis atnaujinimą.
2. componentWillUpdate (): Tvadinamas jo metodas jprieš jūsų komponentą netrukus atnaujinsite. Taikant šį metodą, negalite pakeisti komponento būsenos skambindami tai.setState .
3. pateikti (): Jei grąžinate klaidingą per shouldComponentUpdate () , kodas viduje pateikti () bus dar kartą iškviestas, kad jūsų komponentas būtų tinkamai rodomas.
4. componentDidUpdate (): Kai komponentas bus atnaujintas ir pateiktas, bus naudojamas šis metodas. Į šį metodą galite įdėti bet kurį kodą, kurį norite vykdyti atnaujinę komponentą.

c. Rekvizitų keitimo etapas - Po komponentas buvo pateiktas DOM, vienintelis kitas komponento atnaujinimo laikas, išskyrus būsenos pasikeitimą, yra tada, kai pasikeičia jo prop vertė. Praktiškai šis etapas veikia panašiai kaip ir ankstesniame etape, tačiau vietoj valstybės jis užsiima butaforija. Taigi šis etapas turi tik vieną papildomą metodą iš „Atnaujinimo etapo“.

1. componentWillReceiveProps (): Šis metodas pateikia vieną argumentą, kuriame yra nauja rekvizito vertė, kuri netrukus bus priskirta komponentui.
   Likę gyvenimo ciklo metodai elgiasi identiškai su metodais, kuriuos matėme ankstesniame etape.
   
2. shouldComponentUpdate ()
3. componentWillUpdate ()
4. pateikti ()
5. componentDidUpdate ()

d.Atjungimo etapas -Tai paskutinis komponentų gyvavimo ciklo etapas, kai komponentas sunaikinamas ir visiškai pašalinamas iš DOM. Jame yra tik vienas metodas:

1. componentWillUnmount (): Kai bus naudojamas šis metodas, jūsų komponentas bus visam laikui pašalintas iš DOM.Taikant šį metodą, YGalite atlikti bet kokias su valymu susijusias užduotis, pavyzdžiui, pašalinti įvykių klausytojus, sustabdyti laikmačius ir kt.

Toliau pateikiama visa gyvenimo ciklo diagrama:

Taip pateksime į „React Components“ tinklaraščio pabaigą. Tikiuosi, kad šiame tinklaraštyje galėjau aiškiai paaiškinti, kas yra „React Components“, kaip jie naudojami. Galite kreiptis į mano tinklaraštį , jei norite sužinoti daugiau apie ReactJS.

Jei norite mokytis „React“ ir norite patys kurti įdomias vartotojo sąsajas, patikrinkite sukūrė „Edureka“ - patikima internetinė mokymosi įmonė, turinti daugiau nei 250 000 patenkintų besimokančiųjų tinklą.

Turite mums klausimą? Prašau paminėti tai komentarų skiltyje ir mes su jumis susisieksime.