Hlubší pohled na nejoblíbenější háčky React

Nejdůležitější věci, které byste si měli zapamatovat o háčcích:

• lze je použít pouze ve funkčních komponentách - komponenty tříd mají vlastní implementaci životního cyklu;
• vždy začínají slovy použít;
• můžete použít libovolný počet háčků, ale musíte mít na paměti, že jejich použití má vliv na celkový výkon;
• musí být provedeny ve stejném pořadí při každém vykreslení... ale proč? Podívejme se na příklad:

import { useState,useEffect } z "reagovat";

export výchozí funkce FunctionComponent() {
const [value, setValue] = useState(1);
const [doubleValue, setDoubleValue] = useState(1);
if (value > 3) {
  useEffect(() => setDoubleValue(value * 2),[value]);
}

return (
  
    
{`Single ${hodnota} Double ${doubleValue}`}
     setValue(value + 1)}>Zkontrolovat
  
);
}
```

Nejprve se zobrazí varování od aplikace eslint:

<code>srcFunctionComponent.js
   Řádek 11:5: React Háček "useEffect" je volán podmíněně. <strong>React Háčky</strong> musí být v každé komponentě volány v naprosto stejném pořadí vykreslení .eslintreact-hooks/rules-of-hooks

Jak vidíte, jedná se pouze o varování eslintu, takže jej můžete vypnout přidáním příkazu zespodu na začátek souboru. FunctionComponent

/* eslint-disable react-hooks/rules-of-hooks */ 

a bude to fungovat, ale jen do té doby, než splníme podmínku, která řídí náš Hook. Další věc, kterou uvidíme, je tato chyba.

Nevyřešená chyba: Vykresleno více háčků než při předchozím vykreslování.
     React 5
     FunctionComponent FunctionComponent.js:11
     React 12
     unstable_runWithPriority scheduler.development.js:468
     React 17
     js index.js:7
     js main.chunk.js:905
     Webpack 7
 react-dom.development.js:15162

Proč k tomu dochází? React se spoléhá na pořadí, v jakém jsou volány Hooky, protože React by nevěděl, co má vrátit pro useEffect, protože v řádku nebyl žádný takový Hook, který by bylo možné zkontrolovat.

Pamatujte, že eslint je mocný nástroj, který pomáhá nás zachytit mnoho potenciálních chyb a omylů. Vypnutí jeho varování je nebezpečné, vždy zkontrolujte, zda ignorování varování může způsobit pád aplikace.

useState

Asi víte, jak to vypadá 😉

const [value, setValue] = useState(0);

Máte tedy 4 prvky: stav (reaktivní hodnota), aktualizační funkce (setter), aktuální háček (funkce) a volitelná počáteční hodnota. Proč vrací pole? Protože ho můžeme libovolně restrukturalizovat.

Nyní se chci zaměřit na poslední prvek - počáteční hodnotu. Počáteční stav lze předat dvěma způsoby:

1. Pomocí pevně zadané hodnoty nebo něčeho, co se zavolá při každém vykreslení.

const [value, setValue] = useState(0);

2. Verzí funkce. Je to velmi užitečné, pokud chceme počáteční stav spustit pouze jednou, při prvním vykreslení. Možná potřebujete provést spoustu složitých výpočtů, abyste získali počáteční stav? Příjemně to sníží náklady na zdroje, hurá!

const [value, setValue] = useState(() => {
   console.log("INIT");
   return 0;
 });

Jak zkontrolovat, že se při každém vykreslení skutečně volá první způsob? Vytvořte funkci a předejte ji jako počáteční stav:

const checkInit = () => {
console.log("INIT");
return 0;
};

const [value, setValue] = useState(checkInit());
```

A nyní jej předejte druhým způsobem:

const checkInit = () => {
console.log("INIT");
return 0;
};

