Kohandatud Hook'id: Korduvkasutatava Loogika Mustrid Reactis

Reacti Hook'id muutsid revolutsiooniliselt seda, kuidas me kirjutame Reacti komponente, tuues funktsionaalsetesse komponentidesse oleku ja elutsükli funktsioonid. Paljude nende pakutavate eeliste hulgas paistavad kohandatud hook'id silma kui võimas mehhanism loogika eraldamiseks ja korduvkasutamiseks mitme komponendi vahel. See blogipostitus sukeldub sügavale kohandatud hook'ide maailma, uurides nende eeliseid, loomist ja kasutamist praktiliste näidete abil.

Mis on Kohandatud Hook'id?

Sisuliselt on kohandatud hook JavaScripti funktsioon, mis algab sõnaga "use" ja võib kutsuda teisi hook'e. Need võimaldavad teil eraldada komponendi loogikat korduvkasutatavatesse funktsioonidesse. See on võimas viis olekuga seotud loogika, kõrvalmõjude või muu keeruka käitumise jagamiseks komponentide vahel, ilma et peaks kasutama render props'e, kõrgema järgu komponente või muid keerulisi mustreid.

Kohandatud Hook'ide Peamised Omadused:

Nimekonventsioon: Kohandatud hook'id peavad algama sõnaga "use". See annab Reactile märku, et funktsioon sisaldab hook'e ja peaks järgima hook'ide reegleid.
Korduvkasutatavus: Peamine eesmärk on kapseldada korduvkasutatavat loogikat, muutes funktsionaalsuse jagamise komponentide vahel lihtsaks.
Olekuga Loogika: Kohandatud hook'id saavad hallata oma olekut, kasutades useState hook'i, mis võimaldab neil kapseldada keerukat olekuga seotud käitumist.
Kõrvalmõjud: Nad saavad sooritada ka kõrvalmõjusid, kasutades useEffect hook'i, mis võimaldab integreerida väliste API-dega, andmete pärimist ja muud.
Kompositsioneeritavus: Kohandatud hook'id võivad kutsuda teisi hook'e, mis võimaldab teil ehitada keerukat loogikat, komponeerides väiksemaid ja fokusseeritumaid hook'e.

Kohandatud Hook'ide Kasutamise Eelised

Kohandatud hook'id pakuvad Reacti arenduses mitmeid olulisi eeliseid:

Koodi Korduvkasutatavus: Kõige ilmsem eelis on võime korduvkasutada loogikat mitme komponendi vahel. See vähendab koodi dubleerimist ja edendab DRY (Don't Repeat Yourself) põhimõttele vastavat koodibaasi.
Parem Loetavus: Eraldades keeruka loogika eraldi kohandatud hook'idesse, muutuvad teie komponendid puhtamaks ja lihtsamini mõistetavaks. Komponendi põhi-loogika jääb keskenduma kasutajaliidese renderdamisele.
Täiustatud Hooldatavus: Kui loogika on kapseldatud kohandatud hook'idesse, saab muudatusi ja veaparandusi rakendada ühes kohas, vähendades vigade tekitamise riski mitmes komponendis.
Testitavus: Kohandatud hook'e saab hõlpsasti eraldi testida, tagades, et korduvkasutatav loogika toimib korrektselt, sõltumata seda kasutavatest komponentidest.
Lihtsustatud Komponendid: Kohandatud hook'id aitavad komponente korrastada, muutes need vähem sõnaohtraks ja rohkem keskendunuks oma peamisele eesmärgile.

Oma Esimese Kohandatud Hook'i Loomine

Illustreerime kohandatud hook'i loomist praktilise näitega: hook, mis jälgib akna suurust.

Näide: useWindowSize

See hook tagastab brauseriakna praeguse laiuse ja kõrguse. Samuti uuendab see neid väärtusi, kui akna suurust muudetakse.

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);

    // Eemalda sündmuse kuulaja puhastamisel
    return () => window.removeEventListener('resize', handleResize);
  }, []); // Tühi massiiv tagab, et efekt käivitatakse ainult komponendi paigaldamisel

  return windowSize;
}

export default useWindowSize;

Selgitus:

Impordi Vajalikud Hook'id: Impordime useState ja useEffect Reactist.
Defineeri Hook: Loome funktsiooni nimega useWindowSize, järgides nimekonventsiooni.
Initsialiseeri Olek: Kasutame useState'i, et initsialiseerida windowSize olek akna algse laiuse ja kõrgusega.
Seadista Sündmuse Kuulaja: Kasutame useEffect'i, et lisada aknale suuruse muutmise sündmuse kuulaja. Kui akna suurust muudetakse, uuendab handleResize funktsioon windowSize olekut.
Puhastamine: Tagastame useEffect'ist puhastusfunktsiooni, et eemaldada sündmuse kuulaja, kui komponent eemaldatakse. See hoiab ära mälulekkeid.
Tagasta Väärtused: Hook tagastab windowSize objekti, mis sisaldab akna praegust laiust ja kõrgust.

Kohandatud Hook'i Kasutamine Komponendis

Nüüd, kui oleme loonud oma kohandatud hook'i, vaatame, kuidas seda Reacti komponendis kasutada.

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

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

  return (
    
      Akna laius: {width}px
      Akna kõrgus: {height}px
    
  );
}

export default MyComponent;

Selgitus:

Impordi Hook: Impordime useWindowSize kohandatud hook'i.
Kutsu Hook: Kutsume useWindowSize hook'i komponendi sees.
Juurdepääs Väärtustele: Destruktureerime tagastatud objekti, et saada width ja height väärtused.
Renderda Väärtused: Renderdame laiuse ja kõrguse väärtused komponendi kasutajaliideses.

Iga komponent, mis kasutab useWindowSize'i, uueneb automaatselt, kui akna suurus muutub.

Keerukamad Näited

Uurime mõningaid keerukamaid kasutusjuhtumeid kohandatud hook'ide jaoks.

Näide: useLocalStorage

