Použití vlastních Hooks v Reactu se osvědčilo jako geniální přístup k abstrakci opakující se logiky a k zlepšení čitelnosti a údržby vašich komponent. V tomto tutoriálu se dozvíte na příkladu "použití useJsonFetch", jak vytvářet vlastní Hooksy tvořit, které jsou speciálně určeny k získávání JSON dat z serveru. Pusťme se rovnou do toho.
Nejdůležitější poznatky
- Vlastní Hooks jsou jednoduché funkce, které používají React Hooks.
- Umožňují opakované použití logiky napříč několika komponentami.
- Vlastní Hook může obstarávat více stavů jako načítání (loading), data a error.
- Struktura a implementace vlastního Hooku je jednoduchá a přehledná.
Krok za krokem návod na vytvoření Hooksu useJsonFetch
Základní přemýšlení
Před tím, než začnete psát svůj vlastní hook, je důležité definovat funkcionalitu, kterou potřebujete. V tomto případě chcete vytvořit hook, který načte JSON data ze serveru. Náš hook pojmenujeme "useJsonFetch". Pro pochopení, jak tento hook implementovat, se podívejme nejprve na použití useJsonFetch v komponentě.
Zavoláte hook a předáte mu URL, ze které chcete získat JSON data. Hook bude zodpovědný za získání dat a zacházení s načítáním a chybovými stavy.
Implementace použití useJsonFetch
Pro implementaci vlastního Hooku vytvoříte nový soubor, který začíná slovem „use“, aby odpovídal konvencím Reactu. Název souboru by tedy byl useJsonFetch.js.
V tomto souboru vytvoříte funkci, která přijímá URL jako parametr. Ve funkci budete definovat stavy pro data, error a načítání.
Zde jsou data na začátku undefined, error také a načítání začíná s true, aby označilo načítací stav. To je způsobeno způsobem, jak JavaScript zachází s asynchronními operacemi.
Použití useEffect
V rámci hooku využijete useEffect k zahájení získávání dat, když je komponenta načtena. Ujistěte se, že stav načítání aktualizujete podle potřeby.
Pomocí await nejprve zavoláte URL pomocí fetch. Protože fetch vrací Promise, můžete odpověď počkat s await. Po obdržení odpovědi převedete data na JavaScriptový objekt pomocí.json().
Pokud dojde k chybě, zachytíte ji pomocí try-catch a nastavíte stav chyby. Bez ohledu na to, zda byl požadavek úspěšný nebo došlo k chybě, ujistěte se, že nastavíte načítání na false poté, co dojde odpověď.
Návrat Hooku
Nakonec vrátíte stavy dat, error a načítání jako objekt, aby byly tyto hodnoty dostupné volající komponentě.
Použití Hooku v komponentě
Nyní, když jste svůj hook vytvořili, můžete ho použít ve své komponentě. Importujte useJsonFetch do své komponenty a použijte destrukturalizaci k získání hodnot.
Poté můžete implementovat zobrazení načítání zkontrolováním načítání a zobrazit data, která jste získali, když jsou k dispozici.
Použitím useJsonFetch můžete udržovat logické oddělení mezi získáváním dat a UI logikou, což výrazně zlepšuje údržbu vašich komponent.
Závěr k vytváření vlastních Hooksů
Vytváření vlastních Hooksů je jednoduchý, ale účinný proces, který vám pomáhá organizovat váš kód. Můžete zapouzdřit znovupoužitelnou logiku a implementovat ji v každé komponentě, která potřebuje stejnou funkcionalitu. Pomocí vlastních Hooksů můžete také oddělit síťový požadavek a reakci na načítání nebo chybové stavy od zobrazení dat.
Shrnutí
S vlastním Hookem jako je useJsonFetch se naučíte, jak řídit asynchronní získávání dat v Reactu. To výrazně zlepšuje znovupoužitelnost a strukturu vašeho kódu. Viděli jste, jak můžete vytvořit jednoduchou strukturu pro získávání JSON dat a efektivně spravovat různé stavy.