const [value, setValue] = useState(() => checkInit());
```

Super, že?

Další věc, která může způsobit chyby v toku aplikace: pravděpodobně víte, jak aktualizovat stav, že?

setValue(1);

Správně... ale co když chci aktualizovat stav na základě předchozího stavu?

setValue(value + 1);

Ano... Ale ne... Co když se pokusíte zavolat funkci setter dvakrát po sobě? Doporučený způsob aktualizace stavu na základě předchozího stavu je použití funkce. Ta zaručuje, že se odkazujete na předchozí stav.

setValue((prevState) => prevState + 1);
// s objekty:
setUser((prevState) => ({ ...prevState, lastName: "Brzeczyszczykiewicz" }));

useEffect

Tento háček přijímá 2 argumenty (druhý je nepovinný) a používáme jej k ošetření vedlejších účinků. A podle toho, co předáme jako druhý argument, bude Hook volán jinak:

1. bez druhého argumentu - každé vykreslení

useEffect(() => {
   doSomething();
 });

2. prázdné pole - pouze při prvním vykreslení

useEffect(() => {
   doSomething();
 }, []);

3. pole se závislostmi - při každé změně hodnoty v poli závislostí

useEffect(() => {
   doSomething(value);
 }, [value]);

Čištění

Pomocí useEffect můžeme použít něco, čemu se říká cleanup. K čemu slouží? Je to velmi užitečné, ale myslím, že nejlépe se hodí k čištění posluchačů událostí. Řekněme, že chcete vytvořit posluchače událostí, který závisí na nějakém stavu. Nechcete při každé změně stavu přidávat nového posluchače událostí, protože po několika vykresleních bude posluchačů tolik, že to ovlivní výkon aplikace. Skvělým způsobem, jak se takovým věcem vyhnout, je použití funkce čištění. Jak to udělat? Stačí přidat návratovou funkci do funkce useEffect.

useEffect(() => {
console.log("side effect 1", count);
return () => {
console.log("DESTROYED 1");
};
});

useEffect(() => {
console.log("vedlejší efekt 2", count);
return () => {
console.log("DESTROYED 2");
};
}, []);

useEffect(() => {
console.log("vedlejší efekt 3", count);
return () => {
console.log("DESTROYED 3");
};
}, [count]);
```

Protože je uvnitř háčku useEffect, je návrat volán v závislosti na poli závislostí - při každém vykreslení, pouze při prvním vykreslení nebo při změně hodnoty v poli závislostí. Ale když je komponenta odmontována, bude čištění voláno na druhém argumentu bez ohledu na to, co se stane. Návrat kód je volán před vlastním kódem z Hook. Je to velmi logické - nejprve vyčistí starý a pak vytvoří nový. Je to tak?

useEffect(() => {
   // addEventListener
   console.log("Add");
   return () => {
     // removeEventListener
     console.log("Remove");
   };
 }, [value]);

Nejprve tedy obdržíte odstranit zpráva, pak Přidat.

Při použití useEffect a asynchronního kódu v něm je třeba dát pozor na jednu věc. Podívejte se na níže uvedený kód:

useEffect(() => {
   fetch("https://picsum.photos/5000/5000").then(() => {
     setValue((prevState) => prevState + 1);
   });
 }, []);

Zpočátku to vypadá dobře. Získáváte nějaká data, a když data přijdou, aktualizujete stav. A tady je ta past:

Někdy se vám takové varování zobrazí:
Nelze provést aktualizaci stavu React na nepřipojené komponentě. Toto je nefunkční, ale indikuje to únik paměti ve vaší aplikaci. Chcete-li to opravit, zrušte všechny odběry a asynchronní úlohy v čisticí funkci useEffect.

Důvodem je, že komponenta může být mezitím odpojena, ale aplikace se bude snažit aktualizovat stav této komponenty i po splnění slibu. Jak se s tím vypořádat? Je třeba zkontrolovat, zda komponenta existuje.

useEffect(() => {
let mounted = true;
fetch("https://picsum.photos/5000/5000").then(() => {
if (mounted) {
setValue((prevState) => prevState + 1);
}
});

return () => {
mounted = false;
};
}, []);
```

Poznámka: Existuje velmi podobný Hook => useLayoutEffect() - zpětné volání se spustí po vykreslení komponenty, ale před vizuální aktualizací domény. Je to užitečné při práci s funkcí getBoundingClientRect(), ale ve výchozím nastavení byste měli používat useEffect. Proč? Protože může blokovat vizuální aktualizace - když máte uvnitř efektu Hook složitý kód.

useContext

K čemu slouží? Sdílení dat bez předávání rekvizit. Skládá se z následujících prvků:

1. Vytvořený kontext - data
2. Poskytovatel kontextu - poskytuje kontext všem dětem
3. Předaná hodnota - data, která chcete sdílet
4. Hook - pro čtení sdílených dat

const user = {
name: "Adam",
lastName: "Kowalski",
};

export const UserContext = createContext(user);

;
```

