M

MLOG

Slovenščina

Naučite se, kako izkoristiti React custom hooke za ekstrahiranje in ponovno uporabo logike komponent, izboljšanje vzdržljivosti kode in arhitekture aplikacije.

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:

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;

Pojasnilo:

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;

Pojasnilo:

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;

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;

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;

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;

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;

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;

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:

Globalni premisleki

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

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;

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;

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!