Sissejuhatus reaktorisse: klassikomponendi ja funktsionaalse komponendi erinevus

Kas olete reageerimises uus? Kas soovite midagi uut õppida 5 minutiga või vähem ?. Õppige tundma reageerimise komponenti.

Mis on komponent?

Kõigepealt peaksime enne selle teemaga süvenemist teadma suurepäraselt, mis komponent tegelikult on.

Komponenti (Reaktis) kirjeldatakse kui meie rakenduse plokki või osa, mida saab kogu projektis (ja võib-olla ka teistes) uuesti kasutada, see on tavaliselt seotud kasutajaliidese elemendi ja selle käitumisega.

Nüüd, eeldades, et teate põhilisi, kontrollime kahte tüüpi komponente, mida saame Reacti projektis luua, klassikomponente ja funktsionaalseid komponente.

Klassikomponent

Seda nimetatakse ka põhikomponendiks. Alates ECMAScript 2015 on meil JavaScriptis “klass”. React kasutab seda süntaksi olelusringiga olekukomponendi loomiseks. Oskust kasutatakse tavaliselt meie komponendi või selle laste käitumise muutmiseks.

Kratsime selle koodi lahti. Siin on meil JS-klass, mis pärib funktsionaalsuse ettevõttelt React.Component. Järgmisena kuulutame argumendiks selle konstruktori, kes sai rekvisiidid vastu. Järgmisena kutsume super - andmete edastamiseks vanemklassi komponendile - see on seda tüüpi komponendi loomisel vajalik.

Rekvisiidid on objekt, millel on kõik atribuudid, mida me kasutame komponendina sildina.

Lambi komponendil on põhiline ettepanek, see renderdab HTML-i teksti ja nupuga ploki.

Kui klõpsate nupulülitil lampi sisse või välja lülitada, siis siin on meie olek mängu saamas, reas 4 lähtestame lambi oleku ja pärast seda kuulutame välja meetodi switchLight, see lülitab oleku sisse meie lambist.

see “olek” on objekt, millel on mõned omadused, mis klassi täitmise ajal muutuvad. Seda ei tohiks otse muuta, vaid meetodit setState.

Selle oleku saate muuta sel viisil:

Funktsionaalne komponent

Kui tahame ehitada mõne minimaalse, lihtsa ja kodakondsuseta komponendi, aitab see teil kasutatava koodi hulka vähendada ja DRY-põhimõtet lihtsamini rakendada. Funktsionaalne komponent on javascripti funktsioon, mis tagastab mõned Jx-i elemendid.

Vaatame seda pirnikomponendi näidet.

Siin on meil tavaline funktsioon, see võtab hävitatud objekti atribuudiga lampState, see on pöördunud kohaliku muutuja poole ja me hindame, kas see on tõene või vale, et teistsugust img-silti tagastada.

Nüüd saame seda kasutada komponendis Lamp, et näidata, kuidas need saavad hästi töötada.

See tähendab, et kui klõpsate lülitusnuppu, muutub sisse lülitatud pirni pilt.

Aga konksud?

Konksud on eelseisv funktsioon, mis võimaldab funktsionaalses komponendis olekut kasutada. Seda tuleb selgitada üksikasjalikumalt, sest peame reageerima põhjalikumalt ja ka minu arvates väärib see oma artiklit.

Täname, et lugesite, kui teile meeldis või mitte, andke mulle tagasisidet.-