Būklės išsaugojimas yra esminė koncepcija kuriant programas su "React". Skirtingai nei klasėmis pagrįsti komponentai, funkciniai komponentai būsenai efektyviai valdyti naudoja kabliukus. Plačiai naudojamas "React" kabliukas yra useState, kuris leidžia išsaugoti ir atnaujinti komponento būseną. Šiame vadove sužinosite, kaip teisingai naudoti useState ir ką reikia turėti omenyje tai darant.
Svarbiausios išvados
- UseState kabliukas suteikia galimybę valdyti funkcinių komponentų būsenas.
- Galite nustatyti pradines reikšmes ir atnaujinti būseną naudodami specialią setter funkciją.
- Svarbu laikytis kabliukų naudojimo taisyklių, kad išvengtumėte netikėtų klaidų.
Žingsnis po žingsnio
1. Importuokite useState kabliuką
Pirmiausia iš "React" bibliotekos reikia importuoti kabliuką useState. Paprastai tai atliekama jūsų komponento pradžioje.
2. Inicializuokite būseną
Naudodami useState sukurkite būsenos kintamąjį. Kaip argumentą perduodate pradinę būseną, kurią elementas turėtų įgyti. Šiuo atveju pradedame nuo skaitiklio 0.
3. išskaidykite grąžintą masyvą
Iškvietimas useState grąžina masyvą su dviem elementais: esama būsena ir nustatančioji funkcija. Turėtumėte užfiksuoti šias dvi reikšmes naudodami destruktūrizavimą, kad galėtumėte tęsti darbą.
4. įgyvendinkite mygtuką
Norėdami sąveikauti su savo būsena, sukursime mygtuką, kuris leis padidinti skaitiklį. Mygtukas rodys skaitiklio vertę.
5. pridėkite paspaudimo tvarkyklės funkciją
Atsižvelgiant į reikalavimus, reikia apibrėžti funkciją, kuri bus vykdoma, kai mygtukas bus paspaustas. Ši funkcija turėtų naudoti setter funkciją būsenai atnaujinti.
6. nustatykite naują būsenos reikšmę
Pakeiskite būseną iškviesdami setCounter su nauja verte paspaudimo tvarkyklės funkcijoje. Svarbu atsižvelgti į senąją būseną.
7. išbandykite funkcionalumą
Perkraukite programą, kad įsitikintumėte, jog paspaudus mygtuką skaitiklis padidinamas teisingai. Dabartinė skaitiklio vertė turėtų būti rodoma mygtuke.
8. naudodami setState funkcionalumą
Kai kuriais atvejais gali būti naudinga arba būtina naudoti funkciją setState. Tai leidžia uţtikrinti, kad būtų naudojama teisinga ankstesnės būsenos versija, ypač asinchroninių įvykių atveju.
9. kelių būsenų tvarkymas
Jei jūsų komponentui reikalingi keli būsenos kintamieji, galite kelis kartus iškviesti funkciją useState, kad juos apibrėžtumėte. Įsitikinkite, kad iškvietimų tvarka išlieka tokia pati.
10. venkite kabliukų naudojimo klaidų
Laikykitės kabliukų naudojimo taisyklių: Visi useState iškvietimai turi būti komponento pradžioje, be jokių sąlygų, darančių įtaką tam, ar useState iškviečiamas, ar ne. Ši taisyklė padeda išvengti klaidų, kurios gali atsirasti pakeitus kabliukų iškvietimų tvarką.
Apibendrinimas
Šiame vadove sužinojote, koks svarbus yra useState kabliukas komponentų būsenai valdyti "React" sistemoje. Procesas prasideda nuo kabliuko importavimo, būsenos inicializavimo ir baigiasi veiksmo įgyvendinimu. Laikydamiesi struktūruoto požiūrio ir konkrečių sąveikų, turėtumėte sugebėti efektyviai valdyti būseną funkciniuose komponentuose.
