React Custom Hook-komposition: Bemästra komplex logikabstraktion

Anpassade React-hooks är ett kraftfullt verktyg för att kapsla in och återanvända stateful logik i dina React-applikationer. Men när dina applikationer växer i komplexitet, gör även logiken i dina anpassade hooks det. Detta kan leda till monolitiska hooks som är svåra att förstå, testa och underhålla. Komposition av anpassade hooks erbjuder en lösning på detta problem genom att låta dig bryta ner komplex logik i mindre, mer hanterbara och återanvändbara hooks.

Vad är komposition av anpassade hooks?

Komposition av anpassade hooks är praxis att kombinera flera mindre anpassade hooks för att skapa mer komplex funktionalitet. Istället för att skapa en enda, stor hook som hanterar allt, skapar du flera mindre hooks, var och en ansvarig för en specifik aspekt av logiken. Dessa mindre hooks kan sedan komponeras tillsammans för att uppnå den önskade funktionaliteten.

Tänk på det som att bygga med LEGO-klossar. Varje kloss (liten hook) har en specifik funktion, och du kombinerar dem på olika sätt för att konstruera komplexa strukturer (större funktioner).

Fördelar med komposition av anpassade hooks

• Förbättrad återanvändbarhet: Mindre, mer fokuserade hooks är i sig mer återanvändbara i olika komponenter och till och med olika projekt.
• Förenklat underhåll: Att bryta ner komplex logik i mindre, fristående enheter gör det enklare att förstå, felsöka och modifiera din kod. Ändringar i en hook är mindre benägna att påverka andra delar av din applikation.
• Ökad testbarhet: Mindre hooks är lättare att testa isolerat, vilket leder till mer robust och tillförlitlig kod.
• Bättre kodorganisation: Komposition uppmuntrar till en mer modulär och organiserad kodbas, vilket gör det lättare att navigera och förstå relationerna mellan olika delar av din applikation.
• Minskad kodduplicering: Genom att extrahera gemensam logik till återanvändbara hooks minimerar du kodduplicering, vilket leder till en mer koncis och underhållbar kodbas.

När ska man använda komposition av anpassade hooks

Du bör överväga att använda komposition av anpassade hooks när:

• En enskild anpassad hook blir för stor och komplex.
• Du upptäcker att du duplicerar liknande logik i flera anpassade hooks eller komponenter.
• Du vill förbättra testbarheten för dina anpassade hooks.
• Du vill skapa en mer modulär och återanvändbar kodbas.

Grundläggande principer för komposition av anpassade hooks

Här är några nyckelprinciper som kan vägleda din strategi för komposition av anpassade hooks:

• Single Responsibility Principle (Enkelt ansvarsprincipen): Varje anpassad hook bör ha ett enda, väldefinierat ansvar. Detta gör dem lättare att förstå, testa och återanvända.
• Separation of Concerns (Separering av ansvarsområden): Separera olika aspekter av din logik i olika hooks. Du kan till exempel ha en hook för att hämta data, en annan för att hantera state och en tredje för att hantera sidoeffekter.
• Komponerbarhet: Designa dina hooks så att de enkelt kan komponeras med andra hooks. Detta innebär ofta att returnera data eller funktioner som kan användas av andra hooks.
• Namngivningskonventioner: Använd tydliga och beskrivande namn för dina hooks för att indikera deras syfte och funktionalitet. En vanlig konvention är att prefixa hook-namn med `use`.

Vanliga kompositionsmönster

Flera mönster kan användas för att komponera anpassade hooks. Här är några av de vanligaste:

1. Enkel hook-komposition

Detta är den mest grundläggande formen av komposition, där en hook helt enkelt anropar en annan hook och använder dess returvärde.

Exempel: Föreställ dig att du har en hook för att hämta användardata och en annan för att formatera datum. Du kan komponera dessa hooks för att skapa en ny hook som hämtar användardata och formaterar användarens registreringsdatum.

            
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
              
            
          

Förklaring:

• useUserData hämtar användardata från ett API.
• useFormattedDate formaterar en datumsträng till ett användarvänligt format. Den hanterar potentiella fel vid datumtolkning på ett smidigt sätt. Argumentet `undefined` till `toLocaleDateString` använder användarens lokala inställningar för formatering.
• useUserWithFormattedDate komponerar båda hooks. Den använder först useUserData för att hämta användardata. Om data är tillgänglig använder den sedan useFormattedDate för att formatera registrationDate. Slutligen returnerar den den ursprungliga användardatan tillsammans med det formaterade datumet, laddningsstatus och eventuella fel.

