Pokud jste vývojář Reactu, který se ještě nedozvěděl o hácích React, nyní je ta správná chvíle. Tento příspěvek podrobně projde useEffect React Hook. Je to hákový ekvivalent švýcarského armádního nože. Řeší různé problémy, například jak získat data, když se komponenta připojí, jak spustit kód, když se změní stav nebo podpěra, jak nastavit časovače nebo intervaly a tak dále.
UseEffect se používá v podstatě pro cokoli, co chcete „udělat“ v komponentě React, která nevrací JSX (jakýkoli typ vedlejšího efektu). Můžete mít také několik uživatelských efektů na komponentu.
Veškerá tato síla něco stojí: pokud nerozumíte tomu, jak to funguje, může to být matoucí. V tomto příspěvku se podíváme na různé příklady, abyste mohli pochopit koncepční model a aplikovat jej na svůj vlastní kód.
Reagovat háčky – Co se snaží vyřešit?
Háky byly poprvé představeny ve verzi React 16.8 a nyní je využívá mnoho projektů React. Hooks překonává problém opakování kódu mezi komponentami. Jsou psány bez použití tříd. To neznamená, že React opouští třídy; háčky jsou prostě alternativní metodou.
React umožňuje rychle vytvářet sofistikované komponenty se stavovou logikou. Je obtížné tyto komponenty oddělit, protože třída spoléhá na metody React Lifecycle Methods. Zde přichází na řadu React Hooks.
Umožňují rozdělit součást na menší funkce. Místo rozdělování kódu na menší části na základě metod životního cyklu můžete nyní kód uspořádat a oddělit do menších jednotek v závislosti na funkčnosti.
Co je useEffect Hook?
Háky jsou funkce, které vám umožňují přístup ke stavu a dalším schopnostem reakce, aniž byste museli psát třídy ES6. Reagovat hooks API má háček nazvaný useEffect. Pokud jste obeznámeni s životními cykly reakcí, háček useEffect je stejný jako komponentDidMount, componentDidUpdate, a componentWillUnmount kombinované metody životního cyklu.
Podle dokumentace React Hooks byl vytvořen k vyřešení některých problémů s metodami životního cyklu komponent třídy ES6.
Syntax
Prvním argumentem je funkce zpětného volání, která se standardně provádí po každém vykreslení. Druhý parametr je volitelné pole závislostí, které dává háčku pokyn ke zpětnému volání pouze v případě, že se změní cílový stav.
Hook porovnává historické a současné stavy každé závislosti. Pokud se tyto dvě hodnoty neshodují, Hook vyvolá zpětné volání zadané v prvním parametru. Pole závislostí mění obvyklé chování zpětného volání a zaručují, že Hook ignoruje všechny ostatní komponenty v rozsahu komponenty.
Základní použití
K uložení zprávy používám React useState ve výše uvedené ukázce kódu. Poté vezmu svou proměnnou stavu zprávy a vytisknu ji na obrazovku. Nyní však chci pomocí Effect upravit zprávu sekundu po připojení komponenty.
Po importu useEffect z rámce React jsem vložil svůj efekt za řádek useState. Prvním parametrem, který se použije Effect, je funkce. Když je tato obsluha funkce spuštěna, postará se o jakékoli vedlejší účinky, které poskytnete. Funkce je funkce zpětného volání, která se volá, když dojde k jedné z událostí životního cyklu komponenty React.
Kdy jej použít?
Háček useEffect může být užitečný v různých situacích. Nejdůležitější jsou následující:
- Tento parametr můžeme změnit na straně klienta, když chceme načíst data v závislosti na dodaném argumentu. Bude vyvolán po aktualizaci parametru novými daty.
- Pokud chceme načíst data z koncového bodu API a zobrazit je na straně klienta. Když se naše komponenta vykresluje, provede se funkce nebo obslužný program daný háku useEffect a načtou se data ve stavech komponenty. Tyto stavy jsou pak použity v komponentách uživatelského rozhraní.
- Když se vaše komponenta spoléhá na data z vnějšího světa a my nemůžeme zajistit, že data dorazí, měli bychom použít Effect (možná je tam dole server). Namísto vyvolávání problémů a zabránění zobrazení dalších komponent je umístěte do háčku useEffect.
Případy užití
Pokud se komponenta po prvním spuštění znovu vykreslí, nespustí se.
Kdykoli se komponenta vykreslí nebo znovu vykreslí, měla by být vždy spuštěna.
Ve výchozím nastavení se program spustí pouze jednou. Poté, pokud se hodnoty prop změní, spusťte:
Pro asynchronní aktivity vždy použijte useEffect.
Bloky kódu useEffect jsou pro vaše kolegy vývojáře zjevným ukazatelem asynchronních úloh. Je možné vytvořit asynchronní kód bez použití useEffect, ale nejedná se o „metodu React“ a zvyšuje to jak složitost, tak riziko chyb.
Použití useEffect místo psaní asynchronního kódu, který může zastavit uživatelské rozhraní, je v komunitě Reactu dobře známá technika, zejména způsob, jakým ji tým React vytvořil, aby měl vedlejší efekt.
Další výhodou jeho použití je, že vývojáři mohou jednoduše zkontrolovat kód a okamžitě detekovat kód, který je spuštěn „mimo řídicí tok“, což se stane důležitým až po prvním vykreslovacím cyklu. Kromě toho jsou bloky vhodné pro extrakci do opakovaně použitelných a ještě sémantičtějších vlastních háčků.
Příklad
Pomocí kódu useEffect zvyšujte číslo za sekundu.
Proč investovat do čističky vzduchu?
Pochopení základních principů návrhu a osvědčených postupů useEffect Hook je podle mého názoru zásadní dovedností, kterou se musíte naučit, pokud se chcete stát vývojářem React další úrovně.
Abych to shrnul, useEffect Hook dostává funkci, která zahrnuje imperativní, potenciálně účinnou plnou logiku. Pole závislostí, což je druhý parametr, lze použít k ovlivnění provádění. Při jeho řešení je také nutné napsat čistící kód pomocí funkce return.
Dejte nám vědět v komentářích, zda byl článek užitečný.
Napsat komentář