Pokud s Reactem začínáte, možná vás zajímá, co jsou React Hooks a kdy byste je měli používat. React představil háčky pouze ve své verzi 16.8, ale rychle se staly základním prvkem knihovny.
Naučte se vše o základech React Hooks a objevte některé osvědčené postupy pro jejich použití ve vašich aplikacích React.
Co jsou React Hooks?
React Hooks vám umožní používat stav a další funkce Reactu, aniž byste museli psát další kód. Háčky jsou skvělý způsob, jak učinit váš kód čitelnějším a udržovatelnějším.
Je tu pár různé háčky v Reactu, ale nejčastěji používané jsou useState a useEffect. Háček useState umožňuje přidat stav do vašich komponent. To je užitečné pro věci, jako je sledování vstupu uživatele nebo změn ve formuláři. Hák useEffect vám umožňuje spustit funkci při každém vykreslení komponenty. To je užitečné pro věci, jako je načítání dat z API nebo nastavení předplatného.
Kdy byste měli používat React Hooks?
React Hooks byste měli používat vždy, když potřebujete ke komponentě přidat další funkce. Pokud například potřebujete sledovat vstup uživatele, použijete háček useState. Pokud potřebujete načíst data z API, použijete háček useEffect. Můžete také
vytvořit vlastní háky pro volání API.Pokud jste právě začali používat React, možná ještě nebudete muset používat Hooks. Ale jak vytváříte složitější aplikace, zjistíte, že Hooks jsou skvělým způsobem, jak přidat do vašich komponent další funkce.
Nejlepší postupy s háky React
Nyní, když víte, co jsou React Hooks a kdy je používat, pojďme si promluvit o některých osvědčených postupech.
1. Pouze hovorové háky z funkcí React
Z funkcí React byste měli volat pouze React Hooks. Pokud se pokusíte volat háky reakce z komponenty třídy, dostanete chybu.
Je to proto, že z funkce React můžete volat pouze React Hook. Funkce React jsou komponenty, které deklarujete pomocí klíčového slova function.
Zde je příklad komponenty funkce React:
import Reagovat, { useState } z 'reagovat';funkceAplikace() {
konst [count, setCount] = useState(0);
vrátit se (
<div>
<p>{počet}</str>
<button onClick={() => setCount (počet + 1)}>
Klikni na mě
</button>
</div>
);
}
A zde je příklad komponenty třídy:
import Reagovat, { Komponenta } z 'reagovat';třídaAplikacerozšiřujeKomponent{
stav = {
počet: 0
};
poskytnout() {
vrátit se (
<div>
<p>{this.state.count}</str>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Klikni na mě
</button>
</div>
);
}
}
První příklad deklaruje komponentu App pomocí klíčového slova function, zatímco druhý používá klíčové slovo class.
2. Použijte pouze jeden háček použití
Pokud používáte háček useEffect, měli byste použít pouze jeden na komponentu. Je to proto, že useEffect se spouští vždy, když se komponenta vykresluje.
Pokud máte více háčků useEffect, všechny se spustí při každém vykreslení komponenty. To může vést k neočekávanému chování a problémům s výkonem. V níže uvedeném příkladu se oba useEffects spustí vždy, když se komponenta App vykreslí.
import Reagovat, { useState, useEffect } z 'reagovat';funkceAplikace() {
konst [count, setCount] = useState(0);useEffect(() => {
console.log('Toto se spustí vždy, když se komponenta aplikace vykreslí!');
}, []);useEffect(() => {
console.log('To se také spustí, kdykoli se komponenta aplikace vykreslí!');
}, []);
vrátit se (
<div>
<p>{počet}</str>
<button onClick={() => setCount (počet + 1)}>
Klikni na mě
</button>
</div>
);
}
Namísto použití více háčků useEffect můžete použít jeden háček useEffect a vložit do něj veškerý kód. V níže uvedeném příkladu se při vykreslování komponenty App spustí pouze jeden háček useEffect.
import Reagovat, { useState, useEffect } z 'reagovat';funkceAplikace() {
konst [count, setCount] = useState(0);useEffect(() => {
console.log('Toto se spustí vždy, když se komponenta aplikace vykreslí!');
console.log('To se také spustí, kdykoli se komponenta aplikace vykreslí!');
}, []);
vrátit se (
<div>
<p>{počet}</str>
<button onClick={() => setCount (počet + 1)}>
Klikni na mě
</button>
</div>
);
}
To znamená, že můžete volat pouze React Hooks z prvního příkladu. Pokud se pokusíte volat React Hooks z druhého příkladu, dostanete chybu.
3. Použijte háčky na nejvyšší úrovni
Jedním z nejlepších postupů s React Hooks je používat je na nejvyšší úrovni. Měli byste se vyhnout používání háčků uvnitř smyček, podmínek nebo vnořených funkcí. Pokud například použijeteState uvnitř smyčky for, při každém spuštění smyčky React vytvoří novou stavovou proměnnou. To může vést k neočekávanému chování.
import Reagovat, { useState } z 'reagovat';funkceAplikace() {
pro (nechat i = 0; já < 10; i++) {
// Nedělejte to!
konst [count, setCount] = useState(0);
}
vrátit se (
<div>
<p>{počet}</str>
<button onClick={() => setCount (počet + 1)}>
Klikni na mě
</button>
</div>
);
}
Ve výše uvedeném příkladu komponenta App vždy vykreslí počet a tlačítko z poslední iterace smyčky. Je to proto, že React aktualizuje pouze stavovou proměnnou z poslední iterace.
Místo useState uvnitř smyčky můžete deklarovat stavovou proměnnou mimo smyčku. Tímto způsobem React vytvoří pouze jednu stavovou proměnnou a podle toho ji aktualizuje.
import Reagovat, { useState } z 'reagovat';funkceAplikace() {
// Toto je správný způsob použití useState uvnitř smyčky
konst [count, setCount] = useState(0);pro (nechat i = 0; já < 10; i++) {
// ...
}
vrátit se (
<div>
<p>{počet}</str>
<button onClick={() => setCount (počet + 1)}>
Klikni na mě
</button>
</div>
);
}
4. Nepoužívejte nadměrně háčky
React Hooks jsou mocným nástrojem, ale měli byste se vyhnout jejich nadměrnému používání. Pokud zjistíte, že v každé komponentě používáte více háčků, možná je nadměrně používáte.
React Hooks jsou nejužitečnější, když potřebujete sdílet stav mezi více komponentami. Vyhněte se používání zbytečných háčků, protože mohou ztěžovat čtení kódu a při nadměrném používání mohou ovlivnit výkon.
Přidejte další funkce pomocí háčků React 18
S vydáním React 18 jsou k dispozici nové háčky. Každý háček je specifický pro určitou funkci React. Seznam všech dostupných háčků najdete na webu React. Nejčastěji používané háčky jsou však stále useState a useEffect.
