Eesti

Õppige, kuidas kasutada Reacti kohandatud hooke komponentide loogika eraldamiseks ja korduvkasutamiseks, parandades koodi hooldatavust, testitavust ja üldist rakenduse arhitektuuri.

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:

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:

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:

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:

Üldised kaalutlused

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

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!