Hooki po meri: Vzorci za večkratno uporabo logike v Reactu

React Hooki so revolucionirali način, kako pišemo React komponente, z uvedbo stanja in funkcij življenjskega cikla v funkcijske komponente. Med številnimi prednostmi, ki jih ponujajo, izstopajo hooki po meri kot močan mehanizem za ekstrahiranje in ponovno uporabo logike med več komponentami. Ta objava se bo poglobila v svet hookov po meri, raziskovala njihove prednosti, ustvarjanje in uporabo s praktičnimi primeri.

Kaj so hooki po meri?

V bistvu je hook po meri JavaScript funkcija, ki se začne z besedo "use" in lahko kliče druge hooke. Omogočajo vam, da logiko komponente ekstrahirate v funkcije za večkratno uporabo. To je močan način za deljenje logike s stanjem, stranskih učinkov ali drugih kompleksnih vedenj med komponentami, ne da bi se zatekali k render props, komponentam višjega reda ali drugim zapletenim vzorcem.

Ključne značilnosti hookov po meri:

Konvencija poimenovanja: Hooki po meri se morajo začeti z besedo "use". To Reactu signalizira, da funkcija vsebuje hooke in mora slediti pravilom hookov.
Večkratna uporabnost: Glavni namen je inkapsulacija logike za večkratno uporabo, kar olajša deljenje funkcionalnosti med komponentami.
Logika s stanjem: Hooki po meri lahko upravljajo svoje lastno stanje z uporabo useState hooka, kar jim omogoča inkapsulacijo kompleksnega vedenja s stanjem.
Stranski učinki: Lahko izvajajo tudi stranske učinke z uporabo useEffect hooka, kar omogoča integracijo z zunanjimi API-ji, pridobivanje podatkov in več.
Sestavljivost: Hooki po meri lahko kličejo druge hooke, kar vam omogoča gradnjo kompleksne logike s sestavljanjem manjših, bolj osredotočenih hookov.

Prednosti uporabe hookov po meri

Hooki po meri ponujajo več pomembnih prednosti pri razvoju v Reactu:

Večkratna uporabnost kode: Najbolj očitna prednost je možnost ponovne uporabe logike med več komponentami. To zmanjšuje podvajanje kode in spodbuja bolj DRY (Don't Repeat Yourself) kodo.
Izboljšana berljivost: Z ekstrakcijo kompleksne logike v ločene hooke po meri postanejo vaše komponente čistejše in lažje razumljive. Osnovna logika komponente ostaja osredotočena na upodabljanje uporabniškega vmesnika.
Izboljšana vzdrževalnost: Ko je logika inkapsulirana v hookih po meri, se lahko spremembe in popravki napak uporabijo na enem mestu, kar zmanjšuje tveganje za vnos napak v več komponent.
Možnost testiranja: Hooke po meri je mogoče enostavno testirati ločeno, kar zagotavlja, da logika za večkratno uporabo deluje pravilno, neodvisno od komponent, ki jih uporabljajo.
Poenostavljene komponente: Hooki po meri pomagajo razbremeniti komponente, jih naredijo manj obsežne in bolj osredotočene na njihov primarni namen.

Ustvarjanje vašega prvega hooka po meri

Prikažimo ustvarjanje hooka po meri s praktičnim primerom: hook, ki sledi velikosti okna.

Primer: useWindowSize

Ta hook bo vrnil trenutno širino in višino okna brskalnika. Prav tako bo te vrednosti posodobil, ko se velikost okna spremeni.

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener('resize', handleResize);

    // Odstrani poslušalca dogodkov ob čiščenju
    return () => window.removeEventListener('resize', handleResize);
  }, []); // Prazen seznam zagotavlja, da se učinek izvede samo ob priklopu

  return windowSize;
}

export default useWindowSize;

Razlaga:

Uvoz potrebnih hookov: Uvozimo useState in useEffect iz Reacta.
Definicija hooka: Ustvarimo funkcijo z imenom useWindowSize, ki ustreza konvenciji poimenovanja.
Inicializacija stanja: Uporabimo useState za inicializacijo stanja windowSize z začetno širino in višino okna.
Nastavitev poslušalca dogodkov: Uporabimo useEffect za dodajanje poslušalca dogodka 'resize' na okno. Ko se velikost okna spremeni, funkcija handleResize posodobi stanje windowSize.
Čiščenje: Iz useEffect vrnemo funkcijo za čiščenje, ki odstrani poslušalca dogodkov, ko se komponenta odklopi. To preprečuje uhajanje pomnilnika.
Vračanje vrednosti: Hook vrne objekt windowSize, ki vsebuje trenutno širino in višino okna.