See hook võimaldab teil hõlpsalt andmeid lokaalsesse salvestusruumi (local storage) salvestada ja sealt kätte saada.

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  // Olek meie väärtuse hoidmiseks
  // Edasta algväärtus useState'ile, et loogika käivitataks ainult üks kord
  const [storedValue, setStoredValue] = useState(() => {
    try {
      // Hangi local storage'ist võtme järgi
      const item = window.localStorage.getItem(key);
      // Parsi salvestatud JSON või kui seda pole, tagasta algväärtus
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // Vea korral tagasta samuti algväärtus
      console.log(error);
      return initialValue;
    }
  });

  // Tagasta useState'i seadistaja funktsiooni pakitud versioon, mis ...
  // ... salvestab uue väärtuse localStorage'isse.
  const setValue = (value) => {
    try {
      // Luba väärtusel olla funktsioon, et meil oleks sama API mis useState'il
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      // Salvesta local storage'isse
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
      // Salvesta olek
      setStoredValue(valueToStore);
    } catch (error) {
      // Keerukam implementatsioon käsitleks vea juhtumit
      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;

Kasutamine:

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

function MyComponent() {
  const [name, setName] = useLocalStorage('name', 'Külaline');

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

export default MyComponent;

Näide: useFetch

See hook kapseldab loogika andmete pärimiseks API-st.

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 viga! staatus: ${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;

Kasutamine:

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

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

  if (loading) return Laadimine...;
  if (error) return Viga: {error.message};

  return (
    
      Pealkiri: {data.title}
      Lõpetatud: {data.completed ? 'Jah' : 'Ei'}
    
  );
}

export default MyComponent;

Parimad Praktikad Kohandatud Hook'ide Jaoks

Et tagada oma kohandatud hook'ide efektiivsus ja hooldatavus, järgige neid parimaid praktikaid:

Hoidke Need Fokusseerituna: Igal kohandatud hook'il peaks olema üks, hästi defineeritud eesmärk. Vältige liiga keerukate hook'ide loomist, mis üritavad teha liiga palju.
Dokumenteerige Oma Hook'id: Pakkuge iga kohandatud hook'i kohta selget ja lühikest dokumentatsiooni, selgitades selle eesmärki, sisendeid ja väljundeid.
Testige Oma Hook'e: Kirjutage oma kohandatud hook'idele ühiktestid, et tagada nende korrektne ja usaldusväärne toimimine.
Kasutage Kirjeldavaid Nimesid: Valige oma kohandatud hook'idele kirjeldavad nimed, mis viitavad selgelt nende eesmärgile.
Käsitlege Vigu Sujuvalt: Rakendage oma kohandatud hook'ides veakäsitlust, et vältida ootamatut käitumist ja pakkuda informatiivseid veateateid.
Kaaluge Korduvkasutatavust: Kujundage oma kohandatud hook'id korduvkasutatavust silmas pidades. Tehke need piisavalt üldiseks, et neid saaks kasutada mitmes komponendis.
Vältige Üle-abstraktsiooni: Ärge looge kohandatud hook'e lihtsa loogika jaoks, mida saab hõlpsasti käsitleda komponendi sees. Eraldage ainult loogika, mis on tõeliselt korduvkasutatav ja keerukas.

Levinumad Lõksud, Mida Vältida

Hook'ide Reeglite Rikkkumine: Kutsuge hook'e alati oma kohandatud hook'i funktsiooni tipptasemel ja ainult Reacti funktsionaalsetest komponentidest või teistest kohandatud hook'idest.
Sõltuvuste Ignoreerimine useEffect'is: Veenduge, et lisate kõik vajalikud sõltuvused useEffect hook'i sõltuvuste massiivi, et vältida vananenud sulundeid ja ootamatut käitumist.
Lõpmatute Tsüklite Loomine: Olge ettevaatlik oleku uuendamisel useEffect hook'i sees, kuna see võib kergesti viia lõpmatute tsükliteni. Veenduge, et uuendus on tingimuslik ja põhineb sõltuvuste muutustel.
Puhastamise Unustamine: Lisage alati useEffect'i puhastusfunktsioon, et eemaldada sündmuste kuulajad, tühistada tellimusi ja teha muid puhastustoiminguid mälulekete vältimiseks.

Täpsemad Mustrid

Kohandatud Hook'ide Kompositsioon

Kohandatud hook'e saab omavahel kombineerida, et luua keerukamat loogikat. Näiteks võite kombineerida useLocalStorage hook'i useFetch hook'iga, et automaatselt salvestada hangitud andmed lokaalsesse salvestusruumi.

Loogika Jagamine Hook'ide Vahel

Kui mitu kohandatud hook'i jagavad ühist loogikat, saate selle loogika eraldada eraldi abifunktsiooni ja seda mõlemas hook'is korduvkasutada.

Contexti Kasutamine Kohandatud Hook'idega

Kohandatud hook'e saab kasutada koos Reacti Contextiga, et pääseda juurde globaalsele olekule ja seda uuendada. See võimaldab teil luua korduvkasutatavaid komponente, mis on teadlikud rakenduse globaalsest olekust ja saavad sellega suhelda.

Reaalse Maailma Näited

Siin on mõned näited, kuidas kohandatud hook'e saab kasutada reaalsetes rakendustes:

Vormi Valideerimine: Looge useForm hook, et käsitleda vormi olekut, valideerimist ja esitamist.
Autentimine: Rakendage useAuth hook kasutaja autentimise ja autoriseerimise haldamiseks.
Teemahaldus: Arendage useTheme hook, et vahetada erinevate teemade vahel (hele, tume jne).
Geolokatsioon: Ehitage useGeolocation hook kasutaja praeguse asukoha jälgimiseks.
Kerimise Tuvastamine: Looge useScroll hook, et tuvastada, millal kasutaja on lehel teatud punktini kerinud.

Näide: useGeolocation hook kultuuridevaheliste rakenduste jaoks, nagu kaardistamine või kättetoimetamisteenused

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: 'Geolokatsiooni ei toeta see brauser.',
      });
      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;

Kokkuvõte

Kohandatud hook'id on võimas tööriist puhtama, korduvkasutatavama ja hooldatavama Reacti koodi kirjutamiseks. Kapseldades keeruka loogika kohandatud hook'idesse, saate lihtsustada oma komponente, vähendada koodi dubleerimist ja parandada oma rakenduste üldist struktuuri. Võtke omaks kohandatud hook'id ja avastage nende potentsiaal robustsemate ja skaleeritavamate Reacti rakenduste ehitamiseks.

Alustage oma olemasolevas koodibaasis alade tuvastamisest, kus loogikat korratakse mitme komponendi vahel. Seejärel refaktoreerige see loogika kohandatud hook'idesse. Aja jooksul ehitate üles korduvkasutatavate hook'ide raamatukogu, mis kiirendab teie arendusprotsessi ja parandab teie koodi kvaliteeti.

Pidage meeles järgida parimaid praktikaid, vältida levinumaid lõkse ja uurida täpsemaid mustreid, et kohandatud hook'idest maksimumi võtta. Praktika ja kogemustega saate kohandatud hook'ide meistriks ja tõhusamaks Reacti arendajaks.