„React“ įvadas: klasės komponento ir funkcinio komponento skirtumas

Ar jūs naujas reaguojate? Ar norite išmokti ko nors naujo per 5 ar mažiau minučių ?. Sužinokime apie reagavimo komponentą.

Kas yra komponentas?

Visų pirma, prieš gilindamiesi į šią temą, turėtume puikiai žinoti, kas yra komponentas.

Komponentas („React“) būtų apibūdinamas kaip blokas ar mūsų programos dalis, kuri galėtų būti pakartotinai naudojama visame projekte (ir galbūt kituose), paprastai ji susijusi su UI elementu ir jo elgesiu.

Dabar, darant prielaidą, kad žinote pagrindinius, patikrinkime dviejų tipų komponentus, kuriuos galime sukurti „React“ projekte: klasės komponentus ir funkcinius komponentus.

Klasės komponentas

Tai taip pat vadinama pagrindiniu komponentu. Nuo ECMAScript 2015 m. „JavaScript“ yra „klasė“. „React“ naudoja šią sintaksę, kad sukurtų būdingą komponentą su jo gyvavimo ciklu. Valstybė dažniausiai naudojama keičiant mūsų komponento ar jo vaikų elgesį.

Nulaužkime šį kodą. Čia mes turime „JS klasę“, kuri paveldi „React.Component“ funkcionalumą, tada mes paskelbsime jo konstruktorių, gavusį rekvizitus kaip argumentą. Toliau mes vadiname super, kad perduotume duomenis pirminės klasės komponentui, to reikia kuriant šio tipo komponentus.

„Rekvizitai“ yra objektas, kuris gavo visus atributus, kuriuos komponentui naudojame kaip žymą.

Lempos komponentas turi pagrindinį pasiūlymą, jis pateikia HTML bloką su tekstu ir mygtuku.

Paspaudę mygtuką jungiklį, įjunkite arba išjunkite lempą, štai kur mūsų būsena patenka į žaidimą, 4 eilutėje mes inicijuojame lempos būseną, o po to mes paskelbiame metodą „switchLight“, tai pavers būseną mūsų lempos.

ši „būsena“ yra objektas su kai kuriomis savybėmis, kurios pasikeis klasės vykdymo metu. Tai neturėtų būti keičiama tiesiogiai, bet tik „setState“ metodu.

Galite pakeisti būseną tokiu būdu:

Funkcinis komponentas

Dabar, jei norime sukurti kokį nors minimalų, paprastą ir be pilietybės komponentą, tai padės jums sumažinti sunaudoto kodo kiekį ir lengviau pritaikyti DRY principą. Funkcinis komponentas yra „javascript“ funkcija, kuri grąžina kai kuriuos „Jxs“ elementus.

Pažiūrėkime šį lemputės komponento pavyzdį.

Čia mes turime įprastą funkciją, jis gauna sugadintą objektą su ypatybe pavadinimu „lampState“, tai yra kreipimasis į vietinį kintamąjį ir mes įvertiname, ar teisinga, ar klaidinga, jei norite grąžinti kitą „IMG“ žymą.

Dabar mes galime naudoti jį lempos komponente, norėdami parodyti, kaip jie gali puikiai veikti kartu.

Štai kai paspausite jungiklio mygtuką, įjungtos lemputės vaizdas pasikeis.

O kabliai?

Kabliukai yra būsima funkcija, leidžianti naudoti būseną funkciniame komponente. Tai reikia paaiškinti išsamiau, nes turime gilintis į reakciją, taip pat manau, kad ji nusipelno savo straipsnio.

Dėkojame, kad skaitote, jei jums patiko ar ne, duokite man atsiliepimų.-