2. Hook-komposition med delat state

I detta mönster delar och modifierar flera hooks samma state. Detta kan uppnås med hjälp av useContext eller genom att skicka state och setter-funktioner mellan hooks.

Exempel: Föreställ dig att du bygger ett flerstegsformulär. Varje steg kan ha sin egen hook för att hantera stegets specifika inmatningsfält och valideringslogik, men de delar alla ett gemensamt formulär-state som hanteras av en förälder-hook med hjälp av useReducer och useContext.

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

// Definiera det initiala state
const initialState = {
  step: 1,
  name: '',
  email: '',
  address: ''
};

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

// Skapa reducern
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;
  }
}

// Skapa kontexten
const FormContext = createContext();

// Skapa en provider-komponent
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}
    
  );
}

// Anpassad hook för att komma åt formulärkontexten
function useFormContext() {
  const context = useContext(FormContext);
  if (!context) {
    throw new Error('useFormContext must be used within a FormProvider');
  }
  return context;
}

// Anpassad hook för Steg 1
function useStep1() {
  const { state, updateField } = useFormContext();

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

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

// Anpassad hook för Steg 2
function useStep2() {
  const { state, updateField } = useFormContext();

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

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

// Anpassad hook för Steg 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
              
            
          

Förklaring:

• En FormContext skapas med createContext för att hålla formulärets state och dispatch-funktion.
• En formReducer hanterar uppdateringar av formulärets state med useReducer. Actions som NEXT_STEP, PREVIOUS_STEP och UPDATE_FIELD definieras för att modifiera state.
• FormProvider-komponenten tillhandahåller formulärkontexten till sina barn, vilket gör state och dispatch tillgängliga för alla steg i formuläret. Den exponerar också hjälpfunktioner för `nextStep`, `previousStep` och `updateField` för att förenkla anrop av actions.
• useFormContext-hooken låter komponenter komma åt värdena i formulärkontexten.
• Varje steg (useStep1, useStep2, useStep3) skapar sin egen hook för att hantera inmatning relaterad till sitt steg och använder useFormContext för att hämta state och dispatch-funktionen för att uppdatera det. Varje steg exponerar endast den data och de funktioner som är relevanta för det steget, i enlighet med enkelt ansvarsprincipen.

3. Hook-komposition med livscykelhantering

Detta mönster involverar hooks som hanterar olika faser av en komponents livscykel, såsom montering, uppdatering och avmontering. Detta uppnås ofta med hjälp av useEffect inom de komponerade hooks.

Exempel: Tänk dig en komponent som behöver spåra online/offline-status och även behöver utföra viss städning när den avmonteras. Du kan skapa separata hooks för var och en av dessa uppgifter och sedan komponera dem.

            
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'; // Återgå till en standardtitel vid avmontering
    };
  }, [title]);
}

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

  return isOnline; // Returnera online-status
}

export { useAppLifecycle, useOnlineStatus, useDocumentTitle };

            

              
                Copy
              
            
          

Förklaring:

• useOnlineStatus spårar användarens online-status med hjälp av online- och offline-händelserna. useEffect-hooken sätter upp händelselyssnare när komponenten monteras och städar upp dem när den avmonteras.
• useDocumentTitle uppdaterar dokumentets titel. Den återställer också titeln till ett standardvärde när komponenten avmonteras, vilket säkerställer att inga kvardröjande titelproblem uppstår.
• useAppLifecycle komponerar båda hooks. Den använder useOnlineStatus för att avgöra om användaren är online och useDocumentTitle för att sätta dokumentets titel. Den kombinerade hooken returnerar online-statusen.

Praktiska exempel och användningsfall

1. Internationalisering (i18n)

Att hantera översättningar och byte av språk kan bli komplext. Du kan använda hook-komposition för att separera ansvarsområden:

• useLocale(): Hanterar den aktuella språkinställningen (locale).
• useTranslations(): Hämtar och tillhandahåller översättningar för den aktuella språkinställningen.
• useTranslate(key): En hook som tar en översättningsnyckel och returnerar den översatta strängen, med hjälp av useTranslations-hooken för att komma åt översättningarna.

Detta gör att du enkelt kan byta språk och komma åt översättningar i hela din applikation. Överväg att använda bibliotek som i18next tillsammans med anpassade hooks för att hantera översättningslogiken. Till exempel kan useTranslations ladda översättningar baserat på det valda språket från JSON-filer på olika språk.

2. Formulärvalidering

