Kompozice vlastních React hooků: Zvládnutí abstrakce komplexní logiky

Vlastní React hooky jsou mocným nástrojem pro zapouzdření a znovupoužití stavové logiky ve vašich React aplikacích. Jak ale vaše aplikace rostou na složitosti, roste i logika uvnitř vašich vlastních hooků. To může vést k monolitickým hookům, které je obtížné pochopit, testovat a udržovat. Kompozice vlastních hooků nabízí řešení tohoto problému tím, že vám umožňuje rozložit komplexní logiku na menší, lépe spravovatelné a znovupoužitelné hooky.

Co je kompozice vlastních hooků?

Kompozice vlastních hooků je praxe kombinování několika menších vlastních hooků za účelem vytvoření komplexnější funkcionality. Místo toho, abyste vytvářeli jediný velký hook, který se stará o všechno, vytvoříte několik menších hooků, z nichž každý je zodpovědný za konkrétní aspekt logiky. Tyto menší hooky pak mohou být složeny dohromady k dosažení požadované funkcionality.

Představte si to jako stavění z LEGO kostek. Každá kostka (malý hook) má specifickou funkci a vy je kombinujete různými způsoby, abyste postavili složité struktury (větší funkce).

Výhody kompozice vlastních hooků

• Zlepšená znovupoužitelnost kódu: Menší, více zaměřené hooky jsou ze své podstaty lépe znovupoužitelné napříč různými komponentami a dokonce i různými projekty.
• Lepší udržovatelnost: Rozdělení komplexní logiky na menší, samostatné jednotky usnadňuje pochopení, ladění a úpravu kódu. Změny v jednom hooku s menší pravděpodobností ovlivní ostatní části vaší aplikace.
• Zvýšená testovatelnost: Menší hooky se snadněji testují izolovaně, což vede k robustnějšímu a spolehlivějšímu kódu.
• Lepší organizace kódu: Kompozice podporuje modulárnější a organizovanější kódovou základnu, což usnadňuje orientaci a pochopení vztahů mezi různými částmi vaší aplikace.
• Omezení duplikace kódu: Extrahováním společné logiky do znovupoužitelných hooků minimalizujete duplikaci kódu, což vede ke stručnější a udržitelnější kódové základně.

Kdy použít kompozici vlastních hooků

Měli byste zvážit použití kompozice vlastních hooků, když:

• Jeden vlastní hook se stává příliš velkým a složitým.
• Zjistíte, že duplikujete podobnou logiku ve více vlastních hoocích nebo komponentách.
• Chcete zlepšit testovatelnost vašich vlastních hooků.
• Chcete vytvořit modulárnější a znovupoužitelnou kódovou základnu.

Základní principy kompozice vlastních hooků

Zde jsou některé klíčové principy, které vás povedou při přístupu ke kompozici vlastních hooků:

• Princip jediné odpovědnosti (Single Responsibility Principle): Každý vlastní hook by měl mít jedinou, jasně definovanou odpovědnost. Díky tomu je snazší jej pochopit, testovat a znovu použít.
• Oddělení odpovědností (Separation of Concerns): Oddělte různé aspekty vaší logiky do různých hooků. Můžete mít například jeden hook pro načítání dat, další pro správu stavu a další pro zpracování vedlejších efektů.
• Skládatelnost (Composability): Navrhujte své hooky tak, aby je bylo možné snadno skládat s jinými hooky. To často zahrnuje vracení dat nebo funkcí, které mohou být použity jinými hooky.
• Pojmenovací konvence: Používejte jasné a popisné názvy pro své hooky, abyste naznačili jejich účel a funkčnost. Běžnou konvencí je prefixovat názvy hooků slovem `use`.

Běžné vzory kompozice

Existuje několik vzorů, které lze použít pro skládání vlastních hooků. Zde jsou některé z nejběžnějších:

1. Jednoduchá kompozice hooků

Toto je nejzákladnější forma kompozice, kde jeden hook jednoduše volá jiný hook a používá jeho návratovou hodnotu.

Příklad: Představte si, že máte hook pro načítání uživatelských dat a další pro formátování data. Tyto hooky můžete složit a vytvořit tak nový hook, který načte uživatelská data a zformátuje datum registrace uživatele.

            
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
              
            
          

Vysvětlení:

