Reagiranje komponenata - rekviziti i stanja u ReactJS-u s primjerima

'U Reactu je sve komponenta'

Ako ste upoznati s Reactom, onda ste sigurno puno puta čuli ili pročitali ovu frazu. No, znate li što točno znači i kako se koristi? Ako ne, pročitajte ovaj blog da biste saznali sve o React komponentama i različitim fazama u životnom ciklusu. Siguran sam da dok završiš čitajući ovaj blog imat ćete potpuno razumijevanje o komponentama React i konceptima koji ga okružuju. Ali prije nego što nastavite, na brzinu pogledajte teme o kojima ću raspravljati:

• Što su React komponente?
• Prednosti reakcijskih komponenata
• Rekviziti
• Države
• Države protiv rekvizita
• Životni ciklus komponente React

Što su React komponente?

Ranije su programeri morali napisati 1000 redaka koda za razvoj jednostavne aplikacije na jednoj stranici. Većina tih aplikacija slijedila je tradicionalnu DOM strukturu i unošenje promjena u njih bio je vrlo zahtjevan i naporan zadatak za programere.Ručno su morali potražiti element koji je trebao promjenu i ažurirati ga u skladu s tim. Čak i mala pogreška dovela bi do neuspjeha aplikacije. Štoviše, ažuriranje DOM-a bilo je vrlo skupo. Tako je uveden pristup zasnovan na komponentama. U ovom je pristupu cijela aplikacija podijeljena na logičke dijelove koji se nazivaju komponentama. React je bio jedan od okvira koji se odlučio za ovaj pristup.Ako planirate svoju karijeru graditi u web razvoju, rani početak otvorit će vam puno prilika.

Ajmo sada razumjeti koje su to komponente.

Komponente React smatraju se gradivnim elementima korisničkog sučelja. Svaka od ovih komponenti postoji u istom prostoru, ali se izvršava neovisno jedna od druge. React komponente imaju vlastitu strukturu, metode kao i API-je. Mogu se ponovno koristiti i mogu se ubrizgati u sučelja prema potrebi. Da biste imali bolje razumijevanje, smatrajte cijelo korisničko sučelje stablom.Ovdje početna komponenta postaje korijen, a svaki od neovisnih dijelova postaje grane, koje se dalje dijele na podgrane.

Ovo održava naše korisničko sučelje organiziranim i omogućuje promjenu podataka i stanja iz korijena u grane, a zatim u podgrane. Komponente upućuju pozive poslužitelju izravno s klijentske strane što omogućuje DOM-u da se dinamički ažurira bez osvježavanja stranice. To je zato što su komponente reakcije izgrađene na konceptu AJAX zahtjeva. Svaka komponenta ima svoje sučelje koje može upućivati ​​pozive poslužitelju i ažurirati ih. Kako su ove komponente neovisne jedna o drugoj, svaka se može osvježiti bez utjecaja na druge ili na korisničko sučelje u cjelini.

Koristimo React.createClass () metoda za stvaranje komponente. Ovoj metodi mora se proslijediti objektni argument koji će definirati komponentu React. Svaka komponenta mora sadržavati točno jednu prikazati () metoda. To je najvažnije svojstvo komponente koja je odgovorna za raščlanjivanje HTML-a u JavaScript-u, JSX. Ovaj prikazati () vratit će HTML prikaz komponente kao DOM čvor. Stoga sve HTML oznake moraju biti zatvorene u zatvorenu oznaku unutar prikazati () .

Slijedi uzorak koda za stvaranje komponente.

import React iz 'Reagiraj' import ReactDOM iz klase 'React-dom' MyComponent produžuje React.Component {render () {return (
Vaš je ID {this.state.id}
)}} ReactDOM.render (, document.getElementById ('sadržaj'))

Države protiv rekvizita

Životni ciklus komponente React

React pruža razne metode koje obavještavaju kada se dogodi određena faza u životnom ciklusu komponente. Te se metode nazivaju metodama životnog ciklusa. Ove metode životnog ciklusa nisu jako složene. O ovim metodama možete razmišljati kao o specijaliziranim voditeljima događaja koji se pozivaju u raznim točkama tijekom životnog vijeka komponenata. Možete čak dodati vlastiti kôd tim metodama za obavljanje različitih zadataka. Govoreći o životnom ciklusu komponente, životni ciklus podijeljen je u 4 faze. Oni su:

1. Početna faza
2. Faza ažuriranja
3. Rekviziti mijenjaju fazu
4. Faza demontaže

Svaka od ovih faza sadrži neke metode životnog ciklusa koje su specifične samo za njih. Pa hajde da sada saznamo što se događa tijekom svake od ovih faza.

