Reacti kohandatud hookid: Komponentide loogika korduvkasutuseks eraldamine

Reacti hookid on muutnud viisi, kuidas me Reacti komponente kirjutame, pakkudes elegantsemat ja tõhusamat viisi oleku ja kõrvalmõjude haldamiseks. Erinevate saadaolevate hookide hulgas paistavad kohandatud hookid silma kui võimas tööriist komponentide loogika eraldamiseks ja korduvkasutamiseks. See artikkel pakub põhjalikku juhendit Reacti kohandatud hookide mõistmiseks ja rakendamiseks, võimaldades teil luua hooldatavamaid, testitavamaid ja skaleeritavamaid rakendusi.

Mis on Reacti kohandatud hookid?

Sisuliselt on kohandatud hook JavaScripti funktsioon, mille nimi algab "use" ja mis võib kutsuda teisi hooke. See võimaldab teil komponentide loogikat eraldada korduvkasutatavatesse funktsioonidesse, välistades seeläbi koodi dubleerimise ja edendades puhtamat komponentide struktuuri. Erinevalt tavalistest Reacti komponentidest ei renderda kohandatud hookid ühtegi kasutajaliidest; nad lihtsalt kapseldavad loogikat.

Mõelge neile kui korduvkasutatavatele funktsioonidele, mis pääsevad juurde Reacti oleku- ja elutsükli funktsioonidele. Need on fantastiline viis olekupõhise loogika jagamiseks erinevate komponentide vahel, ilma et peaksite kasutama kõrgema järgu komponente või renderdama atribuute, mis võivad sageli viia raskesti loetava ja hooldatava koodini.

Miks kasutada kohandatud hooke?

Kohandatud hookide kasutamise eelised on arvukad:

• Korduvkasutatavus: Kirjutage loogika üks kord ja kasutage seda mitmes komponendis. See vähendab oluliselt koodi dubleerimist ja muudab teie rakenduse hooldatavamaks.
• Parem koodikorraldus: Kompleksse loogika eraldamine kohandatud hookidesse puhastab teie komponendid, muutes need lihtsamini loetavaks ja mõistetavaks. Komponendid muutuvad rohkem keskendunuks oma peamistele renderdamiskohustustele.
• Parem testitavus: Kohandatud hooke on lihtne eraldi testida. Saate hooki loogikat testida ilma komponenti renderdamata, mis viib robustsemate ja usaldusväärsemate testideni.
• Suurem hooldatavus: Kui loogika muutub, peate seda värskendama ainult ühes kohas – kohandatud hookis – selle asemel igas komponendis, kus seda kasutatakse.
• Vähem tüüpilist koodi: Kohandatud hookid võivad kapseldada levinud mustrid ja korduvad ülesanded, vähendades teie komponentides kirjutatava tüüpilise koodi hulka.

Teie esimese kohandatud hooki loomine

Illustreerime kohandatud hooki loomist ja kasutamist praktilise näitega: andmete hankimine API-st.

Näide: useFetch - Andmete hankimise hook

Kujutage ette, et peate oma Reacti rakenduses sageli hankima andmeid erinevatest API-dest. Selle asemel, et hankimisloogikat igas komponendis korrata, saate luua useFetch hooki.

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;

Selgitus:

• Oleku muutujad: Hook kasutab andmete, laadimise oleku ja veao oleku haldamiseks useState.
• useEffect: useEffect hook teostab andmete hankimise, kui url atribuut muutub.
• Veatöötlus: Hook sisaldab veatöötlust, et püüda võimalikke vigu hankimisoperatsiooni ajal. Vastuse edu tagamiseks kontrollitakse olekukoodi.
• Laadimise olek: loading olekut kasutatakse näitamaks, kas andmeid veel hankitakse.
• AbortController: Kasutab AbortController API-t, et tühistada hankimispäring, kui komponent demonteeritakse või URL muutub. See hoiab ära mälu lekke.
• Tagastusväärtus: Hook tagastab objekti, mis sisaldab data, loading ja error olekuid.

useFetch hooki kasutamine komponendis

Nüüd vaatame, kuidas seda kohandatud hooki Reacti komponendis kasutada:

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;

Selgitus:

• Komponent impordib useFetch hooki.
• See kutsub hooki koos API URL-iga.
• See dekonstrueerib tagastatud objekti, et saada juurdepääs data (nimeliselt users), loading ja error olekutele.
• See renderdab tinglikult erinevat sisu loading ja error olekute põhjal.
• Kui andmed on saadaval, renderdab see kasutajate loendi.

Kohandatud hookide täiustatud mustrid

Lihtsast andmete hankimisest kaugemale võib kohandatud hooke kasutada keerulisema loogika kapseldamiseks. Siin on mõned täiustatud mustrid:

1. Olekuhaldus useReducer abil

Keerukamate olekuhaldusskenaariumide jaoks saate kombineerida kohandatud hooke useReduceriga. See võimaldab teil oleku üleminekuid hallata prognoositavamal ja organiseeritumal viisil.

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;

