logo

Reagovat useEffect Hook využití, které musíte znát

React je knihovna uživatelského rozhraní založená na JavaScriptu. Komponenty React jsou izolované opakovaně použitelné části logiky kódu s vlastním uživatelským rozhraním. Několik komponent se spojilo a vytvořilo smysluplnou fungující aplikaci React.

Komponenty můžeme vytvářet dvěma způsoby, pomocí třídy nebo funkce. Díky jednoduchosti a většímu vystavení funkcí vývojářům JavaScriptu vidíme, že mnoho vývojářů Reactu se přizpůsobuje komponentám založeným na funkcích oproti komponentám založeným na třídách.

Od verze Reactu 16.8 má React vzrušující novou funkci nazvanou Hooks. React poskytuje mnoho standardních vestavěných háčků pro správu stavů, izolování vedlejších efektů, vytváření referencí, zlepšování výkonu atd. Můžeme také vytvářet vlastní háky, což jsou pouze funkce JavaScriptu s přístupem k mnoha funkcím Reactu.

V tomto článku budeme hovořit o jednom z nejpoužívanějších vestavěných React Hook s názvem useEffect . Naučíme se jej používat s praktickými případy použití.

Hák useEffect

Výsledkem komponenty je vykreslit „něco“ na uživatelském rozhraní pomocí logiky vykreslování (napsané v JSX). Logiku vykreslování řídí mnoho faktorů

  • Hodnoty stavu jsou definovány a aktualizovány uvnitř komponenty.
  • Hodnoty props jsou předány komponentě.
  • Nežádoucí účinky.

Nyní, co jsou side effects ? Je v pořádku, pokud jste to ještě neslyšeli v souvislosti s programováním. Pojďme to zlomit a pochopit zde.

  • Vedlejším efektem může být jakýkoli efekt (logika programování), který je zodpovědný za změnu stavu vaší součásti. Pokud se stav změní, komponenta se znovu vykreslí. Typickým vedlejším efektem je například volání API a změna místního stavu komponenty, aby se ukládala data odezvy API.
  • Také se mohou vyskytnout vedlejší účinky, které nemusí aktualizovat hodnoty stavu a neovlivňují logiku vykreslování. Například zaznamenáte text na konzoli prohlížeče nebo uložíte něco do místního úložiště prohlížeče. Upozorňujeme, že některé z nich můžeme provést pomocí useRef háček také, že se dozvíme v budoucím článku.

Takže vedlejší efekt je něco, co bychom měli izolovat od vykreslování. useEffect hook pomáhá provádět vedlejší efekty tím, že jej izoluje od vykreslovací logiky.

useEffect(callback, [dependencies]);

Hák useEffect má dva argumenty,

  • Funkce zpětného volání k definování a vyčištění vedlejšího efektu.
  • Volitelné pole závislostí, které zajišťuje, kdy spustit vedlejší efekt definovaný ve funkci zpětného volání.

Použití háku useEffect

Funkci zpětného volání předáme do useEffect hák má vedlejší účinky. React jej standardně spouští na každém renderu komponenty. Spuštění vedlejších efektů na každém renderu však může být drahé a náročné na výkon. Můžeme jej ovládat pomocí argumentu pole závislostí, který předáme háku useEffect.

V této části se naučíme šest použití háku useEffect ke spuštění a vyčištění vedlejšího efektu.

1. Spustí se vedlejší efekt After Every Vykreslit

První je výchozí případ. Pokud nepředáte pole závislostí háku useEffect, funkce zpětného volání se provede při každém vykreslení. Tedy React spustí vedlejší efekt v něm definovaný po každém vykreslení. 

useEffect(() => {
  // Side Effect
});

Nejedná se o velmi používaný scénář použití. Vždy můžeme chtít mít pod kontrolou průběh vedlejšího účinku.

2. Vedlejší efekt se spustí Only Once Po počátečním vykreslení

Možná budete chtít spustit vedlejší efekt jen jednou po počátečním vykreslení. Typickým případem bude načítání dat voláním API a uložení odpovědi do stavové proměnné po počátečním vykreslení. Nechcete provést toto volání API znovu.