Ve funkci child je třeba importovat kontext a zavolat háček useContext a předat tento kontext jako argument.

import { UserContext } z "./App";

const { name } = useContext(UserContext);

return <h1>Ahoj {jméno}<>
```

Voilà. Vypadá to skvěle. Hlavně pro předávání globálních dat, jako jsou témata atd. Nedoporučuje se používat v úlohách s velmi dynamickými změnami.

Samozřejmě můžeme místo toho vytvořit vlastní zprostředkovatele kontextu a vlastní Hook, abychom omezili kotelní šablonu... ale vlastním Hookům se budu věnovat v příštím článku.

useReducer

Umožňuje nám spravovat stav a znovu vykreslovat, když se stav změní - podobně jako useState. Je to podobné jako redux reduktor. Ten je lepší než useState, pokud je stavová logika složitější.

const [state, dispatch] = useReducer(reducer, initialArg); 

• Vrací aktuální stav pomocí metody odeslání.
• Počáteční hodnota se zadává jinak než v reduxu, a to při volání háčku.

Existuje také třetí argument, který lze předat funkci useReducer - funkce init.

const [state, dispatch] = useReducer(reducer, initialArg, init);

K čemu slouží? Lze ji použít, když chceme obnovit stav na původní hodnotu. Níže najdete pěkný příklad:

// Rodič

// Dítě
funkce init(initialNumber) {
return { number: initialNumber };
}

function reducer(state, action) {
switch (action.type) {
case "change":
return { number: Math.random() };
case "reset":
return init(action.payload);
výchozí:
throw new Error();
}
}

export default funkce ChildComponent({ getFactorial }) {
const [state, dispatch] = useReducer(reducer, initialNumber, init);

return (
<>
   <h2>Číslo: {state.number}</h2>
      <button
        onclick="{()" > dispatch({ type: "reset", payload: initialNumber })}
      &gt;
        Resetovat
      </button>
      <button onclick="{()" > odeslat({typ: "změnit" })}&gt;Kreslit</button>
    </>
  );
}

Číslo: {state.number}

</>
);
}
“`

useCallback

Kdy ji použít? Když chceme dosáhnout referenční rovnosti (a tím snížit počet vytvořených funkcí). Na rozdíl od funkce useMemo, která vrací hodnotu, vrací tento háček funkci.

Příklad: Vytvoření funkce v nadřazené komponentě a její předání prostřednictvím rekvizit

// Rodič
 const getSquaredValue = () => count * count;
 ...
 return (
   
 )

Poté v podřízené komponentě zkontrolujte, kolikrát bude zavolán efekt Hook po přidání této funkce do pole závislostí:

// Dítě
 useEffect(() => {
   console.log("getSquaredValue", getSquaredValue());
 }, [getSquaredValue]);

Při každém vykreslování se do konzoly zapíše! I když hodnoty uvnitř getSquaredValue() funkce se nezměnila. Tomu se však můžeme vyhnout tím, že tuto funkci zabalíme do useCallback

const getSquaredValue = useCallback(() => count * count, [count])

Této funkci můžeme také předat některé parametry:

const getSquaredValue = useCallback(
   (multiplier) => count * count * multiplier,
   [count]
 );

useMemo

const memoizedValue = useMemo(() => {
   return doSomething(hodnota);
 }, [value]);

• Při pohledu na náklady na zdroje není neutrální - useMemo se musí volat při každém vykreslování, ukládá hodnotu do paměti a porovnává (režie paměti),
• používá Memoization - optimalizační techniku, specifickou formu cachování.

Měli byste ji používat pouze ve dvou případech:

1. Pokud chcete zabránit volání složitého kódu při každém vykreslování;
2. Pokud chcete dosáhnout referenční rovnosti.

