React Custom Hooks: Ekstrahiranje logike komponent za ponovno uporabo

React hooki so revolucionirali način pisanja React komponent in ponujajo bolj eleganten in učinkovit način upravljanja stanja in stranskih učinkov. Med različnimi razpoložljivimi hooki izstopajo custom hooki kot zmogljivo orodje za ekstrahiranje in ponovno uporabo logike komponent. Ta članek predstavlja celovit vodnik za razumevanje in implementacijo React custom hookov, ki vam omogoča, da ustvarjate bolj vzdržljive, testirljive in prilagodljive aplikacije.

Kaj so React Custom Hooki?

V bistvu je custom hook funkcija JavaScript, katere ime se začne z "use" in lahko kliče druge hooke. Omogoča vam ekstrahiranje logike komponent v funkcije za ponovno uporabo, s čimer odpravljate podvajanje kode in spodbujate čistejšo strukturo komponente. Za razliko od običajnih React komponent custom hooki ne upodabljajo nobenega uporabniškega vmesnika; preprosto inkapsulirajo logiko.

Pomislite nanje kot na funkcije za ponovno uporabo, ki lahko dostopajo do React stanja in funkcij življenjskega cikla. So fantastičen način za delitev logike, ki temelji na stanju, med različnimi komponentami, ne da bi se zatekali k komponentam višjega reda ali render propsom, kar lahko pogosto privede do kode, ki jo je težko brati in vzdrževati.

Zakaj uporabljati Custom Hooke?

Prednosti uporabe custom hookov so številne:

• Ponovna uporaba: Pišite logiko enkrat in jo ponovno uporabite v več komponentah. To znatno zmanjša podvajanje kode in naredi vašo aplikacijo bolj vzdržljivo.
• Izboljšana organizacija kode: Ekstrahiranje kompleksne logike v custom hooke očisti vaše komponente, zaradi česar jih je lažje brati in razumeti. Komponente postanejo bolj osredotočene na svoje osnovne odgovornosti za upodabljanje.
• Izboljšana testirljivost: Custom hooke je enostavno testirati v izolaciji. Lahko testirate logiko hooka, ne da bi upodabljali komponento, kar vodi do bolj robustnih in zanesljivih testov.
• Povečana vzdržljivost: Ko se logika spremeni, jo morate posodobiti samo na enem mestu – custom hooku – namesto v vsaki komponenti, kjer se uporablja.
• Zmanjšanje predloge: Custom hooki lahko inkapsulirajo pogoste vzorce in ponavljajoče se naloge, kar zmanjša količino predloge kode, ki jo morate napisati v svojih komponentah.

Ustvarjanje vašega prvega Custom Hooka

Poglejmo, kako ustvarjati in uporabljati custom hook z praktičnim primerom: pridobivanje podatkov iz API-ja.

Primer: useFetch - Hook za pridobivanje podatkov

Predstavljajte si, da morate v svoji aplikaciji React pogosto pridobivati ​​podatke iz različnih API-jev. Namesto da ponavljate logiko pridobivanja v vsaki komponenti, lahko ustvarite hook useFetch.

            
import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url, { signal: signal });
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setError(null); // Clear any previous errors
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          setError(error);
        }
        setData(null); // Clear any previous data
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      abortController.abort(); // Cleanup function to abort the fetch on unmount or URL change
    };
  }, [url]); // Re-run effect when the URL changes

  return { data, loading, error };
}

export default useFetch;

            

              
                Copy
              
            
          

Pojasnilo:

• Spremenljivke stanja: Hook uporablja useState za upravljanje podatkov, stanja nalaganja in stanja napake.
• useEffect: Hook useEffect izvede pridobivanje podatkov, ko se spremeni prop url.
• Obravnava napak: Hook vključuje obravnavo napak za zajemanje morebitnih napak med operacijo pridobivanja. Preverja se koda stanja, da se zagotovi, da je odgovor uspešen.
• Stanje nalaganja: Stanje loading se uporablja za označevanje, ali se podatki še vedno pridobivajo.
• AbortController: Uporablja API AbortController za preklic zahteve za pridobivanje, če se komponenta odmontira ali se spremeni URL. To preprečuje uhajanje spomina.
• Povratna vrednost: Hook vrne objekt, ki vsebuje stanja data, loading in error.

