React Components - rekvizīti un stāvokļi ReactJS ar piemēriem

“Reactā viss ir sastāvdaļa”

Ja jūs esat pazīstams ar React, jums ir jādzird vai jāizlasa šī frāze daudzas reizes. Bet vai jūs zināt, ko tas precīzi nozīmē un kā tas tiek izmantots? Ja jums nav, tad izlasiet šo emuāru, lai uzzinātu visu par React komponentiem un dažādiem dzīves cikla posmiem. Esmu pārliecināts, ka līdz brīdim, kad pabeigsi lasot šo emuāru, jums būs pilnīga izpratne par React komponentiem un apkārt esošajiem jēdzieniem. Bet pirms turpināt, ātri apskatiet tēmas, kuras es apspriedīšu:

kā instalēt php uz Windows 7

• Kas ir React komponenti?
• Reaktīvo komponentu priekšrocības
• Rekvizīti
• Štatos
• Valstis pret rekvizītiem
• Reaģējiet komponenta dzīves ciklu

Kas ir React komponenti?

Iepriekš izstrādātājiem bija jāraksta 1000 koda rindas, lai izstrādātu vienkāršu vienas lapas lietojumprogrammu. Lielākā daļa no šīm lietojumprogrammām sekoja tradicionālajai DOM struktūrai, un to izmaiņas bija ļoti sarežģītas un izstrādātājiem garlaicīgs uzdevums.Viņiem manuāli bija jāmeklē elements, kuram vajadzīgas izmaiņas, un tas attiecīgi jāatjaunina. Pat neliela kļūda novestu pie pieteikuma kļūmes. Turklāt DOM atjaunināšana bija ļoti dārga. Tādējādi tika ieviesta uz komponentiem balstīta pieeja. Šajā pieejā visa lietojumprogramma ir sadalīta loģiskos gabalos, kurus sauc par komponentiem. React bija viens no ietvariem, kas izvēlējās šo pieeju.Ja plānojat veidot savu karjeru tīmekļa izstrādē, savlaicīgs sākums jums pavērtu daudz iespēju.

Tagad sapratīsim, kas ir šie komponenti.

Reakcijas komponenti tiek uzskatīti par lietotāja saskarnes pamatelementiem. Katra no šīm sastāvdaļām pastāv vienā telpā, taču tās darbojas neatkarīgi viena no otras. React komponentiem ir sava struktūra, metodes, kā arī API. Tie ir atkārtoti lietojami un pēc vajadzības var tikt ievadīti saskarnēs. Lai labāk izprastu, uzskatiet visu lietotāja interfeisu par koku.Šeit sākumkomponents kļūst par sakni, un katrs neatkarīgais gabals kļūst par zariem, kurus tālāk sadala apakšnozarēs.

Tas uztur mūsu lietotāja saskarni sakārtotu un ļauj datiem un stāvokļa izmaiņām loģiski plūst no saknes uz zariem un pēc tam uz apakšnozarēm. Komponenti zvana uz serveri tieši no klienta puses, kas ļauj DOM dinamiski atjaunināties, neatsvaidzinot lapu. Tas ir tāpēc, ka reaģēšanas komponenti tiek veidoti uz AJAX pieprasījumu jēdziena. Katram komponentam ir savs interfeiss, kas var veikt zvanus uz serveri un tos atjaunināt. Tā kā šie komponenti ir neatkarīgi viens no otra, katrs no tiem var atsvaidzināties, neietekmējot citus vai lietotāja saskarni kopumā.

Mēs izmantojam React.createClass () metode komponenta izveidei. Šai metodei ir jānodod objekta arguments, kas definēs komponentu React. Katrā komponentā jābūt tieši vienam renderēt () metodi. Tas ir vissvarīgākais komponenta īpašums, kas ir atbildīgs par HTML parsēšanu JavaScript, JSX. Šis renderēt () atgriezīs komponenta HTML attēlojumu kā DOM mezglu. Tāpēc visiem HTML tagiem jābūt ievietotiem norobežojošā tagā renderēt () .

Šis ir koda paraugs komponenta izveidei.

importēt React no 'reaģēt' importēt ReactDOM no 'reaģēt-dom' klases MyComponent paplašina React.Component {render () {return (
Jūsu ID ir {this.state.id}
)}} ReactDOM.render (, document.getElementById ('content'))

Valstis pret rekvizītiem

Reaģējiet komponenta dzīves ciklu

React nodrošina dažādas metodes, kas paziņo, kad notiek noteikts posms komponenta dzīves ciklā. Šīs metodes sauc par dzīves cikla metodēm. Šīs dzīves cikla metodes nav ļoti sarežģītas. Jūs varat domāt par šīm metodēm kā par specializētiem notikumu apstrādātājiem, kuri tiek izsaukti dažādos komponentu darbības laikā. Lai veiktu dažādus uzdevumus, šīm metodēm varat pievienot pat savu kodu. Runājot par komponenta dzīves ciklu, dzīves cikls ir sadalīts 4 fāzēs. Viņi ir:

1. Sākotnējā fāze
2. Atjaunina fāzi
3. Atbalsti maina fāzi
4. Atvienošanas fāze

Katrā no šīm fāzēm ir dažas dzīves cikla metodes, kas raksturīgas tikai tām. Tāpēc tagad noskaidrosim, kas notiek katrā no šīm fāzēm.

