Ak s Reactom začínate, možno vás zaujíma, čo sú React Hooks a kedy by ste ich mali použiť. React predstavil háčiky iba vo svojom vydaní 16.8, ale rýchlo sa stali základnou súčasťou knižnice.
Naučte sa všetko o základoch React Hooks a objavte niektoré osvedčené postupy na ich používanie vo vašich aplikáciách React.
Čo sú React Hooks?
React Hooks vám umožňujú používať stav a ďalšie funkcie React bez písania dodatočného kódu. Háčiky sú skvelý spôsob, ako urobiť váš kód čitateľnejším a udržovateľnejším.
Je tam niekoľko rôzne háky v Reacte, ale najčastejšie používané sú useState a useEffect. Hák useState vám umožňuje pridať stav do vašich komponentov. Je to užitočné pri veciach, ako je sledovanie vstupu používateľa alebo zmien vo formulári. Hák useEffect vám umožňuje spustiť funkciu vždy, keď sa komponent vykreslí. Je to užitočné pri veciach, ako je načítanie údajov z rozhrania API alebo nastavenie predplatného.
Kedy by ste mali použiť React Hooks?
React Hooks by ste mali používať vždy, keď potrebujete do komponentu pridať ďalšie funkcie. Napríklad, ak potrebujete sledovať vstup používateľa, použite háčik useState. Ak potrebujete načítať údaje z rozhrania API, použite háčik useEffect. Môžete tiež
vytvoriť vlastné háky pre volania API.Ak ste práve začali používať React, možno ešte nebudete musieť používať Hooks. Ale keď vytvárate zložitejšie aplikácie, zistíte, že Hooks je skvelý spôsob, ako pridať ďalšie funkcie do vašich komponentov.
Osvedčené postupy s háčikmi React
Teraz, keď už viete, čo sú React Hooks a kedy ich použiť, poďme sa porozprávať o niektorých osvedčených postupoch.
1. Len hovorové háčiky z funkcií React
Z funkcií React by ste mali volať iba React Hooks. Ak sa pokúsite zavolať háky reakcie z komponentu triedy, dostanete chybu.
Je to preto, že z funkcie React môžete volať iba React Hook. Funkcie React sú komponenty, ktoré deklarujete pomocou kľúčového slova function.
Tu je príklad komponentu funkcie React:
importovať Reagovať, { useState } od 'reagovať';funkciuApp() {
konšt [count, setCount] = useState(0);
vrátiť (
<div>
<p>{count}</str>
<button onClick={() => setCount (počet + 1)}>
Klikni na mňa
</button>
</div>
);
}
A tu je príklad komponentu triedy:
importovať Reagovať, { Komponent } od 'reagovať';triedaApppredlžujeKomponent{
stav = {
počet: 0
};
render() {
vrátiť (
<div>
<p>{this.state.count}</str>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Klikni na mňa
</button>
</div>
);
}
}
Prvý príklad deklaruje komponent App pomocou kľúčového slova function, zatiaľ čo druhý používa kľúčové slovo class.
2. Použite iba jeden háčik na použitie
Ak používate háčik useEffect, mali by ste použiť iba jeden na komponent. Je to preto, že useEffect sa spustí vždy, keď sa komponent vykreslí.
Ak máte viacero hákov useEffect, všetky sa spustia vždy, keď sa komponent vykreslí. To môže viesť k neočakávaným problémom so správaním a výkonom. V nižšie uvedenom príklade sa oba useEffects spustia vždy, keď sa komponent App vykreslí.
importovať Reaguj, { useState, useEffect } od 'reagovať';funkciuApp() {
konšt [count, setCount] = useState(0);useEffect(() => {
console.log('Toto sa spustí vždy, keď sa komponent aplikácie vykreslí!');
}, []);useEffect(() => {
console.log('Toto sa tiež spustí vždy, keď sa komponent aplikácie vykreslí!');
}, []);
vrátiť (
<div>
<p>{count}</str>
<button onClick={() => setCount (počet + 1)}>
Klikni na mňa
</button>
</div>
);
}
Namiesto použitia viacerých háčikov useEffect môžete použiť jeden háčik useEffect a vložiť doň celý svoj kód. V nižšie uvedenom príklade sa pri každom vykreslení komponentu App spustí iba jeden háčik useEffect.
importovať Reaguj, { useState, useEffect } od 'reagovať';funkciuApp() {
konšt [count, setCount] = useState(0);useEffect(() => {
console.log('Toto sa spustí vždy, keď sa komponent aplikácie vykreslí!');
console.log('Toto sa tiež spustí vždy, keď sa komponent aplikácie vykreslí!');
}, []);
vrátiť (
<div>
<p>{count}</str>
<button onClick={() => setCount (počet + 1)}>
Klikni na mňa
</button>
</div>
);
}
To znamená, že môžete volať iba React Hooks z prvého príkladu. Ak sa pokúsite zavolať React Hooks z druhého príkladu, dostanete chybu.
3. Použite háky na najvyššej úrovni
Jedným z najlepších postupov s React Hooks je používať ich na najvyššej úrovni. Mali by ste sa vyhnúť používaniu háčikov vo vnútri slučiek, podmienok alebo vnorených funkcií. Napríklad, ak použijeteState v rámci cyklu for, pri každom spustení cyklu React vytvorí novú premennú stavu. To môže viesť k neočakávanému správaniu.
importovať Reagovať, { useState } od 'reagovať';funkciuApp() {
pre (nech i = 0; ja < 10; i++) {
// Nerob to!
konšt [count, setCount] = useState(0);
}
vrátiť (
<div>
<p>{count}</str>
<button onClick={() => setCount (počet + 1)}>
Klikni na mňa
</button>
</div>
);
}
Vo vyššie uvedenom príklade komponent App vždy vykreslí počet a tlačidlo z poslednej iterácie cyklu. Je to preto, že React aktualizuje iba stavovú premennú z poslednej iterácie.
Namiesto useState vo vnútri cyklu môžete deklarovať stavovú premennú mimo cyklu. Takto React vytvorí iba jednu stavovú premennú a podľa toho ju aktualizuje.
importovať Reagovať, { useState } od 'reagovať';funkciuApp() {
// Toto je správny spôsob použitia useState v slučke
konšt [count, setCount] = useState(0);pre (nech i = 0; ja < 10; i++) {
// ...
}
vrátiť (
<div>
<p>{count}</str>
<button onClick={() => setCount (počet + 1)}>
Klikni na mňa
</button>
</div>
);
}
4. Nepoužívajte nadmerne háky
React Hooks sú mocným nástrojom, ale mali by ste sa vyhnúť ich nadmernému používaniu. Ak zistíte, že používate viacero hákov v každom komponente, možno ich nadmerne používate.
React Hooks sú najužitočnejšie, keď potrebujete zdieľať stav medzi viacerými komponentmi. Vyhnite sa používaniu nepotrebných hákov, pretože môžu sťažiť čítanie kódu a pri nadmernom používaní môžu ovplyvniť výkon.
Pridajte viac funkcií pomocou háčikov React 18
S vydaním React 18 sú k dispozícii nové háčiky. Každý háčik je špecifický pre určitú funkciu React. Zoznam všetkých dostupných háčikov nájdete na webovej stránke React. Ale najčastejšie používané háčiky sú stále useState a useEffect.
