Kompozícia vlastných React hookov: Zvládnutie abstrakcie komplexnej logiky

Vlastné React hooky sú mocným nástrojom na zapuzdrenie a znovupoužitie stavovej logiky vo vašich React aplikáciách. Ako však vaše aplikácie rastú na zložitosti, rastie aj logika vo vašich vlastných hookoch. To môže viesť k monolitickým hookom, ktoré je ťažké pochopiť, testovať a udržiavať. Kompozícia vlastných hookov ponúka riešenie tohto problému tým, že vám umožňuje rozdeliť komplexnú logiku na menšie, lepšie spravovateľné a znovupoužiteľné hooky.

Čo je kompozícia vlastných hookov?

Kompozícia vlastných hookov je prax kombinovania viacerých menších vlastných hookov na vytvorenie komplexnejšej funkcionality. Namiesto vytvorenia jedného veľkého hooku, ktorý rieši všetko, vytvoríte niekoľko menších hookov, z ktorých každý je zodpovedný za špecifický aspekt logiky. Tieto menšie hooky sa potom môžu skladať dohromady na dosiahnutie požadovanej funkcionality.

Predstavte si to ako stavanie z LEGO kociek. Každá kocka (malý hook) má špecifickú funkciu a vy ich kombinujete rôznymi spôsobmi, aby ste postavili zložité štruktúry (väčšie funkcie).

Výhody kompozície vlastných hookov

• Zlepšená znovupoužiteľnosť kódu: Menšie, viac zamerané hooky sú prirodzene viac znovupoužiteľné naprieč rôznymi komponentmi a dokonca aj rôznymi projektmi.
• Zlepšená udržiavateľnosť: Rozdelenie komplexnej logiky na menšie, samostatné jednotky uľahčuje pochopenie, ladenie a úpravu vášho kódu. Zmeny v jednom hooku majú menšiu pravdepodobnosť, že ovplyvnia iné časti vašej aplikácie.
• Zvýšená testovateľnosť: Menšie hooky sa ľahšie testujú v izolácii, čo vedie k robustnejšiemu a spoľahlivejšiemu kódu.
• Lepšia organizácia kódu: Kompozícia podporuje modulárnejšiu a organizovanejšiu kódovú základňu, čo uľahčuje navigáciu a pochopenie vzťahov medzi rôznymi časťami vašej aplikácie.
• Zníženie duplicácie kódu: Extrahovaním spoločnej logiky do znovupoužiteľných hookov minimalizujete duplicitu kódu, čo vedie ku stručnejšej a udržiavateľnejšej kódovej základni.

Kedy použiť kompozíciu vlastných hookov

Mali by ste zvážiť použitie kompozície vlastných hookov, keď:

• Jeden vlastný hook sa stáva príliš veľkým a zložitým.
• Zistíte, že duplikujete podobnú logiku vo viacerých vlastných hookoch alebo komponentoch.
• Chcete zlepšiť testovateľnosť vašich vlastných hookov.
• Chcete vytvoriť modulárnejšiu a znovupoužiteľnejšiu kódovú základňu.

Základné princípy kompozície vlastných hookov

Tu sú niektoré kľúčové princípy, ktoré vás môžu viesť pri prístupe ku kompozícii vlastných hookov:

• Princíp jedinej zodpovednosti (Single Responsibility Principle): Každý vlastný hook by mal mať jedinú, dobre definovanú zodpovednosť. To ich robí ľahšie pochopiteľnými, testovateľnými a znovupoužiteľnými.
• Oddelenie zodpovedností (Separation of Concerns): Oddeľte rôzne aspekty vašej logiky do rôznych hookov. Napríklad, môžete mať jeden hook na načítavanie dát, ďalší na správu stavu a iný na spracovanie vedľajších efektov.
• Skladateľnosť (Composability): Navrhujte svoje hooky tak, aby sa dali ľahko skladať s inými hookmi. To často zahŕňa vrátenie dát alebo funkcií, ktoré môžu byť použité inými hookmi.
• Konvencie pomenovania: Používajte jasné a popisné názvy pre vaše hooky, aby ste naznačili ich účel a funkcionalitu. Bežnou konvenciou je prefixovať názvy hookov slovom `use`.

Bežné vzory kompozície

Na skladanie vlastných hookov možno použiť niekoľko vzorov. Tu sú niektoré z najbežnejších:

1. Jednoduchá kompozícia hookov

Toto je najzákladnejšia forma kompozície, kde jeden hook jednoducho volá iný hook a používa jeho návratovú hodnotu.

