logo

Jak vyrobit vlastní háček v Reactu

Ve funkčních komponentách umíme pomocí háčků vše, hlavně háček useState a useEffect, ale síla, kterou nám háčky daly, přesahuje naši představivost. Zde můžeme dokonce vytvořit vlastní háčky a použít je v našich aplikacích jako jiné háčky. Tyto vlastní háčky jsou velmi podobné ostatním háčkům a musí dodržovat stejná pravidla jako ostatní háčky.

V tomto blogu probereme vše, co se týká vlastních háčků, jak se vyrábějí, pravidla pro výrobu vlastních háčků atd.

Začněme…

Index

  1. Co jsou vlastní háčky v Reactu?
  2. Pravidla, která mají tyto háčky dodržovat
  3. Pravidla pro všechny typy háčků
  4. Proč vlastní háček?
  5. Co chystáme?
  6. Vytvoření aplikace React
  7. Práce na části uživatelského rozhraní naší aplikace
  8. Aktualizace naší aplikace pomocí Custom Hook
  9. Závěr

Co jsou vlastní háčky v Reactu

Podle dokumentace je „Vlastní háky funkce JavaScriptu, jejíž název začíná výrazem „use“ a může volat jiné háky. Protože komponenty i háčky jsou funkcemi, není tento koncept ničím novým a funguje dobře. ”

Jednoduše řečeno, háčky jsou jako komponenty – funkce JavaScriptu, které jsou vytvořeny tak, aby byla naše aplikace React čitelnější a upravitelná.

Jediný rozdíl mezi nimi je podle nás v tom, že komponenty ukládají jak logiku, tak značky HTML nebo JSX, zatímco vlastní háky ukládají pouze logiku nebo konkrétní funkci, která se může v aplikaci opakovat.

Pokud jde o vytváření vlastních háčků, limit je obloha. Můžeme vytvořit jakýkoli háček, který chceme, a použít jej kdekoli v naší aplikaci, přičemž se budeme řídit pravidly používanými k řízení ostatních háčků, o kterých pojednáme v další sekci.

Můžeme použít jakýkoli z předdefinovaných háčků uvnitř vlastního háku, ale opět musíme dodržovat pravidla, protože jsou to základní háčky, které nám poskytla knihovna React, a nebudou fungovat, pokud jsou definovány nebo používány nesprávně.

Stejně jako v normálním háku, pokaždé, když zavoláme náš vlastní hák, stavy nebo vedlejší efekty, které jsme v něm použili, aby byla jeho logika zcela izolována nebo odříznuta od naší hlavní komponenty. To znamená, že jakmile je zavolán hák a je vykreslena logika, stavy a efekty se nebudou míchat s jinými efekty nebo stavy v hlavní nebo jakékoli jiné komponentě. Je od nich zcela oddělena a bude jednat pouze tehdy, když je zavolána.

Pravidla

Hooky by měly být volány pouze na nejvyšší úrovni naší aplikace a nikoli v rámci žádných smyček, podmíněných příkazů nebo funkcí.

  1. Háčky jsou součástí funkčních komponent a neměly by se používat v komponentách třídy
  2. Každý vlastní háček by měl mít ve svém názvu předponu „use“. Říká reakci, že se nejedná o komponentu, ale o hák a měl by se řídit pravidly háčků, která jsou definována výše.
  3. Nemůžete volat háky uvnitř funkcí, ale vlastní háky jsou výjimkou

Proč Custom Hook v Reactu?

Pochopme to takto, naši hlavní komponentu rozdělíme na několik dalších komponent a předáme mezi nimi stavy a funkce jako rekvizity, aby byl náš kód čitelnější a srozumitelnější nejen pro vývojáře, ale i pro ostatní.

Vlastní háčky fungují stejným způsobem, ale spíše než rozdělování kódu na malé kousky se používají k izolaci specifické logiky, kterou musíme použít kdykoli během výroby naší aplikace, a zavolat ji, když je to potřeba v každé komponentě, pouhým zápisem. jeden řádek kódu. není to skvělé?

Jako hák pro načítání dat z API jej voláme v jakékoli komponentě pouze s jedním řádkem kódu a nejsme vázáni konkrétním API pouze argumentem url, který můžeme pokaždé změnit

Nepoužívá se však pouze k oddělení nejpoužívanější logiky od funkce, ale lze jej také použít k oddělení částí kódu, které mohou být trochu matoucí, aniž byste věděli, co se děje.

Zvažte scénář, pokud máme komponentu, ve které máme dvě nebo více samostatných částí logiky useEffect, je lepší je umístit do samostatných vlastních háčků a pojmenovat je, i když tato logika nebude sdílena mezi ostatními komponentami.

Je to proto, že je mnohem snazší číst a pochopit logiku tímto způsobem, než číst více řádků řetězců useEffect hook a rozumět jim s komponentou.

A protože jim můžeme libovolně pojmenovat, jaké chceme (počínaje používáním), je snazší porozumět logice použité uvnitř tohoto konkrétního vlastního háku, protože pouhým přečtením názvu lze zjistit nebo uhodnout logiku uvnitř vlastního háku. Myslíme si, že tento přístup je lepší než vysvětlovat každý řádek komentáři.

A na rozdíl od komponenty React nemusí mít vlastní Hook specifický podpis. Můžeme se rozhodnout, jaké argumenty a zda má mít příkazy return nebo ne. Jinými slovy, je to jako normální funkce

Nyní se podívejme na tento háček v akci.

Co chystáme?

Nyní víme, co, proč a kdy vlastního háčku, pojďme si promluvit o části jak.

V tomto blogu vytvoříme aplikaci, která načte GIFy z webové stránky s názvem Giphy prostřednictvím jejího rozhraní API a přístupového klíče, který bude generován automaticky, když si zaregistrujeme účet a vyplníme požadované údaje týkající se aplikace.

