React Components - Props in stanja v ReactJS s primeri

'V Reactu je vse sestavni del'

Če React poznate, ste to besedno zvezo zagotovo že velikokrat slišali ali prebrali. Toda ali veste, kaj natančno pomeni in kako se uporablja? Če tega ne storite, preberite ta spletni dnevnik, če želite izvedeti vse o komponentah React in različnih fazah v življenjskem ciklu. Prepričan sem, da ko končaš ob branju tega spletnega dnevnika boste popolnoma razumeli komponente React in koncepte, ki ga obkrožajo. Toda preden nadaljujete, na hitro preglejte teme, o katerih bom razpravljal:

kaj je najboljši ide za javo

• Kaj so komponente React?
• Prednosti reaktorskih komponent
• Rekviziti
• Državah
• Države vs rekviziti
• Življenjski cikel komponente React

Kaj so komponente React?

Prej so morali razvijalci napisati 1000 vrstic kode za razvoj enostavne enostranske aplikacije. Večina teh aplikacij je sledila tradicionalni strukturi DOM in njihovo spreminjanje je bilo zelo zahtevno in dolgočasno opravilo za razvijalce.Ročno so morali poiskati element, ki je potreboval spremembo, in ga ustrezno posodobiti. Že majhna napaka bi privedla do okvare aplikacije. Poleg tega je bilo posodabljanje DOM zelo drago. Tako je bil uveden pristop, ki temelji na komponentah. Pri tem pristopu je celotna aplikacija razdeljena na logične koščke, ki se imenujejo komponente. React je bil eden od okvirov, ki se je odločil za ta pristop.Če načrtujete svojo kariero pri spletnem razvoju, vam bo zgodnji začetek odprl veliko priložnosti.

Zdaj pa razumimo, katere so te komponente.

Komponente React se štejejo za gradnike uporabniškega vmesnika. Vsaka od teh komponent obstaja znotraj istega prostora, vendar se izvaja neodvisno druga od druge. Komponente React imajo svojo strukturo, metode in API-je. Ponovno jih je mogoče uporabiti in jih je mogoče vbrizgati v vmesnike po potrebi. Za boljše razumevanje upoštevajte celoten uporabniški vmesnik kot drevo.Tu začetna komponenta postane koren in vsak neodvisen del postane veje, ki so nadalje razdeljene na podveje.

Tako je naš uporabniški vmesnik organiziran in omogoča, da se podatki in spremembe stanja logično pretakajo iz korena v veje in nato v podveje. Komponente kličejo strežnik neposredno s strani odjemalca, kar omogoča, da se DOM dinamično posodablja, ne da bi osvežili stran. To je zato, ker so reakcijske komponente zgrajene na konceptu zahtev AJAX. Vsaka komponenta ima svoj vmesnik, ki lahko kliče strežnik in jih posodablja. Ker so te komponente medsebojno neodvisne, se lahko vsaka osveži, ne da bi vplivala na druge ali uporabniški vmesnik kot celoto.

Uporabljamo React.createClass () metoda za ustvarjanje komponente. Tej metodi je treba predati objektni argument, ki bo določil komponento React. Vsaka komponenta mora vsebovati natančno eno upodobi () metoda. To je najpomembnejša lastnost komponente, ki je odgovorna za razčlenjevanje HTML-ja v JavaScript, JSX. To upodobi () bo vrnil predstavitev HTML komponente kot vozlišče DOM. Zato morajo biti vse oznake HTML zaprte v zaprto oznako znotraj upodobi () .

Sledi vzorčna koda za ustvarjanje komponente.

uvoz React iz 'odziv' uvoz ReactDOM iz razreda 'odziv-dom' MyComponent razširja React.Component {render () {return (
Vaš ID je {this.state.id}
)}} ReactDOM.render (, document.getElementById ('vsebina'))

Države vs rekviziti

Življenjski cikel komponente React

React ponuja različne metode, ki obvestijo, kdaj pride do določene faze v življenjskem ciklu komponente. Te metode se imenujejo metode življenjskega cikla. Te metode življenjskega cikla niso zelo zapletene. Te metode si lahko predstavljate kot specializirane vodnike dogodkov, ki se prikličejo na različnih točkah v življenjski dobi komponent. Tem metodam lahko celo dodate lastno kodo za izvajanje različnih nalog. Ko govorimo o življenjskem ciklu komponente, je življenjski cikel razdeljen na 4 faze. To so:

1. Začetna faza
2. Faza posodabljanja
3. Rekviziti spremenijo fazo
4. Faza demontaže

Vsaka od teh faz vsebuje nekaj metod življenjskega cikla, ki so značilne samo zanje. Torej, zdaj ugotovimo, kaj se zgodi v vsaki od teh faz.