Príklad: Predstavte si, že máte hook na načítanie údajov o používateľovi a ďalší na formátovanie dátumov. Tieto hooky môžete skombinovať a vytvoriť nový hook, ktorý načíta údaje o používateľovi a naformátuje dátum jeho registrácie.

            
import { useState, useEffect } from 'react';

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

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [userId]);

  return { data, loading, error };
}

function useFormattedDate(dateString) {
  try {
    const date = new Date(dateString);
    const formattedDate = date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' });
    return formattedDate;
  } catch (error) {
    console.error("Error formatting date:", error);
    return "Invalid Date";
  }
}

function useUserWithFormattedDate(userId) {
  const { data, loading, error } = useUserData(userId);
  const formattedRegistrationDate = data ? useFormattedDate(data.registrationDate) : null;

  return { ...data, formattedRegistrationDate, loading, error };
}

export default useUserWithFormattedDate;

            

              
                Copy
              
            
          

Vysvetlenie:

• useUserData načíta údaje o používateľovi z API.
• useFormattedDate formátuje reťazec s dátumom do používateľsky prívetivého formátu. Elegantne spracováva potenciálne chyby pri parsovaní dátumu. Argument undefined pre toLocaleDateString použije lokálne nastavenia používateľa na formátovanie.
• useUserWithFormattedDate skladá oba hooky. Najprv použije useUserData na načítanie údajov o používateľovi. Potom, ak sú údaje k dispozícii, použije useFormattedDate na naformátovanie registrationDate. Nakoniec vráti pôvodné údaje o používateľovi spolu s naformátovaným dátumom, stavom načítania a prípadnými chybami.

2. Kompozícia hookov so zdieľaným stavom

Pri tomto vzore viaceré hooky zdieľajú a upravujú rovnaký stav. To sa dá dosiahnuť pomocou useContext alebo odovzdávaním stavu a funkcií na jeho nastavenie (setter) medzi hookmi.

Príklad: Predstavte si, že tvoríte viackrokový formulár. Každý krok by mohol mať vlastný hook na správu svojich špecifických vstupných polí a validačnej logiky, ale všetky zdieľajú spoločný stav formulára spravovaný nadradeným hookom pomocou useReducer a useContext.

            
import React, { createContext, useContext, useReducer } from 'react';

// Define the initial state
const initialState = {
  step: 1,
  name: '',
  email: '',
  address: ''
};

// Define the actions
const ACTIONS = {
  NEXT_STEP: 'NEXT_STEP',
  PREVIOUS_STEP: 'PREVIOUS_STEP',
  UPDATE_FIELD: 'UPDATE_FIELD'
};

// Create the reducer
function formReducer(state, action) {
  switch (action.type) {
    case ACTIONS.NEXT_STEP:
      return { ...state, step: state.step + 1 };
    case ACTIONS.PREVIOUS_STEP:
      return { ...state, step: state.step - 1 };
    case ACTIONS.UPDATE_FIELD:
      return { ...state, [action.payload.field]: action.payload.value };
    default:
      return state;
  }
}

// Create the context
const FormContext = createContext();

// Create a provider component
function FormProvider({ children }) {
  const [state, dispatch] = useReducer(formReducer, initialState);

  const value = {
    state,
    dispatch,
    nextStep: () => dispatch({ type: ACTIONS.NEXT_STEP }),
    previousStep: () => dispatch({ type: ACTIONS.PREVIOUS_STEP }),
    updateField: (field, value) => dispatch({ type: ACTIONS.UPDATE_FIELD, payload: { field, value } })
  };

  return (
    
      {children}
    
  );
}

// Custom hook for accessing the form context
function useFormContext() {
  const context = useContext(FormContext);
  if (!context) {
    throw new Error('useFormContext must be used within a FormProvider');
  }
  return context;
}

// Custom hook for Step 1
function useStep1() {
  const { state, updateField } = useFormContext();

  const updateName = (value) => updateField('name', value);

  return {
    name: state.name,
    updateName
  };
}

// Custom hook for Step 2
function useStep2() {
  const { state, updateField } = useFormContext();

  const updateEmail = (value) => updateField('email', value);

  return {
    email: state.email,
    updateEmail
  };
}

// Custom hook for Step 3
function useStep3() {
  const { state, updateField } = useFormContext();

  const updateAddress = (value) => updateField('address', value);

  return {
    address: state.address,
    updateAddress
  };
}

export { FormProvider, useFormContext, useStep1, useStep2, useStep3 };

            

              
                Copy
              
            
          

