M

MLOG

Suomi

Opi hyödyntämään Reactin mukautettuja hookeja komponenttilogiikan erottamiseen ja uudelleenkäyttöön, mikä parantaa koodin ylläpidettävyyttä, testattavuutta ja yleistä sovellusarkkitehtuuria.

Reactin mukautetut hookit: Komponenttilogiikan erottaminen uudelleenkäyttöä varten

React-hookit ovat mullistaneet tavan, jolla kirjoitamme React-komponentteja, tarjoten tyylikkäämmän ja tehokkaamman tavan hallita tilaa ja sivuvaikutuksia. Saatavilla olevista hookeista mukautetut hookit erottuvat tehokkaana työkaluna komponenttilogiikan erottamiseen ja uudelleenkäyttöön. Tämä artikkeli tarjoaa kattavan oppaan Reactin mukautettujen hookien ymmärtämiseen ja toteuttamiseen, mikä auttaa sinua rakentamaan ylläpidettävämpiä, testattavampia ja skaalautuvampia sovelluksia.

Mitä ovat Reactin mukautetut hookit?

Pohjimmiltaan mukautettu hook on JavaScript-funktio, jonka nimi alkaa "use"-etuliitteellä ja joka voi kutsua muita hookeja. Sen avulla voit erottaa komponenttilogiikan uudelleenkäytettäviin funktioihin, mikä poistaa koodin päällekkäisyyden ja edistää puhtaampaa komponenttirakennetta. Toisin kuin tavalliset React-komponentit, mukautetut hookit eivät renderöi käyttöliittymää; ne yksinkertaisesti kapseloivat logiikkaa.

Ajattele niitä uudelleenkäytettävinä funktioina, jotka voivat käyttää Reactin tila- ja elinkaariominaisuuksia. Ne ovat loistava tapa jakaa tilallista logiikkaa eri komponenttien välillä turvautumatta korkeamman asteen komponentteihin tai renderöintipropsien käyttöön, jotka voivat usein johtaa koodiin, jota on vaikea lukea ja ylläpitää.

Miksi käyttää mukautettuja hookeja?

Mukautettujen hookien käytön edut ovat lukuisat:

Ensimmäisen mukautetun hookin luominen

Havainnollistetaan mukautetun hookin luomista ja käyttöä käytännön esimerkin avulla: datan hakeminen rajapinnasta.

Esimerkki: useFetch - Datanhakuhook

Kuvittele, että sinun on usein haettava dataa eri rajapinnoista React-sovelluksessasi. Sen sijaan, että toistaisit hakulogiikkaa jokaisessa komponentissa, voit luoda useFetch-hookin.


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;

Selitys:

useFetch-hookin käyttäminen komponentissa

Katsotaanpa nyt, miten tätä mukautettua hookia käytetään React-komponentissa:


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;

Selitys:

Kehittyneet mukautetut hook-mallit

Yksinkertaisen datan haun lisäksi mukautettuja hookeja voidaan käyttää monimutkaisemman logiikan kapseloimiseen. Tässä on muutamia kehittyneitä malleja:

1. Tilanhallinta useReducer-hookilla

Monimutkaisemmissa tilanhallintatilanteissa voit yhdistää mukautetut hookit useReducer-hookin kanssa. Tämän avulla voit hallita tilan muutoksia ennustettavammin ja organisoidummin.


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;

Käyttö:


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. Kontekstin integrointi useContext-hookilla

Mukautettuja hookeja voidaan käyttää myös React-kontekstiin pääsyn yksinkertaistamiseen. Sen sijaan, että käyttäisit useContext-hookia suoraan komponenteissasi, voit luoda mukautetun hookin, joka kapseloi kontekstin käyttölogiikan. 

import { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // Olettaen, että sinulla on ThemeContext

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

export default useTheme;

Käyttö:


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 ja Throttling

Debouncing ja throttling ovat tekniikoita, joita käytetään säätelemään, kuinka usein funktio suoritetaan. Mukautettuja hookeja voidaan käyttää tämän logiikan kapseloimiseen, jolloin näitä tekniikoita on helppo soveltaa tapahtumankäsittelijöihin.


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;

Käyttö:


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;

Parhaat käytännöt mukautettujen hookien kirjoittamiseen

Varmista, että mukautetut hookit ovat tehokkaita ja ylläpidettäviä, noudattamalla näitä parhaita käytäntöjä:

Globaalit huomioitavat asiat

Kun kehität sovelluksia globaalille yleisölle, pidä seuraavat asiat mielessä:

Esimerkki: Kansainvälistetty päivämäärän muotoilu mukautetulla hookilla


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;

Käyttö:


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;

Johtopäätös

Reactin mukautetut hookit ovat tehokas mekanismi komponenttilogiikan erottamiseen ja uudelleenkäyttöön. Hyödyntämällä mukautettuja hookeja voit kirjoittaa puhtaampaa, ylläpidettävämpää ja testattavampaa koodia. Kun tulet taitavammaksi Reactin kanssa, mukautettujen hookien hallitseminen parantaa merkittävästi kykyäsi rakentaa monimutkaisia ja skaalautuvia sovelluksia. Muista noudattaa parhaita käytäntöjä ja ottaa huomioon globaalit tekijät kehittäessäsi mukautettuja hookeja varmistaaksesi, että ne ovat tehokkaita ja saavutettavia monipuoliselle yleisölle. Hyödynnä mukautettujen hookien tehoa ja nosta React-kehitystaitojasi!