• useUserData načítá uživatelská data z API.
• useFormattedDate formátuje datový řetězec do uživatelsky přívětivého formátu. Elegantně zpracovává potenciální chyby při parsování data. Argument `undefined` v `toLocaleDateString` používá pro formátování lokální nastavení uživatele.
• useUserWithFormattedDate skládá oba hooky. Nejprve použije `useUserData` k načtení uživatelských dat. Poté, pokud jsou data k dispozici, použije `useFormattedDate` k formátování `registrationDate`. Nakonec vrátí původní uživatelská data spolu se zformátovaným datem, stavem načítání a případnými chybami.

2. Kompozice hooků se sdíleným stavem

V tomto vzoru sdílí a upravuje více hooků stejný stav. Toho lze dosáhnout pomocí `useContext` nebo předáváním stavu a setter funkcí mezi hooky.

Příklad: Představte si, že vytváříte vícekrokový formulář. Každý krok by mohl mít vlastní hook pro správu specifických vstupních polí a validační logiky daného kroku, ale všechny by sdílely společný stav formuláře spravovaný nadřazeným hookem pomocí `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
              
            
          

Vysvětlení:

• `FormContext` je vytvořen pomocí `createContext` k uložení stavu formuláře a dispatch funkce.
• `formReducer` spravuje aktualizace stavu formuláře pomocí `useReducer`. Akce jako `NEXT_STEP`, `PREVIOUS_STEP` a `UPDATE_FIELD` jsou definovány pro úpravu stavu.
• Komponenta `FormProvider` poskytuje kontext formuláře svým potomkům, čímž zpřístupňuje stav a dispatch všem krokům formuláře. Také odhaluje pomocné funkce `nextStep`, `previousStep` a `updateField` pro zjednodušení odesílání akcí.
• Hook `useFormContext` umožňuje komponentám přistupovat k hodnotám kontextu formuláře.
• Každý krok (`useStep1`, `useStep2`, `useStep3`) vytváří vlastní hook pro správu vstupů souvisejících s daným krokem a používá `useFormContext` k získání stavu a dispatch funkce pro jeho aktualizaci. Každý krok odhaluje pouze data a funkce relevantní pro daný krok, čímž dodržuje princip jediné odpovědnosti.

3. Kompozice hooků se správou životního cyklu

Tento vzor zahrnuje hooky, které spravují různé fáze životního cyklu komponenty, jako je připojení (mounting), aktualizace (updating) a odpojení (unmounting). Toho je často dosaženo použitím `useEffect` uvnitř složených hooků.

Příklad: Uvažujme komponentu, která potřebuje sledovat stav online/offline a také provést nějaký úklid při svém odpojení. Pro každý z těchto úkolů můžete vytvořit samostatné hooky a poté je složit.

            
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
              
            
          

Vysvětlení:

• useOnlineStatus sleduje stav online uživatele pomocí událostí `online` a `offline`. Hook `useEffect` nastaví posluchače událostí při připojení komponenty a uklidí je při jejím odpojení.
• useDocumentTitle aktualizuje titulek dokumentu. Při odpojení komponenty také vrátí titulek na výchozí hodnotu, čímž zajistí, že nezůstanou žádné přetrvávající problémy s titulkem.
• useAppLifecycle skládá oba hooky. Používá `useOnlineStatus` k určení, zda je uživatel online, a `useDocumentTitle` k nastavení titulku dokumentu. Kombinovaný hook vrací stav online.

Praktické příklady a případy použití

1. Internacionalizace (i18n)

Správa překladů a přepínání jazyků se může stát složitou. Můžete použít kompozici hooků k oddělení odpovědností:

• useLocale(): Spravuje aktuální jazykové nastavení (locale).
• useTranslations(): Načítá a poskytuje překlady pro aktuální jazykové nastavení.
• useTranslate(key): Hook, který přijímá klíč překladu a vrací přeložený řetězec, přičemž pro přístup k překladům používá hook `useTranslations`.

To vám umožní snadno přepínat jazyky a přistupovat k překladům v celé vaší aplikaci. Zvažte použití knihoven jako `i18next` spolu s vlastními hooky pro správu logiky překladu. Například `useTranslations` by mohl načítat překlady na základě zvoleného jazyka z JSON souborů v různých jazycích.

2. Validace formulářů

Složité formuláře často vyžadují rozsáhlou validaci. Můžete použít kompozici hooků k vytvoření znovupoužitelné validační logiky:

• useInput(initialValue): Spravuje stav jednoho vstupního pole.
• useValidator(value, rules): Validuje jedno vstupní pole na základě sady pravidel (např. povinné, e-mail, minimální délka).
• useForm(fields): Spravuje stav a validaci celého formuláře, přičemž skládá `useInput` a `useValidator` pro každé pole.

Tento přístup podporuje znovupoužitelnost kódu a usnadňuje přidávání nebo úpravu validačních pravidel. Knihovny jako Formik nebo React Hook Form poskytují hotová řešení, která však mohou být rozšířena o vlastní hooky pro specifické potřeby validace.

3. Načítání dat a cachování

Správa načítání dat, cachování a zpracování chyb může být zjednodušena pomocí kompozice hooků:

• useFetch(url): Načítá data z dané URL.
• useCache(key, fetchFunction): Cachuje výsledek fetch funkce pomocí klíče.
• useData(url, options): Kombinuje `useFetch` a `useCache` pro načítání dat a cachování výsledků.

To vám umožní snadno cachovat často přistupovaná data a zlepšit výkon. Knihovny jako SWR (Stale-While-Revalidate) a React Query poskytují výkonná řešení pro načítání dat a cachování, která mohou být rozšířena o vlastní hooky.

4. Autentizace

Zpracování autentizační logiky může být složité, zejména při práci s různými metodami autentizace (např. JWT, OAuth). Kompozice hooků může pomoci oddělit různé aspekty autentizačního procesu:

• useAuthToken(): Spravuje autentizační token (např. jeho ukládání a načítání z lokálního úložiště).
• useUser(): Načítá a poskytuje informace o aktuálním uživateli na základě autentizačního tokenu.
• useAuth(): Poskytuje funkce související s autentizací, jako je přihlášení, odhlášení a registrace, a skládá ostatní hooky.

Tento přístup vám umožňuje snadno přepínat mezi různými metodami autentizace nebo přidávat nové funkce do autentizačního procesu. Knihovny jako Auth0 a Firebase Authentication mohou být použity jako backend pro správu uživatelských účtů a autentizace a pro interakci s těmito službami lze vytvořit vlastní hooky.

Osvědčené postupy pro kompozici vlastních hooků

• Udržujte hooky zaměřené: Každý hook by měl mít jasný a specifický účel.
• Vyhněte se hlubokému vnořování: Omezte počet úrovní kompozice, abyste se vyhnuli obtížně srozumitelnému kódu. Pokud se hook stane příliš složitým, zvažte jeho další rozdělení.
• Dokumentujte své hooky: Poskytněte jasnou a stručnou dokumentaci pro každý hook, vysvětlující jeho účel, vstupy a výstupy. To je zvláště důležité pro hooky, které používají jiní vývojáři.
• Testujte své hooky: Pište jednotkové testy pro každý hook, abyste zajistili, že funguje správně. To je zvláště důležité pro hooky, které spravují stav nebo provádějí vedlejší efekty.
• Zvažte použití knihovny pro správu stavu: Pro složité scénáře správy stavu zvažte použití knihovny jako Redux, Zustand nebo Jotai. Tyto knihovny poskytují pokročilejší funkce pro správu stavu a mohou zjednodušit kompozici hooků.
• Myslete na zpracování chyb: Implementujte robustní zpracování chyb ve svých hoocích, abyste předešli neočekávanému chování. Zvažte použití bloků try-catch k zachycení chyb a poskytnutí informativních chybových hlášení.
• Zvažte výkon: Mějte na paměti dopady vašich hooků na výkon. Vyhněte se zbytečným překreslováním a optimalizujte svůj kód pro výkon. Používejte React.memo, useMemo a useCallback k optimalizaci výkonu tam, kde je to vhodné.

Závěr

Kompozice vlastních React hooků je výkonná technika pro abstrakci složité logiky a zlepšení znovupoužitelnosti, udržitelnosti a testovatelnosti kódu. Rozložením složitých úkolů na menší, lépe spravovatelné hooky můžete vytvořit modulárnější a organizovanější kódovou základnu. Dodržováním osvědčených postupů uvedených v tomto článku můžete efektivně využít kompozici vlastních hooků k vytváření robustních a škálovatelných React aplikací. Pamatujte, že ve svém kódu byste měli vždy upřednostňovat srozumitelnost a jednoduchost a nebojte se experimentovat s různými kompozičními vzory, abyste našli to, co nejlépe vyhovuje vašim specifickým potřebám.