Vysvetlenie:

• FormContext je vytvorený pomocou createContext, aby obsahoval stav formulára a funkciu dispatch.
• formReducer spravuje aktualizácie stavu formulára pomocou useReducer. Akcie ako NEXT_STEP, PREVIOUS_STEP a UPDATE_FIELD sú definované na úpravu stavu.
• Komponent FormProvider poskytuje kontext formulára svojim potomkom, čím sprístupňuje stav a dispatch všetkým krokom formulára. Taktiež odhaľuje pomocné funkcie pre `nextStep`, `previousStep` a `updateField` na zjednodušenie odosielania akcií.
• Hook useFormContext umožňuje komponentom pristupovať k hodnotám kontextu formulára.
• Každý krok (useStep1, useStep2, useStep3) si vytvára vlastný hook na správu vstupov súvisiacich s daným krokom a používa useFormContext na získanie stavu a funkcie dispatch na jeho aktualizáciu. Každý krok odhaľuje len údaje a funkcie relevantné pre daný krok, čím dodržiava princíp jedinej zodpovednosti.

3. Kompozícia hookov so správou životného cyklu

Tento vzor zahŕňa hooky, ktoré spravujú rôzne fázy životného cyklu komponentu, ako je pripojenie (mounting), aktualizácia (updating) a odpojenie (unmounting). To sa často dosahuje použitím useEffect v rámci zložených hookov.

Príklad: Zvážte komponent, ktorý potrebuje sledovať stav online/offline a tiež potrebuje vykonať nejaké upratovanie pri odpojení. Môžete vytvoriť samostatné hooky pre každú z týchto úloh a potom ich zložiť.

            
import { useState, useEffect } from 'react';

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }

    function handleOffline() {
      setIsOnline(false);
    }

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return isOnline;
}

function useDocumentTitle(title) {
  useEffect(() => {
    document.title = title;

    return () => {
      document.title = 'Original Title'; // Revert to a default title on unmount
    };
  }, [title]);
}

function useAppLifecycle(title) {
  const isOnline = useOnlineStatus();
  useDocumentTitle(title);

  return isOnline; // Return the online status
}

export { useAppLifecycle, useOnlineStatus, useDocumentTitle };

            

              
                Copy
              
            
          

Vysvetlenie:

• useOnlineStatus sleduje online stav používateľa pomocou udalostí online a offline. Hook useEffect nastaví poslucháčov udalostí pri pripojení komponentu a uprace ich pri jeho odpojení.
• useDocumentTitle aktualizuje názov dokumentu. Taktiež vráti názov na predvolenú hodnotu pri odpojení komponentu, čím zabezpečí, že nezostanú žiadne pretrvávajúce problémy s názvom.
• useAppLifecycle skladá oba hooky. Používa useOnlineStatus na zistenie, či je používateľ online, a useDocumentTitle na nastavenie názvu dokumentu. Kombinovaný hook vracia stav online.

Praktické príklady a prípady použitia

1. Internacionalizácia (i18n)

Správa prekladov a prepínanie lokalizácií sa môže stať zložitou. Môžete použiť kompozíciu hookov na oddelenie zodpovedností:

• useLocale(): Spravuje aktuálnu lokalizáciu.
• useTranslations(): Načíta a poskytuje preklady pre aktuálnu lokalizáciu.
• useTranslate(key): Hook, ktorý prijíma kľúč prekladu a vracia preložený reťazec, pričom používa hook useTranslations na prístup k prekladom.

To vám umožňuje jednoducho prepínať lokalizácie a pristupovať k prekladom v celej vašej aplikácii. Zvážte použitie knižníc ako i18next spolu s vlastnými hookmi na správu logiky prekladov. Napríklad, useTranslations by mohol načítať preklady na základe vybranej lokalizácie z JSON súborov v rôznych jazykoch.

2. Validácia formulárov

Zložité formuláre často vyžadujú rozsiahlu validáciu. Môžete použiť kompozíciu hookov na vytvorenie znovupoužiteľnej validačnej logiky:

• useInput(initialValue): Spravuje stav jedného vstupného poľa.
• useValidator(value, rules): Validuje jedno vstupné pole na základe súboru pravidiel (napr. povinné, e-mail, minimálna dĺžka).
• useForm(fields): Spravuje stav a validáciu celého formulára, pričom skladá useInput a useValidator pre každé pole.