Uporaba hooka po meri v komponenti

Zdaj, ko smo ustvarili naš hook po meri, poglejmo, kako ga uporabiti v React komponenti.

import React from 'react';
import useWindowSize from './useWindowSize';

function MyComponent() {
  const { width, height } = useWindowSize();

  return (
    
      Širina okna: {width}px
      Višina okna: {height}px
    
  );
}

export default MyComponent;

Razlaga:

Uvoz hooka: Uvozimo hook po meri useWindowSize.
Klic hooka: Kličemo hook useWindowSize znotraj komponente.
Dostop do vrednosti: Z destrukturiranjem vrnjenega objekta dobimo vrednosti width in height.
Upodobitev vrednosti: Vrednosti širine in višine upodobimo v uporabniškem vmesniku komponente.

Vsaka komponenta, ki uporablja useWindowSize, se bo samodejno posodobila, ko se velikost okna spremeni.

Bolj kompleksni primeri

Raziščimo nekaj naprednejših primerov uporabe hookov po meri.

Primer: useLocalStorage

Ta hook vam omogoča enostavno shranjevanje in pridobivanje podatkov iz lokalne shrambe (local storage).

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  // Stanje za shranjevanje naše vrednosti
  // Posreduj začetno vrednost v useState, da se logika izvede samo enkrat
  const [storedValue, setStoredValue] = useState(() => {
    try {
      // Pridobi iz lokalne shrambe po ključu
      const item = window.localStorage.getItem(key);
      // Razčleni shranjen json ali, če ga ni, vrni initialValue
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // Če pride do napake, prav tako vrni initialValue
      console.log(error);
      return initialValue;
    }
  });

  // Vrne ovito različico nastavitvene funkcije useState, ki ...
  // ... ohrani novo vrednost v localStorage.
  const setValue = (value) => {
    try {
      // Dovolimo, da je vrednost funkcija, da imamo enak API kot useState
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      // Shrani v lokalno shrambo
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
      // Shrani stanje
      setStoredValue(valueToStore);
    } catch (error) {
      // Naprednejša implementacija bi obravnavala primer napake
      console.log(error);
    }
  };

  useEffect(() => {
    try {
      const item = window.localStorage.getItem(key);
      setStoredValue(item ? JSON.parse(item) : initialValue);
    } catch (error) {
      console.log(error);
    }
  }, [key, initialValue]);

  return [storedValue, setValue];
}

export default useLocalStorage;

Uporaba:

import React from 'react';
import useLocalStorage from './useLocalStorage';

function MyComponent() {
  const [name, setName] = useLocalStorage('name', 'Gost');

  return (
    
      Pozdravljen, {name}!
       setName(e.target.value)}
      />
    
  );
}

export default MyComponent;

Primer: useFetch

Ta hook inkapsulira logiko za pridobivanje podatkov iz API-ja.

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP napaka! status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

Uporaba:

import React from 'react';
import useFetch from './useFetch';

function MyComponent() {
  const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/todos/1');

  if (loading) return Nalaganje...;
  if (error) return Napaka: {error.message};

  return (
    
      Naslov: {data.title}
      Dokončano: {data.completed ? 'Da' : 'Ne'}
    
  );
}

export default MyComponent;

Najboljše prakse za hooke po meri

Da bi zagotovili, da so vaši hooki po meri učinkoviti in vzdrževani, sledite tem najboljšim praksam:

Ohranite jih osredotočene: Vsak hook po meri naj ima en sam, dobro definiran namen. Izogibajte se ustvarjanju preveč kompleksnih hookov, ki poskušajo narediti preveč.
Dokumentirajte svoje hooke: Zagotovite jasno in jedrnato dokumentacijo za vsak hook po meri, ki pojasnjuje njegov namen, vhode in izhode.
Testirajte svoje hooke: Napišite enotske teste za svoje hooke po meri, da zagotovite, da delujejo pravilno in zanesljivo.
Uporabljajte opisna imena: Izberite opisna imena za svoje hooke po meri, ki jasno kažejo na njihov namen.
Elegantno obravnavajte napake: Implementirajte obravnavanje napak znotraj svojih hookov po meri, da preprečite nepričakovano vedenje in zagotovite informativna sporočila o napakah.
Upoštevajte večkratno uporabnost: Načrtujte svoje hooke po meri z mislijo na večkratno uporabnost. Naredite jih dovolj splošne, da jih je mogoče uporabiti v več komponentah.
Izogibajte se pretirani abstrakciji: Ne ustvarjajte hookov po meri za preprosto logiko, ki jo je mogoče enostavno obravnavati znotraj komponente. Ekstrahirajte le logiko, ki je resnično ponovno uporabna in kompleksna.

