M

MLOG

Lietuvių

Atskleiskite daugkartinio naudojimo logikos galią savo „React“ programose su pasirinktiniais kabliukais. Sužinokite, kaip juos kurti ir naudoti švaresniam kodui.

Pasirinktiniai kabliukai (Custom Hooks): Daugkartinio naudojimo logikos šablonai „React“

„React“ kabliukai (Hooks) sukėlė revoliuciją funkcinių komponentų rašymo būde, įdiegdami būsenos ir gyvavimo ciklo funkcijas. Tarp daugybės jų teikiamų privalumų, pasirinktiniai kabliukai išsiskiria kaip galingas mechanizmas logikai išgauti ir pakartotinai naudoti keliuose komponentuose. Šiame tinklaraščio įraše pasinersime į pasirinktinių kabliukų pasaulį, nagrinėsime jų privalumus, kūrimą ir naudojimą su praktiniais pavyzdžiais.

Kas yra pasirinktiniai kabliukai?

Iš esmės, pasirinktinis kabliukas (custom hook) yra „JavaScript“ funkcija, kuri prasideda žodžiu „use“ ir gali kviesti kitus kabliukus. Jie leidžia iškelti komponento logiką į daugkartinio naudojimo funkcijas. Tai galingas būdas dalytis būseną turinčia logika, šalutiniais poveikiais ar kitokiu sudėtingu elgesiu tarp komponentų, nesinaudojant atvaizdavimo savybėmis (render props), aukštesnės eilės komponentais (higher-order components) ar kitais sudėtingais šablonais.

Pagrindinės pasirinktinių kabliukų savybės:

Pasirinktinių kabliukų naudojimo privalumai

Pasirinktiniai kabliukai siūlo keletą reikšmingų privalumų „React“ kūrime:

Pirmojo pasirinktinio kabliuko kūrimas

Iliustruokime pasirinktinio kabliuko kūrimą praktiniu pavyzdžiu: kabliuku, kuris seka lango dydį.

Pavyzdys: useWindowSize

Šis kabliukas grąžins dabartinį naršyklės lango plotį ir aukštį. Jis taip pat atnaujins šias vertes, kai lango dydis bus pakeistas.

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);

    // Išvalant pašalinti įvykio klausytoją
    return () => window.removeEventListener('resize', handleResize);
  }, []); // Tuščias masyvas užtikrina, kad efektas bus paleistas tik prijungus komponentą

  return windowSize;
}

export default useWindowSize;

Paaiškinimas:

  1. Būtinų kabliukų importavimas: Importuojame useState ir useEffect iš „React“.
  2. Kabliuko apibrėžimas: Sukuriame funkciją pavadinimu useWindowSize, laikydamiesi pavadinimų taisyklės.
  3. Būsenos inicializavimas: Naudojame useState, kad inicializuotume windowSize būseną su pradiniu lango pločiu ir aukščiu.
  4. Įvykio klausytojo nustatymas: Naudojame useEffect, kad pridėtume dydžio keitimo įvykio klausytoją prie lango. Kai lango dydis pasikeičia, handleResize funkcija atnaujina windowSize būseną.
  5. Išvalymas: Grąžiname išvalymo funkciją iš useEffect, kad pašalintume įvykio klausytoją, kai komponentas atsijungia. Tai apsaugo nuo atminties nutekėjimo.
  6. Reikšmių grąžinimas: Kabliukas grąžina windowSize objektą, kuriame yra dabartinis lango plotis ir aukštis.

Pasirinktinio kabliuko naudojimas komponente

Dabar, kai sukūrėme savo pasirinktinį kabliuką, pažiūrėkime, kaip jį naudoti „React“ komponente.

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

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

  return (
    

      
Lango plotis: {width}px

      
Lango aukštis: {height}px

    

  );
}

export default MyComponent;

Paaiškinimas:

  1. Kabliuko importavimas: Importuojame useWindowSize pasirinktinį kabliuką.
  2. Kabliuko kvietimas: Kviesime useWindowSize kabliuką komponente.
  3. Prieiga prie reikšmių: Išskleidžiame grąžintą objektą, kad gautume width ir height reikšmes.
  4. Reikšmių atvaizdavimas: Atvaizduojame pločio ir aukščio reikšmes komponento vartotojo sąsajoje.

Bet kuris komponentas, naudojantis useWindowSize, automatiškai atsinaujins, pasikeitus lango dydžiui.

Sudėtingesni pavyzdžiai

Panagrinėkime keletą pažangesnių pasirinktinių kabliukų naudojimo atvejų.

Pavyzdys: useLocalStorage