Tento prístup podporuje znovupoužiteľnosť kódu a uľahčuje pridávanie alebo úpravu validačných pravidiel. Knižnice ako Formik alebo React Hook Form poskytujú hotové riešenia, ktoré však môžu byť doplnené o vlastné hooky pre špecifické validačné potreby.

3. Načítavanie a cachovanie dát

Správu načítavania dát, cachovania a spracovania chýb možno zjednodušiť pomocou kompozície hookov:

• useFetch(url): Načíta dáta z danej URL adresy.
• useCache(key, fetchFunction): Ukladá do cache výsledok fetch funkcie pomocou kľúča.
• useData(url, options): Kombinuje useFetch a useCache na načítanie dát a uloženie výsledkov do cache.

To vám umožňuje jednoducho ukladať do cache často pristupované dáta a zlepšiť výkon. Knižnice ako SWR (Stale-While-Revalidate) a React Query poskytujú výkonné riešenia na načítavanie a cachovanie dát, ktoré môžu byť rozšírené o vlastné hooky.

4. Autentifikácia

Spracovanie autentifikačnej logiky môže byť zložité, najmä pri práci s rôznymi metódami autentifikácie (napr. JWT, OAuth). Kompozícia hookov môže pomôcť oddeliť rôzne aspekty autentifikačného procesu:

• useAuthToken(): Spravuje autentifikačný token (napr. ukladanie a načítavanie z lokálneho úložiska).
• useUser(): Načíta a poskytuje informácie o aktuálnom používateľovi na základe autentifikačného tokenu.
• useAuth(): Poskytuje funkcie súvisiace s autentifikáciou ako prihlásenie, odhlásenie a registrácia, pričom skladá ostatné hooky.

Tento prístup vám umožňuje ľahko prepínať medzi rôznymi metódami autentifikácie alebo pridávať nové funkcie do autentifikačného procesu. Knižnice ako Auth0 a Firebase Authentication môžu byť použité ako backend na správu používateľských účtov a autentifikácie, a vlastné hooky môžu byť vytvorené na interakciu s týmito službami.

Osvedčené postupy pre kompozíciu vlastných hookov

• Udržujte hooky zamerané: Každý hook by mal mať jasný a špecifický účel.
• Vyhnite sa hlbokému vnáraniu: Obmedzte počet úrovní kompozície, aby ste sa vyhli tomu, že váš kód bude ťažko pochopiteľný. Ak sa hook stane príliš zložitým, zvážte jeho ďalšie rozdelenie.
• Dokumentujte svoje hooky: Poskytnite jasnú a stručnú dokumentáciu pre každý hook, vysvetľujúcu jeho účel, vstupy a výstupy. Toto je obzvlášť dôležité pre hooky, ktoré používajú iní vývojári.
• Testujte svoje hooky: Píšte jednotkové testy pre každý hook, aby ste sa uistili, že funguje správne. Toto je obzvlášť dôležité pre hooky, ktoré spravujú stav alebo vykonávajú vedľajšie efekty.
• Zvážte použitie knižnice na správu stavu: Pre zložité scenáre správy stavu zvážte použitie knižnice ako Redux, Zustand alebo Jotai. Tieto knižnice poskytujú pokročilejšie funkcie na správu stavu a môžu zjednodušiť kompozíciu hookov.
• Myslite na spracovanie chýb: Implementujte robustné spracovanie chýb vo svojich hookoch, aby ste predišli neočakávanému správaniu. Zvážte použitie blokov try-catch na zachytenie chýb a poskytnutie informatívnych chybových správ.
• Zvážte výkon: Buďte si vedomí výkonnostných dôsledkov vašich hookov. Vyhnite sa zbytočným prekresleniam a optimalizujte svoj kód pre výkon. Použite React.memo, useMemo a useCallback na optimalizáciu výkonu tam, kde je to vhodné.

Záver

Kompozícia vlastných React hookov je výkonná technika na abstrahovanie komplexnej logiky a zlepšenie znovupoužiteľnosti, udržiavateľnosti a testovateľnosti kódu. Rozdelením zložitých úloh na menšie, lepšie spravovateľné hooky môžete vytvoriť modulárnejšiu a organizovanejšiu kódovú základňu. Dodržiavaním osvedčených postupov uvedených v tomto článku môžete efektívne využiť kompozíciu vlastných hookov na budovanie robustných a škálovateľných React aplikácií. Nezabudnite vždy uprednostňovať jasnosť a jednoduchosť vo vašom kóde a nebojte sa experimentovať s rôznymi vzormi kompozície, aby ste našli to, čo najlepšie vyhovuje vašim špecifickým potrebám.