Kas ir React āķi, jeb hooks?

Tagad jūs, iespējams, jau esat uzzinājis par dažiem svarīgiem un noderīgiem React pamatjēdzieniem. Šajā brīdī jūs esat gatavs iemācīties pievienot interaktivitāti, uzturēt React komponenta stāvokli un izpētīt React hooks, jeb āķus.

Šajā rakstā jūs iepazīsieties ar to, kas ir āķi, kā tos var izmantot un kāpēc tie ir noderīgi. Kad jūs progresēsiet kā React izstrādātājs, jūs, iespējams, drīz izmantosiet sarežģītus komponentus ar stāvokļa kļūdu loģiku. Komponentu stāvokļa izsekošana var kļūt par diezgan sarežģītu uzdevumu, un šeit var palīdzēt React āķi. Viens no galvenajiem āķu ieguvumiem ir tas, ka tie atrisina nevajadzīgas koda atkārtotas izmantošanas problēmu starp komponentiem (jeb īsāk DRY – Don’t Repeat Yourself). Noskaidrosim, kas tie ir un kā viņi to dara.

hooks ir funkcija

Āķi ir funkcijas, kas tika ieviestas React versijā 16.8. Tie ļauj piekļūt React stāvokļa un dzīvesveida funkcijām no komponentiem.

Novērosim āķa piemēru. Konkrēti, jūs pārbaudīsite useState hook gadījumu, jo tas ir visbiežāk izmantotais. Šis āķis tiek izmantots, lai pārvaldītu stāvokli komponentā un sekotu tam, un tas ir iebūvēts tieši React. Lai to izmantotu, pirmā lieta, kas jums jādara, ir jāimportē useState no React, lai tas būtu pieejams lietošanai.

importReact, {useState} from 'react' ;

Nākamais solis ir stāvokļa mainīgā deklarēšana komponentā.

const [state, setState] = useState(initialState)

Stāvokļa mainīgajam un iestatītās stāvokļa funkcijai varat norādīt jebkuru nosaukumu. Šajā piemērā izsauksim stāvokļa mainīgo showMenu un iestatītā stāvokļa funkciju setShowMenu.

const [showMenu, setShowMenu] = useState(false) ;

Ja esat iemācījies JavaScript, šī sintakse jums var šķist zināma. Jūs droši vien domājat, ko tieši šis kods dara. Tas patiesībā dara kaut ko tādu, ar ko jūs, iespējams, jau esat saskāries. Ņemiet vērā, ka ir pieņemts nosaukt stāvokļa mainīgo un funkciju kopu, izmantojot masīva destrukturizēšanu. Kad deklarējat stāvokļa mainīgo, izmantojot useState, tas atgriež pāri, kas ir masīvs ar diviem vienumiem. Bez masīva iznīcināšanas kods būtu garš un apgrūtinošs.

Šāds…

var menuState = useState(false) ;
var showMenu = menuState[0] ; // Piekļūšana pirmajai masīva vienumam
var setShowMenu = menuState[1] ; // Piekļūšana otrajai masīva vienumam

Tā kā piekļuve masīva vienumiem pēc indeksa ir mulsinošāka un apnicīgāka, priekšroka tiek dota masīva destrukturizēšanai, kas ievērojami vienkāršo kodu. Tagad jums ir jauns stāvokļa (state) mainīgais ar nosaukumu showMenu. Pēc tam useState iestata sākotnējo showMenu vērtību kā false.

Rezumējot,

useState hook izsaukšana veic divas lietas.

• Tas izveido stāvokļa mainīgo ar sākotnējo vērtību, kas atspoguļo pašreizējo stāvokli, kas šajā piemērā ir showMenu.
• Un tas izveido iestatīšanas funkciju, kas norāda mainīgo vērtību, kas šajā gadījumā ir setShowMenu.

Funkcija setShowMenu(true) ; tiek izmantota, lai atjauninātu rādīšanas izvēlnes vērtību, apejot tai Būlean vērtību. Nav svarīgi, kādus nosaukumus lietojat stāvokļa mainīgajiem. Varat tos definēt, pamatojoties uz jūsu komponentu un lietošanas gadījumu. UseState āķis ir jāizsauc jūsu komponenta augšējā līmenī.

...

const [showMenu, setShowMenu] = useState(false)




return (

<div>

<Child1 />

<Child2 />

<Child3 />

</div>

);

...

Šajā piemērā ievērojiet, ka āķis useState tika izmantots Būlean stāvokļa vērtības izsekošanai. Varat izmantot āķi useState, lai izsekotu jebkura veida datus. Tās var būt virknes, skaitļi, masīvi, Būlean vērtības vai objekti. Piemēram, jūs pat varat izsekot, cik reižu poga tiek nospiesta. Papildus āķiem, kas tiek izņemti no kastes ar React, varat arī izveidot savus āķus, kas ļaus jums iegūt pielāgotu komponentu loģiku atkārtoti lietojamās funkcijās. Šī ir lieliska āķu izmantošanas īpašība un ieguvums. Lielākais āķu ieguvums ir lasāmība un vienkāršība, ko tie nodrošina kodam. Šajā rakstā jūs uzzinājāt pamatinformāciju par React hooks, jeb āķiem un izpētījāt useState āķi. Tagad jūs iespējams saprotat āķu izmantošanas priekšrocības un to, kā tos izmantot savās React lietojumprogrammās.