Šis kabliukas leidžia lengvai saugoti ir gauti duomenis iš vietinės saugyklos (local storage).

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  // Būsena mūsų reikšmei saugoti
  // Perduodame pradinę reikšmę į useState, kad logika būtų vykdoma tik vieną kartą
  const [storedValue, setStoredValue] = useState(() => {
    try {
      // Gauname iš vietinės saugyklos pagal raktą
      const item = window.localStorage.getItem(key);
      // Analizuojame saugomą json arba, jei jo nėra, grąžiname pradinę reikšmę
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // Jei įvyko klaida, taip pat grąžiname pradinę reikšmę
      console.log(error);
      return initialValue;
    }
  });

  // Grąžiname apgaubtą useState nustatymo funkcijos versiją, kuri...
  // ... išsaugo naują reikšmę localStorage.
  const setValue = (value) => {
    try {
      // Leidžiame reikšmei būti funkcija, kad turėtume tą patį API kaip useState
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      // Išsaugome vietinėje saugykloje
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
      // Išsaugome būseną
      setStoredValue(valueToStore);
    } catch (error) {
      // Pažangesnis įgyvendinimas apdorotų klaidos atvejį
      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;

Naudojimas:

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

function MyComponent() {
  const [name, setName] = useLocalStorage('name', 'Svečias');

  return (
    

      
Sveiki, {name}!

       setName(e.target.value)}
      />
    

  );
}

export default MyComponent;

Pavyzdys: useFetch

Šis kabliukas inkapsuliuoja duomenų gavimo iš API logiką.

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 klaida! būsena: ${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;

Naudojimas:

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

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

  if (loading) return 
Kraunama...
;
  if (error) return 
Klaida: {error.message}
;

  return (
    

      
Pavadinimas: {data.title}

      
Užbaigta: {data.completed ? 'Taip' : 'Ne'}

    

  );
}

export default MyComponent;

Geriausios pasirinktinių kabliukų praktikos

Kad jūsų pasirinktiniai kabliukai būtų veiksmingi ir lengvai palaikomi, laikykitės šių geriausių praktikų:

Dažniausios klaidos, kurių reikia vengti

Pažangūs šablonai

Pasirinktinių kabliukų komponavimas

Pasirinktinius kabliukus galima komponuoti kartu, norint sukurti sudėtingesnę logiką. Pavyzdžiui, galite sujungti useLocalStorage kabliuką su useFetch kabliuku, kad automatiškai išsaugotumėte gautus duomenis vietinėje saugykloje.

Logikos dalijimasis tarp kabliukų

Jei keli pasirinktiniai kabliukai dalijasi bendra logika, galite iškelti tą logiką į atskirą pagalbinę funkciją ir pakartotinai ją naudoti abiejuose kabliukuose.

Konteksto (Context) naudojimas su pasirinktiniais kabliukais

Pasirinktiniai kabliukai gali būti naudojami kartu su „React“ kontekstu (Context), norint pasiekti ir atnaujinti globalią būseną. Tai leidžia kurti daugkartinio naudojimo komponentus, kurie žino apie programos globalią būseną ir gali su ja sąveikauti.

Pavyzdžiai iš realaus pasaulio

Štai keletas pavyzdžių, kaip pasirinktiniai kabliukai gali būti naudojami realiose programose:

Pavyzdys: useGeolocation kabliukas tarpkultūrinėms programoms, tokioms kaip žemėlapių ar pristatymo paslaugos

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: 'Ši naršyklė nepalaiko geolokacijos.',
      });
      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;

Išvada

Pasirinktiniai kabliukai yra galingas įrankis rašyti švaresnį, labiau daugkartinio naudojimo ir lengviau palaikomą „React“ kodą. Inkapsuliuodami sudėtingą logiką į pasirinktinius kabliukus, galite supaprastinti savo komponentus, sumažinti kodo dubliavimą ir pagerinti bendrą savo programų struktūrą. Pasinaudokite pasirinktiniais kabliukais ir atskleiskite jų potencialą kurti tvirtesnes ir labiau mastelio keitimui pritaikytas „React“ programas.

Pradėkite nuo sričių savo esamoje kodo bazėje, kur logika kartojasi keliuose komponentuose. Tada pertvarkykite tą logiką į pasirinktinius kabliukus. Laikui bėgant, sukursite daugkartinio naudojimo kabliukų biblioteką, kuri pagreitins jūsų kūrimo procesą ir pagerins jūsų kodo kokybę.

Nepamirškite laikytis geriausių praktikų, vengti dažniausių klaidų ir tyrinėti pažangius šablonus, kad maksimaliai išnaudotumėte pasirinktinius kabliukus. Su praktika ir patirtimi tapsite pasirinktinių kabliukų meistru ir efektyvesniu „React“ kūrėju.

Pasirinktiniai kabliukai (Custom Hooks): Daugkartinio naudojimo logikos šablonai „React“ | MLOG