Uporaba hooka useFetch v komponenti

Poglejmo zdaj, kako uporabiti ta custom hook v komponenti React:

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

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

  if (loading) return <p>Loading users...</p>;
  if (error) return <p>Error: {error.message}</p>;
  if (!users) return <p>No users found.</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
}

export default UserList;

            

              
                Copy
              
            
          

Pojasnilo:

• Komponenta uvozi hook useFetch.
• Pokliče hook z URL-jem API-ja.
• Destrukturira vrnjeni objekt za dostop do stanj data (preimenovan v users), loading in error.
• Pogojno upodablja različne vsebine glede na stanja loading in error.
• Če so podatki na voljo, upodobi seznam uporabnikov.

Napredni vzorci Custom Hookov

Poleg preprostega pridobivanja podatkov se lahko custom hooki uporabijo za inkapsulacijo bolj kompleksne logike. Tukaj je nekaj naprednih vzorcev:

1. Upravljanje stanja z useReducer

Za bolj kompleksne scenarije upravljanja stanja lahko custom hooke kombinirate z useReducer. To vam omogoča upravljanje prehodov stanja na bolj predvidljiv in organiziran način.

            
import { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function useCounter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement' });

  return { count: state.count, increment, decrement };
}

export default useCounter;

            

              
                Copy
              
            
          

Uporaba:

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

