Një hyrje për React: Diferenca midis përbërësit të klasës dhe komponenti funksional

A jeni i ri në reagim? A doni të mësoni diçka të re në 5 minuta ose më pak ?. Le të mësojmë rreth përbërësit të reagojë.

Farë është një përbërës?

Fist të gjithëve, para se të futemi thellë në këtë temë, duhet të dimë në mënyrë perfekte se çfarë është në të vërtetë një përbërës.

Një Komponent (në React) do të përshkruhet si një bllok ose pjesë e aplikacionit tonë që mund të ripërdoret në të gjithë projektin (dhe të tjerët, mbase), zakonisht është i lidhur me një element UI dhe sjelljen e tij.

Tani, duke supozuar se ju e dini themelore, le të kontrollojmë në lidhje me dy llojet e komponentit që mund të krijojmë në një projekt React, Komponentët e Klasë dhe Komponentët Funksionalë.

Komponenti i klasës

Ky quhet edhe Komponenti Themelor. Që nga ECMAScript 2015, Ne kemi "klasë" në JavaScript. React e përdor këtë sintaksë për të krijuar një përbërës shtetëror me ciklin jetësor. Shteti zakonisht përdoret për të ndryshuar sjelljen e komponentit tonë ose fëmijëve të tij.

Le ta shtypim këtë kod. Këtu kemi një "klasë JS" e cila trashëgon funksionalitetin nga React.Component, më pas ne shpallim konstruktorin e tij i cili mori props si argument. Tjetra, ne e quajmë super, për të kaluar të dhënat në përbërësin e klasës mëmë, kjo kërkohet kur krijojmë këtë lloj komponenti.

"Propozimet" janë një objekt që mori të gjitha atributet që ne përdorim përbërësin si një etiketë.

Komponenti Lamp ka propozimin bazë, ai jep një bllok HTML me një tekst dhe një buton.

Duke klikuar në butonin ndërprerësin e butonit aktivizoni ose fikni llambën, këtu është gjendja jonë kur futemi në lojë, në rreshtin 4, inicializojmë gjendjen e Llambës, dhe pas kësaj, ne shpallim metodën kaloni, Drita, ajo do të kthejë gjendjen e llambës sonë.

kjo "gjendje" është një objekt me disa prona që do të ndryshojnë në kohën e ekzekutimit të klasës. Nuk duhet të ndryshohet drejtpërdrejt por metoda setState.

Ju mund ta ndryshoni shtetin në këtë mënyrë në:

Komponenti funksional

Tani, nëse duam të ndërtojmë një komponent minimal, të thjeshtë dhe pa shtet, kjo do t'ju ndihmojë të zvogëloni sasinë e kodit të përdorur dhe të zbatoni më lehtë parimin DRY. Komponenti funksional është një funksion javascript që kthen disa elemente Jxs.

Le ta kontrollojmë këtë shembull të një Komponenti llambë.

Pikërisht këtu, ne kemi një funksion të rregullt, ai merr një objekt të shkatërruar me një pronë të quajtur lampState, është kthyer në një ndryshore lokale, dhe ne vlerësojmë nëse është e vërtetë apo e rremë për të kthyer një etiketë të ndryshme img.

Tani, ne mund ta përdorim atë në përbërësin Llambë për të treguar sesi mund të funksionojnë mirë së bashku.

Kjo është ajo, kur të klikoni butonin e kaloni, imazhi i llambës së ndezur do të ndryshojë.

Po në lidhje me Hooks?

Grilat janë një tipar i ardhshëm që ju lejon të përdorni gjendjen në përbërës funksional. Kjo duhet të shpjegohet me më shumë detaje, sepse ne duhet të gërmojmë më thellë në reagime, dhe gjithashtu mendoj se meriton artikullin e vet.

Faleminderit që lexuat, nëse ju pëlqeu apo jo, më jepni reagime .-