Ak ste vývojár Reactu, ktorý sa ešte nedozvedel o hákoch React, teraz je tá chvíľa. Tento príspevok bude podrobne prechádzať useEffect React Hook. Ide o háčikový ekvivalent švajčiarskeho armádneho noža. Rieši rôzne problémy, napríklad ako získať údaje, keď sa komponent pripojí, ako spustiť kód pri zmene stavu alebo podpery, ako nastaviť časovače alebo intervaly atď.
UseEffect sa používa takmer na čokoľvek, čo chcete „urobiť“ v komponente React, ktorý nevracia JSX (akýkoľvek typ vedľajšieho účinku). Môžete mať aj niekoľko efektov použitia na komponent.
Všetka táto sila niečo stojí: pokiaľ nerozumiete, ako to funguje, môže to byť mätúce. V tomto príspevku sa pozrieme na rôzne príklady, aby ste mohli pochopiť koncepčný model a použiť ho na svoj vlastný kód.
Reagovat Hooks – Čo sa snaží vyriešiť?
Háčiky boli prvýkrát predstavené vo verzii React 16.8 a teraz ich používa veľa projektov React. Hooks prekonáva problém opakovania kódu medzi komponentmi. Sú napísané bez použitia tried. To neznamená, že React opúšťa triedy; háčiky sú jednoducho alternatívnou metódou.
React vám umožňuje rýchlo vytvárať sofistikované komponenty so stavovou logikou. Je ťažké oddeliť tieto komponenty, pretože trieda sa spolieha na metódy React Lifecycle Methods. Tu prichádza na rad React Hooks.
Umožňujú rozdeliť komponent na menšie funkcie. Namiesto delenia kódu na menšie časti na základe metód životného cyklu môžete teraz kód usporiadať a rozdeliť do menších jednotiek v závislosti od funkčnosti.
Čo je useEffect Hook?
Háky sú funkcie, ktoré vám umožňujú prístup k stavu a ďalším schopnostiam reakcie bez toho, aby ste museli písať triedy ES6. Rozhranie API pre háky reakcie má háčik s názvom useEffect. Ak ste oboznámení so životným cyklom reakcie, háčik useEffect je rovnaký ako komponentDidMount, componentDidUpdatea componentWillUnmount kombinované metódy životného cyklu.
Podľa dokumentácie React Hooks bol vytvorený na vyriešenie niektorých problémov s metódami životného cyklu komponentov triedy ES6.
syntax
Prvým argumentom je funkcia spätného volania, ktorá sa štandardne vykoná po každom vykreslení. Druhým parametrom je voliteľné pole Dependency, ktoré dáva háku pokyn na spätné volanie iba v prípade, že sa zmení cieľový stav.
Hook porovnáva historické a súčasné stavy každej závislosti. Ak sa tieto dve hodnoty nezhodujú, Hook vyvolá spätné volanie špecifikované v prvom parametri. Polia závislostí menia obvyklé správanie spätného volania a zaručujú, že Hook ignoruje všetky ostatné komponenty v rozsahu komponentu.
Základné použitie
Na uloženie správy používam React useState v ukážke kódu vyššie. Potom vezmem svoju premennú stavu správy a vytlačím ju na obrazovku. Teraz však chcem použiť efekt na úpravu správy sekundu po pripojení komponentu.
Po importovaní useEffect z rámca React som vložil svoj efekt za riadok useState. Prvým parametrom na použitie Effect je funkcia. Keď sa tento obslužný program funkcie spustí, postará sa o všetky vedľajšie účinky, ktoré poskytnete. Funkcia je funkcia spätného volania, ktorá sa volá, keď nastane jedna z udalostí životného cyklu komponentu React.
Kedy ho použiť?
Hák useEffect môže byť užitočný v rôznych situáciách. Najdôležitejšie sú tieto:
- Tento parameter môžeme zmeniť zo strany klienta, keď chceme získať dáta v závislosti od dodaného argumentu. Vyvolá sa po aktualizácii parametra o nové údaje.
- Ak chceme získať údaje z koncového bodu API a zobraziť ich na strane klienta. Keď sa náš komponent vykreslí, vykoná sa funkcia alebo obslužný program priradený háku useEffect a načítajú sa údaje v stavoch komponentu. Tieto stavy sa potom použijú v komponentoch používateľského rozhrania.
- Keď sa váš komponent spolieha na dáta z vonkajšieho sveta a nemôžeme zabezpečiť, že dáta prídu, mali by sme použiť Effect (možno je tam dole server). Namiesto toho, aby ste vyvolávali problémy a bránili zobrazovaniu iných komponentov, umiestnite ich do háku useEffect.
Prípady použitia
Ak sa komponent po prvom spustení znova vykreslí, nespustí sa.
Vždy, keď sa komponent vykreslí alebo znova vykreslí, mal by sa vždy spustiť.
Štandardne sa program spustí iba raz. Potom, ak sa hodnoty prop zmenia, spustite:
Pre asynchrónne aktivity vždy použite useEffect.
Bloky kódu useEffect sú pre vašich kolegov vývojárov zjavnými znakmi asynchrónnych úloh. Je možné vytvoriť asynchrónny kód bez použitia useEffect, ale toto nie je „metóda React“ a zvyšuje to zložitosť a riziko chýb.
Používanie useEffect namiesto písania asynchrónneho kódu, ktorý môže zastaviť používateľské rozhranie, je v komunite Reactu dobre známa technika, najmä spôsob, akým ju tím React vytvoril, aby sa dosiahol vedľajší efekt.
Ďalšou výhodou jeho využitia je, že vývojári môžu jednoducho skontrolovať kód a okamžite zistiť kód, ktorý je spustený „mimo riadiaceho toku“, čo sa stane dôležitým až po prvom vykresľovacom cykle. Okrem toho sú bloky vhodné na extrakciu do opätovne použiteľných a ešte sémantickejších vlastných hákov.
Príklad
Pomocou kódu useEffect zvýšte číslo za sekundu.
záver
Pochopenie základných princípov dizajnu a osvedčených postupov useEffect Hook je podľa môjho názoru kritickou zručnosťou, ktorú sa musíte naučiť, ak sa chcete stať vývojárom Reactu ďalšej úrovne.
Aby som to zhrnul, useEffect Hook dostáva funkciu, ktorá zahŕňa imperatívnu, potenciálne účinnú úplnú logiku. Pole závislostí, ktoré je druhým parametrom, možno použiť na ovplyvnenie vykonania. Pri riešení je tiež potrebné napísať čistiaci kód pomocou funkcie return.
Dajte nám vedieť v komentároch, či bol článok užitočný.
Nechaj odpoveď