function Counter() {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

2. Integracija konteksta z useContext

Custom hooke lahko uporabite tudi za poenostavitev dostopa do React Contexta. Namesto da bi v svojih komponentah neposredno uporabljali useContext, lahko ustvarite custom hook, ki inkapsulira logiko dostopa do konteksta.

            
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // Assuming you have a ThemeContext

function useTheme() {
  return useContext(ThemeContext);
}

export default useTheme;

            

              
                Copy
              
            
          

Uporaba:

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

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div style={{ backgroundColor: theme.background, color: theme.color }}>
      <p>This is my component.</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

3. Debouncing in Throttling

Debouncing in throttling sta tehniki, ki se uporabljajo za nadzor hitrosti izvajanja funkcije. Custom hooke lahko uporabite za inkapsulacijo te logike, kar olajša uporabo teh tehnik pri upravljavcih dogodkov.

            
import { useState, useEffect, useRef } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

            

              
                Copy
              
            
          

Uporaba:

            
import React, { useState } from 'react';
import useDebounce from './useDebounce';

function SearchInput() {
  const [searchValue, setSearchValue] = useState('');
  const debouncedSearchValue = useDebounce(searchValue, 500); // Debounce for 500ms

  useEffect(() => {
    // Perform search with debouncedSearchValue
    console.log('Searching for:', debouncedSearchValue);
    // Replace console.log with your actual search logic
  }, [debouncedSearchValue]);

  const handleChange = (event) => {
    setSearchValue(event.target.value);
  };

  return (
    <input
      type="text"
      value={searchValue}
      onChange={handleChange}
      placeholder="Search..."
    />
  );
}

export default SearchInput;

            

              
                Copy
              
            
          

Najboljše prakse za pisanje Custom Hookov

Če želite zagotoviti, da so vaši custom hooki učinkoviti in vzdržljivi, upoštevajte te najboljše prakse:

• Začnite z "use": Custom hooke vedno poimenujte s predpono "use". Ta konvencija signalizira Reactu, da funkcija sledi pravilom hookov in jo je mogoče uporabiti znotraj funkcijskih komponent.
• Naj bo osredotočen: Vsak custom hook bi moral imeti jasen in specifičen namen. Izogibajte se ustvarjanju preveč zapletenih hookov, ki obravnavajo preveč odgovornosti.
• Vračajte uporabne vrednosti: Vrnite objekt, ki vsebuje vse vrednosti in funkcije, ki jih komponenta, ki uporablja hook, potrebuje. To naredi hook bolj prilagodljiv in ponovno uporaben.
• Obravnavajte napake graciozno: Vključite obravnavo napak v svoje custom hooke, da preprečite nepričakovano vedenje v svojih komponentah.
• Razmislite o čiščenju: Uporabite funkcijo čiščenja v useEffect, da preprečite uhajanje spomina in zagotovite pravilno upravljanje virov. To je še posebej pomembno pri delu z naročninami, časovniki ali poslušalci dogodkov.
• Zapišite teste: Temeljito testirajte svoje custom hooke v izolaciji, da zagotovite, da se obnašajo, kot je pričakovano.
• Dokumentirajte svoje hooke: Zagotovite jasno dokumentacijo za svoje custom hooke, ki pojasnjuje njihov namen, uporabo in morebitne omejitve.

Globalni premisleki

Pri razvoju aplikacij za globalno občinstvo imejte v mislih naslednje:

• Internacionalizacija (i18n) in lokalizacija (l10n): Če vaš custom hook obravnava besedilo ali podatke, ki jih vidi uporabnik, razmislite, kako bo internacionaliziran in lokaliziran za različne jezike in regije. To lahko vključuje uporabo knjižnice, kot je react-intl ali i18next.
• Formatiranje datuma in časa: Bodite pozorni na različne formate datuma in časa, ki se uporabljajo po vsem svetu. Uporabite ustrezne funkcije ali knjižnice za formatiranje, da zagotovite pravilno prikazovanje datumov in časov za vsakega uporabnika.
• Formatiranje valut: Podobno ustrezno obravnavajte formatiranje valut za različne regije.
• Dostopnost (a11y): Zagotovite, da vaši custom hooki ne vplivajo negativno na dostopnost vaše aplikacije. Upoštevajte uporabnike s posebnimi potrebami in upoštevajte najboljše prakse dostopnosti.
• Zmogljivost: Zavedajte se morebitnih posledic zmogljivosti vaših custom hookov, zlasti pri delu s kompleksno logiko ali velikimi nabori podatkov. Optimizirajte svojo kodo, da zagotovite dobro delovanje za uporabnike na različnih lokacijah z različnimi hitrostmi omrežja.

Primer: Internacionalizirano formatiranje datuma s Custom Hookom

            
import { useState, useEffect } from 'react';
import { DateTimeFormat } from 'intl';

function useFormattedDate(date, locale) {
  const [formattedDate, setFormattedDate] = useState('');

  useEffect(() => {
    try {
      const formatter = new DateTimeFormat(locale, {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      });
      setFormattedDate(formatter.format(date));
    } catch (error) {
      console.error('Error formatting date:', error);
      setFormattedDate('Invalid Date');
    }
  }, [date, locale]);

  return formattedDate;
}

export default useFormattedDate;

            

              
                Copy
              
            
          

Uporaba:

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

function MyComponent() {
  const today = new Date();
  const enDate = useFormattedDate(today, 'en-US');
  const frDate = useFormattedDate(today, 'fr-FR');
  const deDate = useFormattedDate(today, 'de-DE');

  return (
    <div>
      <p>US Date: {enDate}</p>
      <p>French Date: {frDate}</p>
      <p>German Date: {deDate}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Zaključek

React custom hooki so zmogljiv mehanizem za ekstrahiranje in ponovno uporabo logike komponent. Z izkoriščanjem custom hookov lahko pišete čistejšo, bolj vzdržljivo in testirljivo kodo. Ko boste postali bolj vešči Reacta, bo obvladovanje custom hookov znatno izboljšalo vašo sposobnost ustvarjanja kompleksnih in prilagodljivih aplikacij. Ne pozabite upoštevati najboljših praks in upoštevati globalnih dejavnikov pri razvoju custom hookov, da zagotovite, da so učinkoviti in dostopni za raznoliko občinstvo. Sprejmite moč custom hookov in dvignite svoje veščine razvoja React!