Čo je to háčik a použitie?

Háčiky a použitie sú dva dôležité pojmy v React, populárnej knižnici JavaScript používanej na vytváranie používateľských rozhraní. V tomto článku preskúmame, čo sú háky, ako fungujú a niektoré bežné použitia háčikov v aplikáciách React.

Čo sú to háky?

Háčiky sú spôsob, ako pridať funkčnosť funkčným komponentom v Reacte. Tradične boli funkčné komponenty v Reacte obmedzené iba na definovanie prvku používateľského rozhrania a nemali prístup k metódam stavu alebo životného cyklu. So zavedením hákov môžu funkčné komponenty mať metódy stavu a životného cyklu, vďaka čomu sú výkonnejšie a flexibilnejšie.

Ako fungujú Hooks?

Háčiky sú funkcie, ktoré vám umožňujú používať funkcie Reactu, ako sú stav, kontext a metódy životného cyklu vo funkčných komponentoch. Volajú sa vo vnútri komponentu a musia byť v súlade s pravidlami Hooks, čo znamená, že ich nemožno volať podmienečne alebo v slučkách.

V Reacte je niekoľko vstavaných hákov, vrátane useState, useEffect, useContext a useMemo. Každý hák má špecifický účel a možno ho použiť na pridanie špecifickej funkčnosti komponentu.

Bežné použitie háčikov v Reacte

1. použite State Hook

UseState Hook sa používa na pridanie stavu funkčným komponentom. Stav je objekt, ktorý ukladá údaje a odráža zmeny v používateľskom rozhraní. UseState Hook berie počiatočnú hodnotu ako argument a vracia pole s dvoma prvkami: hodnotou aktuálneho stavu a funkciou na aktualizáciu stavu.

```
import Reagovať, { useState } z ''reagovať'';

funkcia počítadlo() {
const [count, setCount] {{0}} useState(0);

vrátiť (

V tomto príklade sa useState Hook používa na pridanie počítadla do komponentu. Premenná počtu je inicializovaná na 0 a aktualizuje sa funkciou setCount po kliknutí na tlačidlo.

2. použite Effect Hook

UseEffect Hook sa používa na vykonávanie vedľajších účinkov vo funkčných komponentoch, ako je načítanie údajov, prihlásenie na odber udalostí alebo aktualizácia názvu dokumentu. Vedľajšie účinky sú akcie, ktoré prebiehajú mimo komponentu a môžu ovplyvniť používateľské rozhranie alebo stav aplikácie.

```
importovať Reagovať, { useState, useEffect } z ''reagovať'';

function UserProfile({ userId }) {
const [user, setUser]=useState(null);

useEffect(() => {
fetch(`https://api.example.com/users/${userId}`)
.then(response =>response.json())
.then(data =>setUser(data));
}, [userId]);

if (!user) {
vrátiť

Načítava sa...

vrátiť (

V tomto príklade sa useEffect Hook používa na získanie užívateľského profilu z API a aktualizáciu stavu komponentu. UseEffect Hook berie funkciu a pole závislostí ako argumenty. Funkcia sa vykoná po vykreslení komponentu a závislosti určujú, kedy sa má funkcia znova spustiť.

3. použite kontextový hák

UseContext Hook sa používa na zdieľanie údajov medzi komponentmi bez použitia rekvizít alebo knižnice globálneho riadenia stavu. Kontext je spôsob, ako preniesť údaje cez strom komponentov bez toho, aby ste museli manuálne odovzdávať rekvizity na každej úrovni.

```
importovať Reagovať, { useContext } z ''reagovať'';
importovať ThemeContext z ''./ThemeContext'';

funkcia tlačidlo () {
const { téma, nastaviť tému }=useContext(ThemeContext);

vrátiť (
<>
onClick={() =>setTheme(theme === ''light'' ? ''dark'' : ''light'')}
style={{ backgroundColor: theme === ''light'' ? ''biela'' : ''čierna'', farba: téma === ''svetlá'' ? ''čierna'' : ''biela'' }}
>
{theme === ''svetlo'' ? ''Prepnúť do tmavého režimu'' : ''Prepnúť do svetlého režimu''}

);
}
```

V tomto príklade sa useContext Hook používa na prístup a aktualizáciu vlastnosti témy stavu nadradeného komponentu. UseContext Hook berie objekt kontextu ako argument a vracia aktuálnu hodnotu kontextu.

4. použite Memo Hook

UseMemo Hook sa používa na optimalizáciu drahých výpočtov vo funkčných komponentoch. Drahé výpočty sú výpočty, ktorých dokončenie trvá dlho alebo spotrebujú veľa zdrojov. UseMemo Hook berie funkciu a pole závislostí ako argumenty a vracia výsledok funkcie.

```
import React, { useState, useMemo } z ''reagovať'';

funkcia Fibonacci({ n }) {
const [výsledok, nastaviťVýsledok]=useState(null);

const fibonacci = useMemo(() => {
ak (n<= 1) {
návrat n;
}
return fibonacci(n - 1) + fibonacci(n - 2);
}, [n]);

useEffect(() => {
setResult(fibonacci);
}, [Fibonacci]);

if (výsledok === null) {
vrátiť

Prebieha výpočet...

vrátiť

{n}-té Fibonacciho číslo je {výsledok}.

V tomto príklade sa useMemo Hook používa na výpočet n-tého Fibonacciho čísla. UseMemo Hook berie funkciu a pole závislostí ako argumenty. Funkcia sa vykoná iba vtedy, keď sa zmenia závislosti, čím sa optimalizuje výkon komponentu.

Záver

Háčiky a použitie sú základnou súčasťou API funkčných komponentov React. Umožňujú vývojárom pridať k funkčným komponentom metódy stavu, kontextu a životného cyklu, vďaka čomu sú výkonnejšie a flexibilnejšie. Niektoré z bežných použití Hooks v aplikáciách React zahŕňajú správu stavu, spracovanie vedľajších efektov, zdieľanie kontextu a optimalizáciu výkonu. Učením sa a používaním Hooks v aplikáciách React môžu vývojári vytvárať efektívnejší a spravovateľnejší kód.