Chcete-li tento případ použití vyřešit, můžete předat prázdné pole jako druhý argument háku useEffect.

useEffect(() => {
  // Side Effect
}, []);

V tomto případě se vedlejší efekt spustí pouze jednou po počátečním vykreslení komponenty.

3. Vedlejší efekt běží po State Value Změny

Možná budete muset spustit vedlejší efekt v závislosti na hodnotě stavu. Vedlejším efektem může být například příprava uvítací zprávy na základě mluveného jazyka (angličtina, španělština, hindština, tamilština atd.). Zde je hodnota mluveného jazyka uložena ve stavové proměnné.

Pokaždé, když vybereme mluvený jazyk, stav se aktualizuje. Jakmile se hodnota stavu aktualizuje, chcete znovu vytvořit uvítací zprávu. Chcete-li vyřešit tento případ použití, musíte předat stavovou proměnnou háku useEffect jako součást pole závislostí.

useEffect(() => {
  // Side Effect
}, [state]);

V tomto případě se vedlejší efekt spustí pokaždé, když se změní hodnota stavové proměnné. Pokud vedlejší efekt ovlivňuje více stavových proměnných, můžete je předat jako oddělené čárkami v poli závislostí.

useEffect(() => {
  // Side Effect
}, [state1, state2, state3]);

4. Vedlejší efekt běží po Props Value Změnit

Stejně jako stát můžeme také použít rekvizity jako závislost pro spuštění vedlejšího efektu. V tomto případě se vedlejší efekt spustí pokaždé, když dojde ke změně rekvizit předávaných jako závislost.

useEffect(() => {
  // Side Effect
}, [props]);

Můžete předat několik rekvizit oddělených čárkami jako závislosti jako v předchozím příkladu.

5. Vedlejší efekt běží po Props and State Value Změnit

Co když potřebujete spustit vedlejší efekt pokaždé, když se změní kombinace stavu a rekvizit. Tento případ použití může nastat, když váš vedlejší účinek závisí na hodnotách stavu a rekvizit. V tomto případě musíte předat proměnné state i props jako závislosti.

useEffect(() => {
  // Side Effect
}, [props, state]);

6. Vedlejší efektCleanup

Zatím jsme viděli, jak a kdy spustit vedlejší efekt. Je také nezbytné, abychom vyčistili vedlejší efekt péče o výkon aplikace. Každý vedlejší účinek je jiný. Takže strategie čištění pro vedlejší efekt se bude lišit.

Například, pokud máte vedlejší účinek spuštění časovače pomocí setTimeout musíte ji vyčistit vyvoláním clearTimeout funkce. Ale jak to uděláme?

Chcete-li odstranit vedlejší efekt, musíte vrátit funkci z funkce zpětného volání, kterou předáme do háku useEffect. Logiku čištění vedlejšího efektu musíte umístit do vrácené funkce.

useEffect(() => {
  // Side Effect

  return () => {
    // Side Effect Cleanup
  }
}[props, state]);

Několik poznámek,

  • Funkce vyčištění se vyvolá pokaždé po úvodním vykreslení, aby se vyčistil předchozí vedlejší efekt, a poté se spustí následující vedlejší efekt.
  • Funkce vyčištění se vyvolá, když se komponenta odpojí.

Závěr

Takže to je vše o použití useEffect háček. Doufám, že jste našli článek informativní a užitečný.

Ale počkat, to není všechno, opravdu! Pokud se o tom chcete i nadále učit prakticky pomocí praktického projektu, nechám vás s tímto videonávodem na YouTube. Doufám, že se vám bude také líbit.

https://youtu.be/M0yi7bdz-fA

Přihlaste se k odběru budoucího obsahu 🔥🔥🔥

Než skončíme...

Sdílím své znalosti na,

  • 🌐 Vývoj webu (JavaScript, ReactJS, Next.js, Node.js, atd...)
  • 🛡️ Webová bezpečnost
  • 💼 Kariérní rozvoj
  • 🌱 Opensource
  • ✍️ Vytváření obsahu

Pojďme se připojit,

  • Dejte sledovat na Twitteru
  • Přihlaste se k odběru mého kanálu YouTube
  • Vedlejší projekty na GitHubu
  • Komunita Showwcase React