Pielāgotie Huki: Atkārtoti Izmantojami Loģikas Raksti React

React Huki radīja revolūciju veidā, kā mēs rakstām React komponentes, ieviešot stāvokļa (state) un dzīves cikla funkcijas funkcionālajās komponentēs. Starp daudzajām priekšrocībām, ko tie piedāvā, pielāgotie huki izceļas kā spēcīgs mehānisms loģikas izvilkšanai un atkārtotai izmantošanai vairākās komponentēs. Šajā bloga ierakstā mēs dziļi ienirsim pielāgoto huku pasaulē, izpētot to priekšrocības, izveidi un lietošanu ar praktiskiem piemēriem.

Kas ir Pielāgotie Huki?

Būtībā pielāgotais huks ir JavaScript funkcija, kas sākas ar vārdu "use" un var izsaukt citus hukus. Tie ļauj jums izvilkt komponentes loģiku atkārtoti izmantojamās funkcijās. Tas ir spēcīgs veids, kā koplietot stāvokli saturošu loģiku, blakusefektus vai citu sarežģītu uzvedību starp komponentēm, neizmantojot render props, augstākas kārtas komponentes (higher-order components) vai citus sarežģītus rakstus.

Pielāgoto Huku Galvenās Iezīmes:

Nosaukumu Veidošanas Konvencija: Pielāgotajiem hukiem jāsākas ar vārdu "use". Tas signalizē React, ka funkcija satur hukus un tai jāievēro huku noteikumi.
Atkārtota Izmantojamība: Galvenais mērķis ir iekapsulēt atkārtoti izmantojamu loģiku, padarot to viegli koplietojamu starp komponentēm.
Stāvokli Saturoša Loģika: Pielāgotie huki var pārvaldīt savu stāvokli, izmantojot useState huku, kas ļauj tiem iekapsulēt sarežģītu stāvokli saturošu uzvedību.
Blakusefekti: Tie var arī veikt blakusefektus, izmantojot useEffect huku, kas nodrošina integrāciju ar ārējiem API, datu ienesi un daudz ko citu.
Komponējamība: Pielāgotie huki var izsaukt citus hukus, ļaujot jums veidot sarežģītu loģiku, komponējot mazākus, mērķtiecīgākus hukus.

Pielāgoto Huku Izmantošanas Priekšrocības

Pielāgotie huki piedāvā vairākas būtiskas priekšrocības React izstrādē:

Koda Atkārtota Izmantošana: Visredzamākā priekšrocība ir spēja atkārtoti izmantot loģiku vairākās komponentēs. Tas samazina koda dublēšanos un veicina DRY (Don't Repeat Yourself) koda bāzi.
Uzlabota Lasāmība: Izvelkot sarežģītu loģiku atsevišķos pielāgotos hukos, jūsu komponentes kļūst tīrākas un vieglāk saprotamas. Galvenā komponentes loģika paliek koncentrēta uz UI renderēšanu.
Uzlabota Uzturēšana: Kad loģika ir iekapsulēta pielāgotos hukos, izmaiņas un kļūdu labojumus var veikt vienā vietā, samazinot risku ieviest kļūdas vairākās komponentēs.
Testējamība: Pielāgotos hukus var viegli testēt izolēti, nodrošinot, ka atkārtoti izmantojamā loģika darbojas pareizi neatkarīgi no komponentēm, kas to izmanto.
Vienkāršotas Komponentes: Pielāgotie huki palīdz sakārtot komponentes, padarot tās mazāk detalizētas un vairāk koncentrētas uz to galveno mērķi.

Sava Pirmā Pielāgotā Huka Izveide

Ilustrēsim pielāgota huka izveidi ar praktisku piemēru: huks, kas seko līdzi loga izmēram.

Piemērs: useWindowSize

Šis huks atgriezīs pašreizējo pārlūkprogrammas loga platumu un augstumu. Tas arī atjauninās šīs vērtības, kad logs tiks mainīts.

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener('resize', handleResize);

    // Noņem notikumu klausītāju tīrīšanas laikā
    return () => window.removeEventListener('resize', handleResize);
  }, []); // Tukšs masīvs nodrošina, ka efekts tiek palaists tikai pie montāžas

  return windowSize;
}

export default useWindowSize;

Paskaidrojums:

Importējiet Nepieciešamos Hukus: Mēs importējam useState un useEffect no React.
Definējiet Huku: Mēs izveidojam funkciju ar nosaukumu useWindowSize, ievērojot nosaukumu veidošanas konvenciju.
Inicializējiet Stāvokli: Mēs izmantojam useState, lai inicializētu windowSize stāvokli ar sākotnējo loga platumu un augstumu.
Iestatiet Notikumu Klausītāju: Mēs izmantojam useEffect, lai pievienotu loga izmēru maiņas notikumu klausītāju. Kad loga izmērs tiek mainīts, handleResize funkcija atjaunina windowSize stāvokli.
Tīrīšana: Mēs atgriežam tīrīšanas funkciju no useEffect, lai noņemtu notikumu klausītāju, kad komponente tiek demontēta. Tas novērš atmiņas noplūdes.
Atgriežamās Vērtības: Huks atgriež windowSize objektu, kas satur pašreizējo loga platumu un augstumu.