Podívejme se trochu blíže na druhý případ. Chceme použít useEffect s objektem jako závislostí. Protože objekty jsou porovnávány pomocí reference, bude useEffect volán při každém vykreslení. Abychom se takovým věcem vyhnuli, můžeme useEffect zkombinovat s useMemo, abychom takové objekty memoizovali, a pak tyto memoizované objekty předat do pole závislostí. Krátký příklad:

Nejprve to zkuste bez useMemo:

const hobbit = { name: "Bilbo" };

useEffect(() => {
console.log("Hello ", hobbit.name);
}, [hobbit]);
```

Obdržíte také varování:

Objekt 'hobbit' způsobuje, že se závislosti háčku useEffect (řádek 49) mění při každém vykreslení. Přesuňte jej dovnitř zpětného volání useEffect. Případně zabalte inicializaci objektu 'hobbit' do jeho vlastního háčku useMemo () Hook.eslintreact-hooks/exhaustive-deps

Pak to zkuste pomocí useMemo:

const hobbit = useMemo(() => {
return { name: "Bilbo" };
}, []);

useEffect(() => {
console.log("Hello ", hobbit.name);
}, [hobbit]);
```

useRef

Nejdůležitější věc: useRef nevyvolává opětovné vykreslování (jako useState), protože není spojen s cyklem vykreslování - mezi jednotlivými vykresleními zachovává stejnou referenci.

const ref = useRef(0);

Pro vyvolání uložené hodnoty je třeba použít aktuální vlastnost (ref je objekt) - ref.current

Druhým případem, kdy můžeme tento háček použít, je odkazování na prvky uvnitř HTML. Každý element má atribut ref. Můžeme tedy zpracovávat fokus, události atd.

Třetí případ je, že můžeme použít refs ke zpracování neřízených komponent. Více se o nich dočtete v Dokumenty react,
ale ve zkratce to vypadá takto:

export default funkce UncontrolledForm() {
  const input = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(input.current.value);
  };

  return (
    
      
      Odeslat
    
  );
}

Jak vidíte, není zde žádná obsluha události, pouze si pamatuje zadanou hodnotu. Je to skvělé pro obsluhu základních formulářů, kdy chcete uložené hodnoty pouze načíst, když je potřebujete (například při odesílání).

Bonus: Je to skvělé, když si potřebujete zapamatovat předchozí hodnoty stavu. Můžete k tomu použít háček useEffect, stačí předat stav ref.

const [value, setValue] = useState("");

let prevValue = useRef("");

useEffect(() => {
  prevValue.current = value;
}, [value]);

 setValue(e.target.value)}>;

Jak vidíte, háčky nejsou tak zřejmé. Můžeme je kombinovat a řešit tak mnoho problémů. Studium tohoto tématu pro vás bude jistě velkým přínosem.

K dispozici jsou také vlastní háčky...

Závěrem, Háčky React způsobily revoluci ve způsobu Vývojáři React přístup k budově webové aplikace . Díky tomu, že háčky poskytují intuitivnější a efektivnější způsob správy stavu a životního cyklu funkčních komponent, staly se nedílnou součástí. Vývoj React .

Ať už jste zkušený vývojář, nebo s React teprve začínáte, pochopení nejoblíbenějších háčků a případů jejich použití je zásadní. S háčky jako useState, useEffect, useContext a dalšími, Součásti React lze vytvořit čistší a opakovaně použitelný kód. Kromě toho je možné vytvářet vlastní háčky umožňuje vývojářům zapouzdřit a sdílet logiku napříč více komponentami, čímž podporuje opakovanou použitelnost a modularitu kódu. Jak se bude React dále vyvíjet a zavádět nové funkce, budou háčky nepochybně hrát ústřední roli při využívání plného potenciálu frameworku.

Ať už pracujete na malé funkční aplikaci, nebo na rozsáhlé webové aplikaci, je třeba přijmout Háčky React zlepší váš pracovní postup při vývoji a otevře vám nepřeberné možnosti pro vytváření robustních a funkčně bohatých aplikací. Aplikace React .

Konec části 1

Přečtěte si více:

JavaScript je zcela mrtvý. Nějaký chlápek na internetu

Nasazení rozhraní API GraphQL/MongoDB pomocí funkcí Netlify

Jak zničit projekt špatnými kódovacími postupy