Kasutamine:

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;

2. Konteksti integreerimine useContext abil

Kohandatud hooke saab kasutada ka React Contexti juurdepääsu lihtsustamiseks. Selle asemel, et kasutada useContext otse oma komponentides, saate luua kohandatud hooki, mis kapseldab konteksti juurdepääsu loogika.

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

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

export default useTheme;

Kasutamine:

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;

3. Viivitus (Debouncing) ja kitsendus (Throttling)

Viivitus ja kitsendus on tehnikad, mida kasutatakse funktsiooni käivitamise kiiruse kontrollimiseks. Kohandatud hooke saab kasutada selle loogika kapseldamiseks, muutes nende tehnikate rakendamise sündmuste käsitsejatele lihtsaks.

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;

Kasutamine:

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;

Parimad tavad kohandatud hookide kirjutamiseks

Selleks, et teie kohandatud hookid oleksid tõhusad ja hooldatavad, järgige neid parimaid praktikaid:

• Alustage "use"-ga: Nimetage oma kohandatud hookid alati prefiksiga "use". See konventsioon annab Reactile teada, et funktsioon järgib hookide reegleid ja seda saab kasutada funktsionaalsetes komponentides.
• Hoidke see fookustatud: Igal kohandatud hookil peaks olema selge ja konkreetne eesmärk. Vältige ülemäära keeruliste hookide loomist, mis tegelevad liiga paljude kohustustega.
• Tagastage kasulikud väärtused: Tagastage objekt, mis sisaldab kõiki väärtusi ja funktsioone, mida hooki kasutav komponent vajab. See muudab hooki paindlikumaks ja korduvkasutatavamaks.
• Töötle vigu oskuslikult: Lisage oma kohandatud hookidesse veatöötlus, et vältida komponentide ootamatut käitumist.
• Kaaluge koristamist: Kasutage useEffectis puhastusfunktsiooni, et vältida mälu lekkeid ja tagada nõuetekohane ressursside haldamine. See on eriti oluline, kui tegelete tellimuste, taimerite või sündmuste kuulajatega.
• Kirjutage teste: Testige oma kohandatud hooke põhjalikult eraldi, et tagada nende ootuspärane käitumine.
• Dokumenteerige oma hookid: Pakkuge oma kohandatud hookidele selget dokumentatsiooni, selgitades nende eesmärki, kasutamist ja võimalikke piiranguid.

Üldised kaalutlused

Kui arendate rakendusi globaalsele publikule, pidage meeles järgmist:

• Rahvusvahelised tunnustused (i18n) ja lokaliseerimine (l10n): Kui teie kohandatud hook tegeleb kasutajale suunatud tekstide või andmetega, kaaluge, kuidas seda rahvusvaheliselt tunnustatakse ja lokaliseeritakse erinevate keelte ja piirkondade jaoks. See võib hõlmata sellise teegi kasutamist nagu react-intl või i18next.
• Kuupäeva ja kellaaja vorming: Olge teadlik erinevatest kuupäeva- ja kellaajavormingutest, mida kogu maailmas kasutatakse. Kasutage sobivaid vormindamisfunktsioone või teeke, et tagada kuupäevade ja kellaaegade korrektne kuvamine igale kasutajale.
• Valuuta vorming: Samamoodi töödelge valuuta vormindamist vastavalt erinevatele piirkondadele.
• Juurdepääsetavus (a11y): Veenduge, et teie kohandatud hookid ei mõjutaks negatiivselt teie rakenduse juurdepääsetavust. Kaaluge kasutajaid, kellel on puue, ja järgige juurdepääsetavuse parimaid praktikaid.
• Jõudlus: Olge teadlik oma kohandatud hookide potentsiaalsetest jõudlusmõjudest, eriti kui tegelete keeruka loogika või suurte andmekogumitega. Optimeerige oma koodi, et tagada selle hea jõudlus erinevates asukohtades erineva võrgukiirusega kasutajate jaoks.

Näide: Rahvusvaheliselt tunnustatud kuupäeva vormindamine kohandatud hookiga

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;

Kasutamine:

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;

Kokkuvõte

Reacti kohandatud hookid on võimas mehhanism komponentide loogika eraldamiseks ja korduvkasutamiseks. Kohandatud hooke kasutades saate kirjutada puhtamat, hooldatavamat ja testitavamat koodi. Kui saate Reactiga üha enam tuttavaks, parandab kohandatud hookide omandamine teie võimet luua keerukaid ja skaleeritavaid rakendusi. Pidage meeles, et järgige parimaid praktikaid ja kaaluge globaalseid tegureid kohandatud hookide väljatöötamisel, et tagada nende tõhusus ja kättesaadavus mitmekesise publiku jaoks. Võtke omaks kohandatud hookide jõud ja tõstke oma Reacti arendusoskusi!