Pielāgotā Huka Izmantošana Komponentē

Tagad, kad esam izveidojuši savu pielāgoto huku, apskatīsim, kā to izmantot React komponentē.

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

function MyComponent() {
  const { width, height } = useWindowSize();

  return (
    
      Loga platums: {width}px
      Loga augstums: {height}px
    
  );
}

export default MyComponent;

Paskaidrojums:

Importējiet Huku: Mēs importējam useWindowSize pielāgoto huku.
Izsauciet Huku: Mēs izsaucam useWindowSize huku komponentes iekšienē.
Piekļūstiet Vērtībām: Mēs destrukturējam atgriezto objektu, lai iegūtu width un height vērtības.
Renderējiet Vērtības: Mēs renderējam platuma un augstuma vērtības komponentes UI.

Jebkura komponente, kas izmanto useWindowSize, automātiski atjaunināsies, mainoties loga izmēram.

Sarežģītāki Piemēri

Izpētīsim dažus sarežģītākus pielāgoto huku lietošanas gadījumus.

Piemērs: useLocalStorage

Šis huks ļauj jums viegli uzglabāt un izgūt datus no local storage.

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  // Stāvoklis mūsu vērtības glabāšanai
  // Nodod sākotnējo vērtību useState, lai loģika tiktu izpildīta tikai vienu reizi
  const [storedValue, setStoredValue] = useState(() => {
    try {
      // Iegūst no local storage pēc atslēgas
      const item = window.localStorage.getItem(key);
      // Parsē saglabāto json vai, ja tāda nav, atgriež initialValue
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // Ja kļūda, arī atgriež initialValue
      console.log(error);
      return initialValue;
    }
  });

  // Atgriež useState iestatīšanas funkcijas ietītu versiju, kas ...
  // ... saglabā jauno vērtību localStorage.
  const setValue = (value) => {
    try {
      // Atļauj vērtībai būt funkcijai, lai mums būtu tāds pats API kā useState
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      // Saglabāt local storage
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
      // Saglabāt stāvokli
      setStoredValue(valueToStore);
    } catch (error) {
      // Sarežģītāka implementācija apstrādātu kļūdas gadījumu
      console.log(error);
    }
  };

  useEffect(() => {
    try {
      const item = window.localStorage.getItem(key);
      setStoredValue(item ? JSON.parse(item) : initialValue);
    } catch (error) {
      console.log(error);
    }
  }, [key, initialValue]);

  return [storedValue, setValue];
}

export default useLocalStorage;

Lietošana:

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

function MyComponent() {
  const [name, setName] = useLocalStorage('name', 'Viesis');

  return (
    
      Sveiki, {name}!
       setName(e.target.value)}
      />
    
  );
}

export default MyComponent;

Piemērs: useFetch

Šis huks iekapsulē loģiku datu ienesei no API.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP kļūda! statuss: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

Lietošana:

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

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

  if (loading) return Ielādē...;
  if (error) return Kļūda: {error.message};

  return (
    
      Virsraksts: {data.title}
      Pabeigts: {data.completed ? 'Jā' : 'Nē'}
    
  );
}

export default MyComponent;

Labākās Prakses Pielāgotajiem Hukiem

Lai nodrošinātu, ka jūsu pielāgotie huki ir efektīvi un uzturami, ievērojiet šīs labākās prakses:

Saglabājiet tos mērķtiecīgus: Katram pielāgotajam hukam jābūt vienam, labi definētam mērķim. Izvairieties no pārāk sarežģītu huku veidošanas, kas cenšas darīt pārāk daudz.
Dokumentējiet savus hukus: Nodrošiniet skaidru un kodolīgu dokumentāciju katram pielāgotajam hukam, izskaidrojot tā mērķi, ievades datus un izvades datus.
Testējiet savus hukus: Rakstiet vienības testus (unit tests) saviem pielāgotajiem hukiem, lai nodrošinātu, ka tie darbojas pareizi un uzticami.
Izmantojiet aprakstošus nosaukumus: Izvēlieties aprakstošus nosaukumus saviem pielāgotajiem hukiem, kas skaidri norāda to mērķi.
Apstrādājiet kļūdas eleganti: Implementējiet kļūdu apstrādi savos pielāgotajos hukos, lai novērstu neparedzētu uzvedību un sniegtu informatīvus kļūdu paziņojumus.
Apsveriet atkārtotu izmantojamību: Izstrādājiet savus pielāgotos hukus, domājot par atkārtotu izmantojamību. Padariet tos pietiekami vispārīgus, lai tos varētu izmantot vairākās komponentēs.
Izvairieties no pārmērīgas abstrakcijas: Neveidojiet pielāgotos hukus vienkāršai loģikai, ko var viegli pārvaldīt komponentes iekšienē. Izvelciet tikai to loģiku, kas ir patiesi atkārtoti izmantojama un sarežģīta.