Komplexa formulär kräver ofta omfattande validering. Du kan använda hook-komposition för att skapa återanvändbar valideringslogik:

• useInput(initialValue): Hanterar state för ett enskilt inmatningsfält.
• useValidator(value, rules): Validerar ett enskilt inmatningsfält baserat på en uppsättning regler (t.ex. obligatorisk, e-post, minLength).
• useForm(fields): Hanterar state och validering för hela formuläret, och komponerar useInput och useValidator för varje fält.

Detta tillvägagångssätt främjar återanvändbarhet av kod och gör det lättare att lägga till eller ändra valideringsregler. Bibliotek som Formik eller React Hook Form erbjuder färdiga lösningar men kan utökas med anpassade hooks för specifika valideringsbehov.

3. Datahämtning och cachning

Att hantera datahämtning, cachning och felhantering kan förenklas med hook-komposition:

• useFetch(url): Hämtar data från en given URL.
• useCache(key, fetchFunction): Cachar resultatet av en hämtningsfunktion med hjälp av en nyckel.
• useData(url, options): Kombinerar useFetch och useCache för att hämta data och cacha resultaten.

Detta gör att du enkelt kan cacha data som används ofta och förbättra prestandan. Bibliotek som SWR (Stale-While-Revalidate) och React Query erbjuder kraftfulla lösningar för datahämtning och cachning som kan utökas med anpassade hooks.

4. Autentisering

Att hantera autentiseringslogik kan vara komplext, särskilt när man hanterar olika autentiseringsmetoder (t.ex. JWT, OAuth). Hook-komposition kan hjälpa till att separera olika aspekter av autentiseringsprocessen:

• useAuthToken(): Hanterar autentiseringstoken (t.ex. lagra och hämta det från local storage).
• useUser(): Hämtar och tillhandahåller den aktuella användarens information baserat på autentiseringstoken.
• useAuth(): Tillhandahåller autentiseringsrelaterade funktioner som inloggning, utloggning och registrering, och komponerar de andra hooks.

Detta tillvägagångssätt gör att du enkelt kan byta mellan olika autentiseringsmetoder eller lägga till nya funktioner i autentiseringsprocessen. Bibliotek som Auth0 och Firebase Authentication kan användas som backend för att hantera användarkonton och autentisering, och anpassade hooks kan skapas för att interagera med dessa tjänster.

Bästa praxis för komposition av anpassade hooks

• Håll hooks fokuserade: Varje hook bör ha ett tydligt och specifikt syfte.
• Undvik djupt nästlade hooks: Begränsa antalet kompositionsnivåer för att undvika att göra din kod svår att förstå. Om en hook blir för komplex, överväg att bryta ner den ytterligare.
• Dokumentera dina hooks: Tillhandahåll tydlig och koncis dokumentation för varje hook, där du förklarar dess syfte, indata och utdata. Detta är särskilt viktigt för hooks som används av andra utvecklare.
• Testa dina hooks: Skriv enhetstester för varje hook för att säkerställa att den fungerar korrekt. Detta är särskilt viktigt för hooks som hanterar state eller utför sidoeffekter.
• Överväg att använda ett state-hanteringsbibliotek: För komplexa state-hanteringsscenarier, överväg att använda ett bibliotek som Redux, Zustand eller Jotai. Dessa bibliotek erbjuder mer avancerade funktioner för att hantera state och kan förenkla kompositionen av hooks.
• Tänk på felhantering: Implementera robust felhantering i dina hooks för att förhindra oväntat beteende. Överväg att använda try-catch-block för att fånga fel och ge informativa felmeddelanden.
• Tänk på prestanda: Var medveten om prestandakonsekvenserna av dina hooks. Undvik onödiga omrenderingar och optimera din kod för prestanda. Använd React.memo, useMemo och useCallback för att optimera prestanda där det är lämpligt.

Sammanfattning

Komposition av anpassade React-hooks är en kraftfull teknik för att abstrahera komplex logik och förbättra återanvändbarhet, underhållbarhet och testbarhet. Genom att bryta ner komplexa uppgifter i mindre, mer hanterbara hooks kan du skapa en mer modulär och organiserad kodbas. Genom att följa de bästa praxis som beskrivs i den här artikeln kan du effektivt utnyttja komposition av anpassade hooks för att bygga robusta och skalbara React-applikationer. Kom ihåg att alltid prioritera tydlighet och enkelhet i din kod, och var inte rädd för att experimentera med olika kompositionsmönster för att hitta det som fungerar bäst för dina specifika behov.