a. Sākotnējā fāze - React komponenta dzīves cikla pirmā fāze ir sākotnējā fāze vai sākotnējā renderēšanas fāze. Šajā posmākomponents gatavojas sākt savu ceļu un doties uz DOM. Šis posms sastāv no šādām metodēm, kas tiek izmantotas iepriekš noteiktā secībā.

1. getDefaultProps (): Šo metodi izmanto, lai norādītu noklusējuma vērtību tas.premzes . Tas tiek izsaukts, pirms jūsu komponents pat ir izveidots vai tajā tiek nodoti kādi vecāku rekvizīti.
2. getInitialState (): Šī metode ir izmantotaprecizēt noklusējuma vērtība tas.valsts pirms komponenta izveides.
3. componentWillMount (): Šī ir pēdējā metode, kuru varat izsaukt, pirms komponents tiek renderēts DOM. Bet, ja jūs piezvanāt setState () šīs metodes ietvaros jūsu komponents netiks atkārtoti renderēts.
4. renderēt (): Th is metode ir atbildīga par viena saknes HTML mezgla atdošanu, un tā ir jādefinē katrā komponentā. Jūs varat atgriezties nulle vai nepatiesa ja nevēlaties kaut ko renderēt.
5. componentDidMount (): Kad komponents ir atveidots un ievietots DOM, tas metodi sauc. Šeit jūs varat veikt jebkuras DOM vaicājuma darbības.

b. Atjaunina fāzi - Kad komponents ir pievienots DOM, tos var atjaunināt un atkārtoti renderēt tikai tad, kad notiek stāvokļa maiņa. Katru reizi, kad mainās stāvoklis, komponents izsauc to renderēt () atkal. Jebkurš komponents, kas paļaujas uz šī komponenta izvadi, to arī izsauks renderēt () atkal. Tas tiek darīts, lai nodrošinātu, ka mūsu komponents parāda pašas jaunākās versijas. Tādējādi, lai veiksmīgi atjauninātu komponentu stāvokli, dotajā secībā tiek izmantotas šādas metodes:

1. shouldComponentUpdate (): Izmantojot šo metodi, jūs varat kontrolēt sava komponenta uzvedību, atjauninot sevi. Ja no šīs metodes atgriežat patiesu vērtību,komponents tiks atjaunināts. Citādi, ja šī metode atgriež anepatiesa, komponents izlaidīs atjaunināšanu.
2. componentWillUpdate (): Ttiek saukta viņa metode jpirms jūsu komponents gatavojas atjaunināt. Izmantojot šo metodi, jūs nevarat mainīt komponenta stāvokli, zvanot this.setState .
3. renderēt (): Ja jūs atgriežaties nepatiesu, izmantojot vajadzētuComponentUpdate () , kods iekšpusē renderēt () tiks atkārtoti izsaukta, lai pārliecinātos, ka jūsu komponents tiek pareizi parādīts.
4. componentDidUpdate (): Kad komponents ir atjaunināts un renderēts, tiek izmantota šī metode. Šajā metodē varat ievietot jebkuru kodu, kuru vēlaties izpildīt, tiklīdz komponents ir atjaunināts.

c. Atbalsta maiņas fāze - Pēc Komponents ir atveidots DOM, vienīgais cits laiks, kad komponents tiks atjaunināts, izņemot stāvokļa maiņu, kad mainās tā prop vērtība. Praktiski šī fāze darbojas līdzīgi kā iepriekšējā fāzē, bet valsts vietā tā nodarbojas ar rekvizītiem. Tādējādi šai fāzei ir tikai viena papildu metode no atjaunināšanas fāzes.

1. componentWillReceiveProps (): Šī metode atgriež vienu argumentu, kas satur jauno prop vērtību, kas drīz tiks piešķirta komponentam.
   Pārējās dzīves cikla metodes uzvedas identiski metodēm, kuras mēs redzējām iepriekšējā fāzē.
   
2. vajadzētuComponentUpdate ()
3. componentWillUpdate ()
4. renderēt ()
5. componentDidUpdate ()

d.Atvienošanas fāze -Šis ir komponentu dzīves cikla pēdējais posms, kurā komponents tiek iznīcināts un pilnībā izņemts no DOM. Tas satur tikai vienu metodi:

1. componentWillUnmount (): Kad šī metode ir izsaukta, jūsu komponents tiek neatgriezeniski noņemts no DOM.Šajā metodē JāJūs varat veikt jebkādus ar tīrīšanu saistītus uzdevumus, piemēram, noņemt notikumu klausītājus, apturēt taimerus utt.

Tālāk ir parādīta visa dzīves cikla diagramma:

Tas mūs noved pie React Components emuāra beigām. Es ceru, ka šajā emuārā es varēju skaidri izskaidrot, kas ir React Components, kā tie tiek izmantoti. Jūs varat atsaukties uz manu emuāru vietnē , ja vēlaties uzzināt vairāk par ReactJS.

Ja vēlaties apmācīt React un vēlaties patstāvīgi izstrādāt interesantas lietotāja saskarnes, pārbaudiet Autors: Edureka, uzticams tiešsaistes mācību uzņēmums ar vairāk nekā 250 000 apmierinātu izglītojamo tīklu visā pasaulē.

Vai mums ir jautājums? Lūdzu, pieminējiet to komentāru sadaļā, un mēs ar jums sazināsimies.