Uvod v React: Razlika med komponento razreda in funkcionalno komponento

Ste novi v odzivu? Se želite naučiti nekaj novega v 5 minutah ali manj ?. Naučimo se o komponenti reakcije.

Kaj je komponenta?

Preden se poglobimo v to temo, bi morali dobro vedeti, kaj komponenta v resnici je.

Komponenta (v Reactu) bi bila opisana kot blok ali del naše aplikacije, ki bi ga lahko ponovno uporabili v celotnem projektu (in drugi morda), običajno je povezan z elementom uporabniškega vmesnika in njegovim obnašanjem.

Zdaj, če poznamo osnovno, preverimo dve vrsti komponent, ki jih lahko ustvarimo v projektu React, Class Class in Functional Components.

Sestavni del razreda

Temu se reče tudi Osnovna komponenta. Od ECMAScript 2015 imamo v razredu JavaScript "razred". React uporablja to skladnjo za ustvarjanje zmogljive komponente z življenjskim ciklom. Država se običajno uporablja za spreminjanje vedenja naše komponente ali njenih otrok.

Pokličimo to kodo. Tu imamo "JS razred", ki podeduje funkcionalnost od React.Component, nato pa razglasimo njegovega konstruktorja, ki je kot argument prejel rekvizite. Nato pokličemo super, da podatke pošljemo v nadrejeni razred Component, kar je potrebno pri ustvarjanju te vrste komponente.

"Rekvizit" je predmet, ki ima vse atribute, ki jih komponenta uporablja kot oznako.

Sestavni del svetilke ima osnovni predlog, ustvari blok HTML z besedilom in gumbom.

S klikom gumba vklopite ali izklopite svetilko, tu je naša država, ki vstopi v igro, v vrstici 4 inicializiramo stanje svetilke in po tem razglasimo metodo stikalaLight, bo spremenila stanje naše svetilke.

to stanje je objekt z nekaterimi lastnostmi, ki se bodo spremenile v času izvedbe razreda. Ne bi smeli spremeniti neposredno, ampak metodo setState.

Na ta način lahko spremenite stanje:

Funkcionalna komponenta

Zdaj, če želimo sestaviti nekaj minimalnih, preprostih in brezskrbnih komponent, vam bo to pomagalo zmanjšati količino uporabljene kode in lažje uporabiti načelo DRY. Funcionalna komponenta je funkcija javascripta, ki vrne nekatere elemente Jxs.

Oglejmo si ta primer komponente žarnice.

Tu imamo redno funkcijo, prejme uničen predmet s lastnostjo, imenovano lampState, obrne se na lokalno spremenljivko in ocenimo, ali je res ali ne, da vrnemo drugo oznako img.

Zdaj ga lahko uporabimo v komponenti svetilke, da pokažemo, kako lahko skupaj delujejo.

To je to, ko kliknete stikalo, se bo slika vklopljene žarnice spremenila.

Kaj pa kljuke?

Kljuke so prihajajoča funkcija, ki omogoča uporabo stanja v funkcionalni komponenti. To je treba razložiti z več podrobnostmi, saj moramo kopati globlje v odzivu in tudi mislim, da si zasluži svoj članek.

Hvala za branje, če vam je všeč ali ne, mi pošljite povratne informacije.-