a. Početna faza - Prva faza životnog ciklusa komponente React je početna faza ili početna faza prikazivanja. U ovoj fazi,komponenta će uskoro započeti svoje putovanje i krenuti do DOM-a. Ova se faza sastoji od sljedećih metoda koje se pozivaju unaprijed definiranim redoslijedom.

1. getDefaultProps (): Ovom se metodom određuje zadana vrijednost ovo.rekviziti . Pozva se prije nego što se komponenta uopće stvori ili se u nju proslijedi bilo koji rekvizit roditelja.
2. getInitialState (): Ova metoda se koristi zanavesti zadana vrijednost ovo.država prije nego što se stvori vaša komponenta.
3. componentWillMount (): Ovo je zadnja metoda koju možete nazvati prije nego što se komponenta generira u DOM. Ali ako nazovete setState () unutar ove metode vaša se komponenta neće ponovno prikazati.
4. render (): Th metoda je odgovorna za vraćanje jednog korijenskog HTML čvora i mora biti definirana u svakoj komponenti. Možete se vratiti null ili lažno u slučaju da ne želite ništa prikazati.
5. componentDidMount (): Jednom kada se komponenta generira i postavi na DOM, ovo metoda se naziva. Ovdje možete izvoditi bilo koje operacije DOM upita.

b. Faza ažuriranja - Jednom kad je komponenta dodana u DOM, mogu se ažurirati i ponovno prikazati samo kada dođe do promjene stanja. Svaki put kad se stanje promijeni, komponenta ga pozove prikazati () opet. Svaka komponenta koja se oslanja na izlaz ove komponente također će pozvati svoju prikazati () opet. To je učinjeno kako bi se osiguralo da naša komponenta prikazuje najnoviju verziju same sebe. Stoga se za uspješno ažuriranje stanja komponenti pozivaju sljedeće metode u danom redoslijedu:

1. shouldComponentUpdate (): Pomoću ove metode možete kontrolirati ponašanje svoje komponente prilikom ažuriranja. Ako vratite true iz ove metode,komponenta će se ažurirati. Inače ako ova metoda vrati alažno, komponenta će preskočiti ažuriranje.
2. componentWillUpdate (): Tzove se njegova metoda jprije nego što se vaša komponenta sprema ažurirati. U ovoj metodi pozivom ne možete promijeniti stanje komponente this.setState .
3. render (): Ako vraćate false putem shouldComponentUpdate () , kod iznutra prikazati () bit će ponovno pozvani kako bi se osiguralo da se vaša komponenta pravilno prikazuje.
4. componentDidUpdate (): Jednom kada se komponenta ažurira i generira, tada se poziva ova metoda. U ovu metodu možete staviti bilo koji kod koji želite izvršiti nakon što se komponenta ažurira.

c. Faza promjene rekvizita - Nakon komponenta je prikazana u DOM-u, jedino će se drugo vrijeme komponenta ažurirati, osim promjene stanja kada se promijeni njena vrijednost oslonca. Praktično ova faza djeluje slično kao u prethodnoj fazi, ali umjesto države bavi se rekvizitima. Dakle, ova faza ima samo jednu dodatnu metodu iz faze ažuriranja.

kako izbjeći mrtve točke u javi -

1. componentWillReceiveProps (): Ova metoda vraća jedan argument koji sadrži novu prop vrijednost koja će se dodijeliti komponenti.
   Preostale metode životnog ciklusa ponašaju se identično metodama koje smo vidjeli u prethodnoj fazi.
   
2. shouldComponentUpdate ()
3. componentWillUpdate ()
4. prikazati ()
5. componentDidUpdate ()

d.Faza demontaže -Ovo je zadnja faza životnog ciklusa komponenata u kojoj se komponenta uništava i potpuno uklanja iz DOM-a. Sadrži samo jednu metodu:

1. componentWillUnmount (): Jednom kada se ova metoda pozove, vaša se komponenta trajno uklanja iz DOM-a.U ovoj metodi, Ymožete izvoditi bilo kakve zadatke čišćenja, poput uklanjanja slušatelja događaja, zaustavljanja odbrojavanja itd.

Slijedi cjelokupni dijagram životnog ciklusa:

To nas dovodi do kraja bloga o React Components. Nadam se da sam na ovom blogu uspio jasno objasniti što su React komponente, kako se koriste. Možete se pozvati na moj blog na , u slučaju da želite saznati više o ReactJS-u.

Ako se želite osposobiti za React i želite sami razviti zanimljivo korisničko sučelje, pogledajte Edureka, pouzdane tvrtke za internetsko učenje s mrežom od više od 250 000 zadovoljnih učenika raširenih širom svijeta.

Imate pitanje za nas? Molimo spomenite to u odjeljku za komentare i javit ćemo vam se.