Biežākās Kļūdas, no Kurām Izvairīties

Huku noteikumu pārkāpšana: Vienmēr izsauciet hukus sava pielāgotā huka funkcijas augstākajā līmenī un izsauciet tos tikai no React funkciju komponentēm vai citiem pielāgotajiem hukiem.
Atkarību ignorēšana useEffect: Pārliecinieties, ka iekļaujat visas nepieciešamās atkarības useEffect huka atkarību masīvā, lai novērstu novecojušus noslēgumus (stale closures) un neparedzētu uzvedību.
Bezgalīgu cilpu izveide: Esiet piesardzīgi, atjauninot stāvokli useEffect huka iekšienē, jo tas var viegli novest pie bezgalīgām cilpām. Pārliecinieties, ka atjauninājums ir nosacīts un balstīts uz atkarību izmaiņām.
Aizmirstot par tīrīšanu: Vienmēr iekļaujiet tīrīšanas funkciju useEffect, lai noņemtu notikumu klausītājus, atceltu abonementus un veiktu citus tīrīšanas uzdevumus, lai novērstu atmiņas noplūdes.

Sarežģītāki Raksti

Pielāgoto Huku Komponēšana

Pielāgotos hukus var komponēt kopā, lai radītu sarežģītāku loģiku. Piemēram, jūs varētu apvienot useLocalStorage huku ar useFetch huku, lai automātiski saglabātu ienestos datus local storage.

Loģikas Koplietošana Starp Hukiem

Ja vairākiem pielāgotajiem hukiem ir kopīga loģika, jūs varat izvilkt šo loģiku atsevišķā palīgfunkcijā un atkārtoti izmantot to abos hukos.

Konteksta Izmantošana ar Pielāgotajiem Hukiem

Pielāgotos hukus var izmantot kopā ar React Context, lai piekļūtu globālajam stāvoklim un to atjauninātu. Tas ļauj jums izveidot atkārtoti izmantojamas komponentes, kas ir informētas par lietojumprogrammas globālo stāvokli un var ar to mijiedarboties.

Piemēri no Reālās Pasaules

Šeit ir daži piemēri, kā pielāgotos hukus var izmantot reālās pasaules lietojumprogrammās:

Formu Validācija: Izveidojiet useForm huku, lai pārvaldītu formas stāvokli, validāciju un iesniegšanu.
Autentifikācija: Implementējiet useAuth huku, lai pārvaldītu lietotāja autentifikāciju un autorizāciju.
Tēmu Pārvaldība: Izstrādājiet useTheme huku, lai pārslēgtos starp dažādām tēmām (gaiša, tumša utt.).
Ģeolokācija: Izveidojiet useGeolocation huku, lai sekotu līdzi lietotāja pašreizējai atrašanās vietai.
Ritināšanas Noteikšana: Izveidojiet useScroll huku, lai noteiktu, kad lietotājs ir ritinājis līdz noteiktam punktam lapā.

Piemērs: useGeolocation huks starpkultūru lietojumprogrammām, piemēram, kartēšanas vai piegādes pakalpojumiem

import { useState, useEffect } from 'react';

function useGeolocation() {
  const [location, setLocation] = useState({
    latitude: null,
    longitude: null,
    error: null,
  });

  useEffect(() => {
    if (!navigator.geolocation) {
      setLocation({
        latitude: null,
        longitude: null,
        error: 'Šī pārlūkprogramma neatbalsta ģeolokāciju.',
      });
      return;
    }

    const watchId = navigator.geolocation.watchPosition(
      (position) => {
        setLocation({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          error: null,
        });
      },
      (error) => {
        setLocation({
          latitude: null,
          longitude: null,
          error: error.message,
        });
      }
    );

    return () => navigator.geolocation.clearWatch(watchId);
  }, []);

  return location;
}

export default useGeolocation;

Nobeigums

Pielāgotie huki ir spēcīgs rīks tīrāka, atkārtoti izmantojama un vieglāk uzturama React koda rakstīšanai. Iekapsulējot sarežģītu loģiku pielāgotos hukos, jūs varat vienkāršot savas komponentes, samazināt koda dublēšanos un uzlabot savu lietojumprogrammu kopējo struktūru. Pieņemiet pielāgotos hukus un atklājiet to potenciālu, lai veidotu stabilākas un mērogojamākas React lietojumprogrammas.

Sāciet, identificējot vietas savā esošajā koda bāzē, kur loģika tiek atkārtota vairākās komponentēs. Pēc tam pārveidojiet šo loģiku pielāgotos hukos. Laika gaitā jūs izveidosiet atkārtoti izmantojamu huku bibliotēku, kas paātrinās jūsu izstrādes procesu un uzlabos jūsu koda kvalitāti.

Atcerieties ievērot labākās prakses, izvairīties no biežākajām kļūdām un izpētīt sarežģītākus rakstus, lai maksimāli izmantotu pielāgotos hukus. Ar praksi un pieredzi jūs kļūsiet par pielāgoto huku meistaru un efektīvāku React izstrādātāju.