a. Začetna faza - Prva faza življenjskega cikla komponente React je začetna faza ali začetna faza upodabljanja. V tej fazikomponenta bo kmalu začela svojo pot in se odpravila do DOM-a. Ta faza je sestavljena iz naslednjih metod, ki se prikličejo v vnaprej določenem vrstnem redu.

1. getDefaultProps (): Ta metoda se uporablja za določanje privzete vrednosti this.props . Pokliče se, še preden je komponenta sploh ustvarjena ali pa so vanjo preneseni kakršni koli rekviziti nadrejenega.
2. getInitialState (): Ta metoda se uporablja zanavedite privzeta vrednost to.stanje preden je vaša komponenta ustvarjena.
3. componentWillMount (): To je zadnja metoda, ki jo lahko pokličete, preden se komponenta upodobi v DOM. Če pa pokličete setState () znotraj te metode se vaša komponenta ne bo znova upodobila.
4. render (): Th je metoda odgovorna za vrnitev enega koreninskega vozlišča HTML in mora biti definirana v vsaki komponenti. Lahko se vrnete nič ali napačno v primeru, da ne želite ničesar upodabljati.
5. componentDidMount (): Ko je komponenta upodobljena in postavljena v DOM, to metoda se imenuje. Tu lahko izvajate poljubne operacije poizvedb DOM.

b. Faza posodabljanja - Ko je komponenta dodana v DOM, jo lahko posodobijo in znova upodobijo šele, ko pride do spremembe stanja. Vsakokrat, ko se stanje spremeni, komponenta pokliče svoje upodobi () ponovno. Vsaka komponenta, ki se opira na izhod te komponente, jo bo tudi poklicala upodobi () ponovno. To se naredi, da se zagotovi, da naša komponenta prikazuje najnovejšo različico samega sebe. Tako se za uspešno posodobitev stanja komponent v danem vrstnem redu prikličejo naslednje metode:

1. shouldComponentUpdate (): S to metodo lahko nadzirate obnašanje komponente, ki se posodablja. Če iz te metode vrnete true,komponenta se bo posodobila. V nasprotnem primeru, če ta metoda vrne anapačno, komponenta bo preskočila posodobitev.
2. componentWillUpdate (): Tnjegova metoda se imenuje just, preden se bo vaša komponenta kmalu posodobila. Pri tej metodi ne morete spremeniti stanja komponente s klicem this.setState .
3. render (): Če vrnete false preko shouldComponentUpdate () , koda znotraj upodobi () bo ponovno poklicano, da se zagotovi, da se komponenta pravilno prikaže.
4. componentDidUpdate (): Ko je komponenta posodobljena in upodobljena, se prikliče ta metoda. V to metodo lahko vstavite katero koli kodo, ki jo želite izvesti po posodobitvi komponente.

c. Faza spremembe rekvizitov - Po komponenta je bila upodobljena v DOM, edini čas, ko se bo komponenta posodobila, razen spremembe stanja, ko se spremeni vrednost propa. Praktično ta faza deluje podobno kot prejšnja faza, vendar se namesto države ukvarja z rekviziti. Tako ima ta faza samo eno dodatno metodo iz faze posodabljanja.

1. componentWillReceiveProps (): Ta metoda vrne en argument, ki vsebuje novo vrednost propa, ki bo kmalu dodeljena komponenti.
   Preostale metode življenjskega cikla se obnašajo enako kot metode, ki smo jih videli v prejšnji fazi.
   
2. shouldComponentUpdate ()
3. componentWillUpdate ()
4. upodobi ()
5. componentDidUpdate ()

d.Faza demontaže -To je zadnja faza življenjskega cikla komponent, v kateri se komponenta uniči in popolnoma odstrani iz DOM. Vsebuje samo eno metodo:

1. componentWillUnmount (): Ko je priklicana ta metoda, se vaša komponenta trajno odstrani iz DOM-a.Pri tej metodi Y.lahko izvajate kakršna koli opravila, povezana s čiščenjem, kot so odstranjevanje poslušalcev dogodkov, zaustavitev časovnikov itd.

Sledi celoten diagram življenjskega cikla:

S tem smo prišli do konca bloga o React Components. Upam, da sem v tem blogu lahko jasno razložil, kaj so komponente React, kako se uporabljajo. Lahko se sklicujete na moj blog na , če želite izvedeti več o ReactJS.

Če se želite izučiti v Reactu in želite sami razviti zanimiv uporabniški vmesnik, si oglejte Edureka, zaupanja vredno podjetje za spletno učenje z mrežo več kot 250.000 zadovoljnih učencev, ki se širijo po vsem svetu.

Imate vprašanje za nas? Prosimo, omenite to v oddelku za komentarje in se vam bomo javili.