Jei pirmą kartą naudojate React, jums gali kilti klausimas, kas yra React Hooks ir kada juos naudoti. React pristatė tik 16.8 versijos kabliukus, tačiau jie greitai tapo esminiu bibliotekos bruožu.
Sužinokite viską apie „React Hooks“ pagrindus ir atraskite geriausią praktiką, kaip juos naudoti „React“ programose.
Kas yra React Hooks?
„React Hooks“ leidžia naudoti būseną ir kitas „React“ funkcijas neįrašant papildomo kodo. Kabliukai yra puikus būdas padaryti kodą skaitomesnį ir lengviau prižiūrimą.
Yra keli skirtingi „React“ kabliukai, tačiau dažniausiai naudojami yra useState ir useEffect. „useState“ kabliukas leidžia pridėti būseną prie komponentų. Tai naudinga, pavyzdžiui, stebint vartotojo įvestį arba formos pakeitimus. „useEffect Hook“ leidžia paleisti funkciją, kai atvaizduojamas komponentas. Tai naudinga, pavyzdžiui, gavus duomenis iš API arba nustatant prenumeratą.
Kada turėtumėte naudoti „React Hooks“?
Turėtumėte naudoti „React Hooks“, kai reikia pridėti papildomų funkcijų prie komponento. Pavyzdžiui, jei jums reikia sekti vartotojo įvestį, turėtumėte naudoti „useState“ kabliuką. Jei reikia gauti duomenis iš API, naudokite „useEffect Hook“. Tu taip pat gali
sukurti pasirinktinius API iškvietimų kabliukus.Jei ką tik pradėjote naudoti „React“, gali būti, kad jums dar nereikės naudoti „Hooks“. Tačiau kurdami sudėtingesnes programas pastebėsite, kad kabliukai yra puikus būdas pridėti papildomų funkcijų prie komponentų.
Geriausia „React Hook“ praktika
Dabar, kai žinote, kas yra „React Hooks“ ir kada juos naudoti, pakalbėkime apie keletą geriausių praktikų.
1. Tik skambučių kabliukai iš „React“ funkcijų
„React Hooks“ turėtumėte iškviesti tik iš „React“ funkcijų. Jei bandysite iškviesti react hooks iš klasės komponento, gausite klaidą.
Taip yra todėl, kad „React Hook“ galite iškviesti tik iš „React“ funkcijos. Reakcijos funkcijos yra komponentai, kuriuos deklaruojate funkcijos raktiniu žodžiu.
Štai „React“ funkcijos komponento pavyzdys:
importuoti Reaguoti, { useState } iš „reaguoti“;funkcijaProgramėlė() {
konst [count, setCount] = useState(0);
grąžinti (
<div>
<p>{count}</p>
<mygtukas onClick={() => setCount (skaičius + 1)}>
Paspausk mane
</button>
</div>
);
}
Ir čia yra klasės komponento pavyzdys:
importuoti Reaguoti, { komponentas } iš „reaguoti“;klasėProgramėlėtęsiasiKomponentas{
būsena = {
skaičius: 0
};
render() {
grąžinti (
<div>
<p>{this.state.count}</p>
<mygtukas onClick={() => this.setState({ count: this.state.count + 1 })}>
Paspausk mane
</button>
</div>
);
}
}
Pirmajame pavyzdyje programos komponentas deklaruojamas naudojant funkcijos raktinį žodį, o antrajame naudojamas klasės raktinis žodis.
2. Naudokite tik vieną naudojimo efekto kabliuką
Jei naudojate „useEffect Hook“, kiekvienam komponentui turėtumėte naudoti tik vieną. Taip yra todėl, kad useEffect veikia kiekvieną kartą, kai pateikiamas komponentas.
Jei turite kelis „useEffect“ kabliukus, jie visi veiks, kai tik bus pateiktas komponentas. Tai gali sukelti netikėtų elgesio ir veiklos problemų. Toliau pateiktame pavyzdyje abu useEffects bus vykdomi, kai bus pateiktas programos komponentas.
importuoti Reaguoti, { useState, useEffect } iš „reaguoti“;funkcijaProgramėlė() {
konst [count, setCount] = useState(0);useEffect(() => {
console.log('Tai veiks, kai bus pateiktas programos komponentas!');
}, []);useEffect(() => {
console.log('Tai taip pat veiks, kai bus pateiktas programos komponentas!');
}, []);
grąžinti (
<div>
<p>{count}</p>
<mygtukas onClick={() => setCount (skaičius + 1)}>
Paspausk mane
</button>
</div>
);
}
Užuot naudoję kelis „useEffect“ kabliukus, galite naudoti vieną „useEffect Hook“ ir į jį įdėti visą kodą. Toliau pateiktame pavyzdyje tik vienas useEffect kabliukas bus paleistas kiekvieną kartą, kai pateikiamas programos komponentas.
importuoti Reaguoti, { useState, useEffect } iš „reaguoti“;funkcijaProgramėlė() {
konst [count, setCount] = useState(0);useEffect(() => {
console.log('Tai veiks, kai bus pateiktas programos komponentas!');
console.log('Tai taip pat veiks, kai bus pateiktas programos komponentas!');
}, []);
grąžinti (
<div>
<p>{count}</p>
<mygtukas onClick={() => setCount (skaičius + 1)}>
Paspausk mane
</button>
</div>
);
}
Tai reiškia, kad „React Hooks“ galite skambinti tik iš pirmojo pavyzdžio. Jei bandysite iškviesti „React Hooks“ pagal antrąjį pavyzdį, gausite klaidą.
3. Naudokite kabliukus aukščiausio lygio
Viena geriausių „React Hooks“ praktikų yra juos naudoti aukščiausio lygio. Turėtumėte vengti naudoti kabliukus kilpose, sąlygose ar įdėtose funkcijose. Pavyzdžiui, jei naudojate „State“ ciklo „for“ viduje, kiekvieną kartą, kai ciklas vyks, „React“ sukurs naują būsenos kintamąjį. Tai gali sukelti netikėtą elgesį.
importuoti Reaguoti, { useState } iš „reaguoti“;funkcijaProgramėlė() {
dėl (leisti aš = 0; aš < 10; i++) {
// Nedaryk to!
konst [count, setCount] = useState(0);
}
grąžinti (
<div>
<p>{count}</p>
<mygtukas onClick={() => setCount (skaičius + 1)}>
Paspausk mane
</button>
</div>
);
}
Anksčiau pateiktame pavyzdyje programos komponentas visada pateiks skaičių ir mygtuką tik nuo paskutinės ciklo iteracijos. Taip yra todėl, kad „React“ atnaujina tik paskutinės iteracijos būsenos kintamąjį.
Užuot naudoję Būseną ciklo viduje, galite deklaruoti būsenos kintamąjį už ciklo ribų. Tokiu būdu „React“ sukurs tik vieną būsenos kintamąjį ir jį atitinkamai atnaujins.
importuoti Reaguoti, { useState } iš „reaguoti“;funkcijaProgramėlė() {
// Tai yra teisingas būdas naudoti „useState“ ciklo viduje
konst [count, setCount] = useState(0);dėl (leisti aš = 0; aš < 10; i++) {
// ...
}
grąžinti (
<div>
<p>{count}</p>
<mygtukas onClick={() => setCount (skaičius + 1)}>
Paspausk mane
</button>
</div>
);
}
4. Nenaudokite per daug kabliukų
„React Hooks“ yra galingas įrankis, tačiau neturėtumėte jų per daug naudoti. Jei kiekviename komponente naudojate kelis kabliukus, galite juos naudoti per daug.
„React Hooks“ yra naudingiausi, kai reikia bendrinti būseną tarp kelių komponentų. Venkite naudoti nereikalingus kabliukus, nes jie gali apsunkinti kodo nuskaitymą ir gali turėti įtakos našumui, jei naudojamas per daug.
Pridėkite daugiau funkcijų naudodami React 18 kabliukus
Išleidus „React 18“, atsirado naujų kabliukų. Kiekvienas kabliukas yra būdingas tam tikrai React funkcijai. Visų galimų kabliukų sąrašą galite rasti React svetainėje. Tačiau dažniausiai naudojami kabliukai vis dar yra useState ir useEffect.