Pogoste napake, ki se jim je treba izogibati

Kršenje pravil hookov: Vedno kličite hooke na najvišji ravni vaše funkcije hooka po meri in jih kličite samo iz React funkcijskih komponent ali drugih hookov po meri.
Ignoriranje odvisnosti v useEffect: Poskrbite, da boste v seznam odvisnosti hooka useEffect vključili vse potrebne odvisnosti, da preprečite zastarele "closures" in nepričakovano vedenje.
Ustvarjanje neskončnih zank: Bodite previdni pri posodabljanju stanja znotraj hooka useEffect, saj lahko to enostavno privede do neskončnih zank. Zagotovite, da je posodobitev pogojna in temelji na spremembah v odvisnostih.
Pozabljanje na čiščenje: Vedno vključite funkcijo za čiščenje v useEffect, da odstranite poslušalce dogodkov, prekličete naročnine in izvedete druga opravila čiščenja, da preprečite uhajanje pomnilnika.

Napredni vzorci

Sestavljanje hookov po meri

Hooke po meri je mogoče sestavljati skupaj za ustvarjanje bolj kompleksne logike. Na primer, lahko združite hook useLocalStorage s hookom useFetch, da samodejno shranite pridobljene podatke v lokalno shrambo.

Deljenje logike med hooki

Če si več hookov po meri deli skupno logiko, lahko to logiko ekstrahirate v ločeno pomožno funkcijo in jo ponovno uporabite v obeh hookih.

Uporaba Contexta s hooki po meri

Hooke po meri je mogoče uporabiti v povezavi z React Contextom za dostop in posodabljanje globalnega stanja. To vam omogoča ustvarjanje komponent za večkratno uporabo, ki se zavedajo in lahko sodelujejo z globalnim stanjem aplikacije.

Primeri iz resničnega sveta

Tukaj je nekaj primerov, kako se lahko hooki po meri uporabljajo v resničnih aplikacijah:

Validacija obrazcev: Ustvarite hook useForm za upravljanje stanja obrazca, validacije in oddaje.
Avtentikacija: Implementirajte hook useAuth za upravljanje avtentikacije in avtorizacije uporabnikov.
Upravljanje tem: Razvijte hook useTheme za preklapljanje med različnimi temami (svetla, temna itd.).
Geolokacija: Zgradite hook useGeolocation za sledenje trenutni lokaciji uporabnika.
Zaznavanje drsenja: Ustvarite hook useScroll za zaznavanje, kdaj se je uporabnik pomaknil do določene točke na strani.

Primer: hook useGeolocation za medkulturne aplikacije, kot so zemljevidi ali dostavne službe

import { useState, useEffect } from 'react';

function useGeolocation() {
  const [location, setLocation] = useState({
    latitude: null,
    longitude: null,
    error: null,
  });

  useEffect(() => {
    if (!navigator.geolocation) {
      setLocation({
        latitude: null,
        longitude: null,
        error: 'Ta brskalnik ne podpira geolokacije.',
      });
      return;
    }

    const watchId = navigator.geolocation.watchPosition(
      (position) => {
        setLocation({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          error: null,
        });
      },
      (error) => {
        setLocation({
          latitude: null,
          longitude: null,
          error: error.message,
        });
      }
    );

    return () => navigator.geolocation.clearWatch(watchId);
  }, []);

  return location;
}

export default useGeolocation;

Zaključek

Hooki po meri so močno orodje za pisanje čistejše, bolj ponovno uporabne in lažje vzdrževane React kode. Z inkapsulacijo kompleksne logike v hooke po meri lahko poenostavite svoje komponente, zmanjšate podvajanje kode in izboljšate celotno strukturo svojih aplikacij. Sprejmite hooke po meri in odklenite njihov potencial za gradnjo bolj robustnih in razširljivih React aplikacij.

Začnite z identifikacijo področij v vaši obstoječi kodi, kjer se logika ponavlja med več komponentami. Nato to logiko refaktorirajte v hooke po meri. Sčasoma boste zgradili knjižnico hookov za večkratno uporabo, ki bo pospešila vaš razvojni proces in izboljšala kakovost vaše kode.

Ne pozabite slediti najboljšim praksam, izogibati se pogostim napakam in raziskovati napredne vzorce, da boste kar najbolje izkoristili hooke po meri. Z vajo in izkušnjami boste postali mojster hookov po meri in učinkovitejši razvijalec Reacta.