Můžete navštívit GitHub Repo, kde najdete další podrobnosti, jako je kód nebo API, a také uvidíte konečný produkt.

Vytvoření aplikace React

Vytvoření aplikace React je snadné – přejděte do pracovního adresáře v libovolném IDE a zadejte následující příkaz do terminálu.

npx create-react-app custom-hook

Pokud si nejste jisti, jak správně nastavit projekt create-react-app, můžete se podívat do oficiálního průvodce zde na create-react-app-dev.‌‌

Po nastavení spusťte npm start ve stejném terminálu a spusťte localhost:3000, kde bude hostována naše aplikace React. Také tam můžeme vidět všechny naše změny.

Práce na části uživatelského rozhraní

Abychom demonstrovali použití vlastního háku, vytvořili jsme dvě komponenty, které načítají data ze stejného API, ale jedna z nich načítá nějaké náhodné GIFy, zatímco druhá načítá GIFy na základě vyhledávacího dotazu pomocí vstupního pole jako zobrazeno. 

import React from "react";
import Random from "./Components/Random";
import Tag from "./Components/Tag";
const App = () => {
  return (
    <>
      <div className="container-fluid">
        <div className="row text-center mt-5">
          <div className="d-flex justify-content-center">
            <h1 className="fs-2 fw-bold p-2 w-75">Random GIF Application</h1>
          </div>
          <div className="d-flex justify-content-center mt-5">
            <Random />
            <Tag />
          </div>
        </div>
      </div>
    </>
  );
};

export default App;

Náhodná složka

Tato komponenta, jak bylo řečeno, načte náhodná data z Giphy's API a zobrazí je pomocí značky img v naší aplikaci.

Jako vždy bude API voláno uvnitř háku useEffect, který bude volán na nejvyšší úrovni naší aplikace a bude používán podle pravidel háčků. Kód je následující - 

import React, { useState, useEffect } from "react";

const API_KEY = process.env.REACT_APP_API_KEY;

const Random = () => {
  const [gif, setGif] = useState("");

  const fetchGif = async () => {
    const initial = await fetch(
      `https://api.giphy.com/v1/gifs/random?api_key=${API_KEY}`
    );
    const data = await initial.json();
    const final = data.data.images.downsized_large.url;
    setGif(final);
  };

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

  const newGif = () => {
    fetchGif();
  };
return (
    <>
      <div className="container-fluid">
        <div className="row">
          <div className="d-flex justify-content-center">
            <h1 className="fs-2 fw-bold p-2 w-75">Random GIF</h1>
          </div>
          <figure className="w-100 mt-4">
            <img src={gif} alt="random gifs" className="w-75" />
          </figure>
          <div className="d-flex justify-content-center my-4">
            <button
              className="text-center fs-5 fw-bold text-capitalize px-4 btn-secondary text-white py-2"
              onClick={newGif}
            >
              New Random Gif
            </button>
          </div>
        </div>
      </div>
    </>
  );
};

export default Random;

Ve výše uvedeném kódu máme soubor „.env“, ve kterém jsme uložili náš Access_Key, který dynamicky získáváme v naší Random Component.

Stav jsme inicializovali jako prázdný řetězec s jeho aktualizační funkcí pomocí háčku useState pro načtení a uložení načteného GIF do něj a jeho zobrazení v naší aplikaci.

V JavaScriptu i Reactu existuje mnoho metod, pomocí kterých můžeme provést volání API a načíst data do stavu, který jsme již vytvořili a diskutovali výše.

V části uživatelského rozhraní naší APP máme značku h1, značku obrázku a tlačítko s obslužnou rutinou události onClick, které spustí funkci fetchGIF() za účelem volání API a získání náhodného GIF, který se zobrazí pomocí img tag.

Komponenta dotazu

V této komponentě je vše stejné kromě dalšího parametru v rozhraní API a vstupní značky s atributem value a obslužné rutiny události onChange() v uživatelské části komponenty.

Jak bylo řečeno, tato komponenta nebude načítat náhodné GIFy, bude načítat GIFy založené na dotazech, které budou uloženy a použity pomocí vstupní značky a atributu value s obslužnou rutinou události onChange, jak bylo řečeno. 

import React, { useState, useEffect } from "react";

const API_KEY = process.env.REACT_APP_API_KEY;

const Query = () => {
  const [query, setQuerry] = useState("dogs");
  const [gif, setGif] = useState("");

  const fetchGif = async () => {
    const initial = await fetch(
      `https://api.giphy.com/v1/gifs/random?api_key=${API_KEY}&tag=${query}`
    );
    const data = await initial.json();
    const final = data.data.images.downsized_large.url;
    setGif(final);
  };

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

  const newGif = () => {
    fetchGif();
  };
return (
    <>
      <div className="container-fluid">
        <div className="row">
          <div className="d-flex justify-content-center">
            <h1 className="fs-2 fw-bold p-2 w-75 text-capitalize">
              Randon {tag} GIFs
            </h1>
          </div>
          <figure className="w-100 mt-4">
            <img src={gif} alt="random gifs" className="w-75" />
          </figure>
          <div className="d-flex justify-content-evenly my-4">
            <input
              type="text"
              value={query}
              onChange={(e) => setQuerry(e.target.value)}
              className="text-center fs-5 fw-bold text-capitalize py-2 border-0"
            />
            <button
              className="text-center fs-5 fw-bold text-capitalize px-4 btn-secondary text-white"
              onClick={newGif}
            >
              New {tag} GIF
            </button>
          </div>
        </div>
      </div>
    </>
  );
};

export default Query;

Výstup bude následující

Pokračovat ve čtení.