Reacti kohandatud konksud: keeruka olekuloogika ekstraheerimise valdamine ülemaailmseks arenduseks

Kaasaegse veebiarenduse dünaamilises maastikus, eriti selliste raamistikega nagu React, võib komponentide keeruka olekuloogika haldamine kiiresti muutuda oluliseks väljakutseks. Rakenduste kasvades suuruses ja keerukuses võivad komponendid paisuda keeruka olekuhalduse, elutsükli meetodite ja kõrvalmõjudega, takistades taaskasutatavust, hooldatavust ja üldist arendaja tootlikkust. Siin ilmuvad Reacti kohandatud konksud võimsa lahendusena, mis võimaldab arendajatel ekstraheerida ja abstraktselt taaskasutatava olekuga loogika kohandatud iseseisvateks funktsioonideks. See blogipostitus süveneb kohandatud konksude kontseptsiooni, uurides nende eeliseid, demonstreerides nende loomist ja pakkudes praktilisi näiteid, mis on seotud ülemaailmse arenduse kontekstiga.

Kohandatud konksude vajaduse mõistmine

Enne konksude ilmumist hõlmas olekuga loogika jagamine Reactis komponentide vahel tavaliselt selliseid mustreid nagu kõrgema järgu komponendid (HOC) või Render Props. Kuigi need mustrid olid tõhusad, viisid need sageli "ümbrisepõrgusse", kus komponendid olid sügavalt pesastatud, muutes koodi lugemise ja silumise raskemaks. Lisaks võisid need tekitada rekvisiitide kokkupõrkeid ja keerulisemaks muuta komponendipuud. React 16.8-s kasutusele võetud kohandatud konksud pakuvad otsesemat ja elegantsemat lahendust.

Põhimõtteliselt on kohandatud konksud lihtsalt JavaScripti funktsioonid, mille nimed algavad use-ga. Need võimaldavad teil komponendi loogika ekstraheerida taaskasutatavatesse funktsioonidesse. See tähendab, et saate olekuga loogikat jagada erinevate komponentide vahel, ennast kordamata (DRY põhimõtted) ja muutmata oma komponendi hierarhiat. See on eriti väärtuslik ülemaailmsetes arendusmeeskondades, kus järjepidevus ja tõhusus on ülimalt tähtsad.

Kohandatud konksude peamised eelised:

• Koodi taaskasutatavus: Kõige olulisem eelis on võime jagada olekuga loogikat mitme komponendi vahel, vähendades koodi dubleerimist ja säästes arendusaega.
• Parem hooldatavus: Eraldades keeruka loogika spetsiaalsetesse konksudesse, muutuvad komponendid sihvakateks ja neid on lihtsam mõista, siluda ja muuta. See lihtsustab uute meeskonnaliikmete kasutuselevõttu olenemata nende geograafilisest asukohast.
• Parem loetavus: Kohandatud konksud eraldavad mured, pannes teie komponendid keskenduma UI renderdamisele, samas kui loogika asub konksus.
• Lihtsustatud testimine: Kohandatud konksud on sisuliselt JavaScripti funktsioonid ja neid saab iseseisvalt testida, mis viib töökindlamate ja usaldusväärsemate rakendusteni.
• Parem korraldus: Need soodustavad puhtamat projektistruktuuri, rühmitades seotud loogika kokku.
• Komponentidevaheline loogika jagamine: Olenemata sellest, kas see on andmete toomine, vormisisendite haldamine või akna sündmuste käsitlemine, võivad kohandatud konksud seda loogikat kapseldada ja neid saab kasutada kõikjal.

Oma esimese kohandatud konksu loomine

Kohandatud konksu loomine on lihtne. Määratlete JavaScripti funktsiooni, mis algab eesliitega use, ja selle sees saate kutsuda teisi konksusid (nt useState, useEffect, useContext jne). Põhiprintsiip on see, et iga funktsioon, mis kasutab Reacti konksusid, peab olema ise konks (kas sisseehitatud konks või kohandatud konks) ja seda tuleb kutsuda Reacti funktsioonikomponendi või mõne muu kohandatud konksu seest.

Võtame arvesse levinud stsenaariumi: brauseri akna mõõtmete jälgimine.

Näide: useWindowSize kohandatud konks

See konks tagastab brauseri akna praeguse laiuse ja kõrguse.

            import { useState, useEffect } from 'react';

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height
  };
}

function useWindowSize() {
  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowDimensions;
}

export default useWindowSize;

            

              
                Copy
              
            
          

Selgitus:

• Kasutame useState, et salvestada praegused akna mõõtmed. Esialgne olek määratakse funktsiooni getWindowDimensions kutsumisega.
• Kasutame useEffect, et lisada sündmuse kuulaja sündmusele resize. Kui aken on suurust muudetud, värskendab funktsioon handleResize olekut uute mõõtmetega.
• Funktsiooni useEffect tagastatud puhastusfunktsioon eemaldab sündmuse kuulaja, kui komponent lahti monteeritakse, vältides mälulekkeid. See on töökindlate rakenduste jaoks ülioluline.
• Konks tagastab praeguse oleku windowDimensions.

Kuidas seda komponendis kasutada:

            import React from 'react';
import useWindowSize from './useWindowSize'; // Eeldades, et konks on eraldi failis

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

  return (
    

      
Akna laius: {width}px
      
Akna kõrgus: {height}px
      {width < 768 ? 
See on mobiilivaade.
 : 
See on töölaua vaade.
}
    
  );
}

export default MyResponsiveComponent;

            

              
                Copy
              
            
          

See lihtne näide näitab, kui lihtsalt saate taaskasutatavat loogikat ekstraheerida. Ülemaailmne meeskond, mis arendab reageerivat rakendust, saaks sellest konksust tohutult kasu, tagades järjepideva käitumise erinevates seadmetes ja ekraanisuurustes kogu maailmas.

Täpsem olekuloogika ekstraheerimine kohandatud konksudega

Kohandatud konksud paistavad silma, kui käsitletakse keerukamaid olekuhaldusmustreid. Uurime keerulisemat stsenaariumi: andmete toomine API-st.

Näide: useFetch kohandatud konks

See konks käsitleb andmete toomise loogikat, laadimise oleku haldamist ja vigade käsitlemist.

            import { useState, useEffect } from 'react';

function useFetch(url, options = {}) {
  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 () => {
      try {
        setLoading(true);
        const response = await fetch(url, { ...options, signal });

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const result = await response.json();
        if (!signal.aborted) {
          setData(result);
          setError(null);
        }
      } catch (err) {
        if (err.name === 'AbortError') {
          console.log('Toomine katkestatud');
        } else {
          if (!signal.aborted) {
            setError(err);
            setData(null);
          }
        }
      } finally {
        if (!signal.aborted) {
          setLoading(false);
        }
      }
    };

    fetchData();

    return () => {
      abortController.abort(); // Katkesta toomine puhastamisel
    };
  }, [url, JSON.stringify(options)]); // Tooge uuesti, kui URL või valikud muutuvad

  return { data, loading, error };
}

export default useFetch;

            

              
                Copy
              
            
          

Selgitus:

• Initsialiseerime kolm olekumuutujat: data, loading ja error.
• Funktsioon useEffect sisaldab asünkroonset andmete toomise loogikat.
• AbortController: Võrgu taotluste puhul on ülioluline aspekt komponendi lahti monteerimise või sõltuvuse muutumise käsitlemine, kui taotlus on pooleli. Me kasutame AbortController taotluse tühistamiseks, kui komponent lahti monteeritakse või kui url või options muutuvad enne toomise lõppu. See väldib võimalikke mälulekkeid ja tagab, et me ei ürita olekut värskendada lahti monteeritud komponendis.
• Konks tagastab objekti, mis sisaldab data, loading ja error, mida saab konksu kasutav komponent dekonstruerida.

Kuidas seda komponendis kasutada:

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

function UserProfile({ userId }) {
  const { data: user, loading, error } = useFetch(`https://api.example.com/users/${userId}`);

  if (loading) {
    return 
Kasutajaprofiili laadimine...
;
  }

  if (error) {
    return 
Viga profiili laadimisel: {error.message}
;
  }

  if (!user) {
    return 
Kasutajaandmeid ei leitud.
;
  }

  return (
    

      
{user.name}
      
E-post: {user.email}
      
Riik: {user.location.country}
 {/* Näide ülemaailmsest andmestruktuurist */}
    
  );
}

export default UserProfile;

            

              
                Copy
              
            
          

Globaalse rakenduse jaoks saab see useFetch konks standardiseerida seda, kuidas andmeid tuuakse erinevate funktsioonide vahel ja potentsiaalselt erinevatelt piirkondlikelt serveritelt. Kujutage ette projekti, mis peab toote teavet tooma Euroopas, Aasias ja Põhja-Ameerikas asuvatelt serveritelt; seda konksu saab kasutada universaalselt, API konkreetse lõpp-punkti edastatakse argumendina.

Kohandatud konksud keerukate vormide haldamiseks

Vormid on veebirakenduste kõikjal levinud osa ja vormi oleku, valideerimise ja esitamise haldamine võib muutuda väga keerukaks. Kohandatud konksud sobivad selle loogika kapseldamiseks suurepäraselt.

Näide: useForm kohandatud konks

See konks saab hallata vormi sisendeid, valideerimise reegleid ja esitamise olekut.

            import { useState, useCallback } from 'react';

function useForm(initialValues, validate) {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = useCallback((event) => {
    const { name, value } = event.target;
    setValues(prevValues => ({ ...prevValues, [name]: value }));
    // Valikuliselt valideeri uuesti muutmisel
    if (validate) {
      const validationErrors = validate({
        ...values,
        [name]: value
      });
      setErrors(prevErrors => ({
        ...prevErrors,
        [name]: validationErrors[name]
      }));
    }
  }, [values, validate]); // Looge uuesti, kui väärtused või valideerimine muutuvad

  const handleSubmit = useCallback((event) => {
    event.preventDefault();
    if (validate) {
      const validationErrors = validate(values);
      setErrors(validationErrors);
      if (Object.keys(validationErrors).length === 0) {
        setIsSubmitting(true);
        // Reaalrakenduses oleks see koht, kus te andmeid esitate, nt API-le
        console.log('Vorm esitati edukalt:', values);
        // Simuleerige API-kõne viivitust
        setTimeout(() => {
          setIsSubmitting(false);
          // Valikuliselt lähtesta vorm või näita õnnestumise sõnumit
        }, 1000);
      }
    }
     else {
      // Kui valideerimist pole, eeldage, et esitamine on okei
      setIsSubmitting(true);
      console.log('Vorm esitati (valideerimiseta):', values);
      setTimeout(() => {
        setIsSubmitting(false);
      }, 1000);
    }
  }, [values, validate]);

  const handleBlur = useCallback((event) => {
    if (validate) {
      const validationErrors = validate(values);
      setErrors(validationErrors);
    }
  }, [values, validate]);

  const resetForm = useCallback(() => {
    setValues(initialValues);
    setErrors({});
    setIsSubmitting(false);
  }, [initialValues]);

  return {
    values,
    errors,
    handleChange,
    handleSubmit,
    handleBlur,
    isSubmitting,
    resetForm
  };
}

export default useForm;

            

              
                Copy
              
            
          

Selgitus:

• Hallatab vormi sisendite values.
• Käsitleb errors, mis põhinevad esitatud valideerimisfunktsioonil.
• Jälgib isSubmitting olekut.
• Pakub funktsioone handleChange, handleSubmit ja handleBlur.
• Sisaldab funktsiooni resetForm.
• Funktsiooni useCallback kasutatakse funktsioonide meeldejätmiseks, vältides tarbetuid uuesti loomisi uuesti renderdamisel ja optimeerides jõudlust.

Kuidas seda komponendis kasutada:

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

const initialValues = {
  name: '',
  email: '',
  country: '' // Näide ülemaailmse konteksti jaoks
};

const validate = (values) => {
  let errors = {};
  if (!values.name) {
    errors.name = 'Nimi on kohustuslik';
  } else if (values.name.length < 2) {
    errors.name = 'Nimi peab olema vähemalt 2 tähemärki';
  }
  if (!values.email) {
    errors.email = 'E-posti aadress on kohustuslik';
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    errors.email = 'E-posti aadress on vale';
  }
  // Lisa vajadusel riigi valideerimine, arvestades rahvusvahelisi vorminguid
  if (!values.country) {
    errors.country = 'Riik on kohustuslik';
  }
  return errors;
};

function RegistrationForm() {
  const { 
    values,
    errors,
    handleChange,
    handleSubmit,
    handleBlur,
    isSubmitting,
    resetForm
  } = useForm(initialValues, validate);

  return (
    

      

        Nimi:
        
        {errors.name && 
{errors.name}
}
      
      

        E-post:
        
        {errors.email && 
{errors.email}
}
      
      

        Riik:
        
        {errors.country && 
{errors.country}
}
      
      
        {isSubmitting ? 'Esitamine...' : 'Registreeru'}
      
      Lähtesta
    
  );
}

export default RegistrationForm;

            

              
                Copy
              
            
          

See useForm konks on uskumatult väärtuslik ülemaailmsete meeskondade jaoks, kes loovad vorme, mis peavad kasutajaandmeid erinevatest piirkondadest koguma. Valideerimisloogikat saab hõlpsasti kohandada, et see vastaks rahvusvahelistele standarditele, ja jagatud konks tagab vormide käsitlemise järjepidevuse kogu rakenduses. Näiteks rahvusvaheline e-kaubanduse sait võiks kasutada seda konksu saatmis-aadressi vormide jaoks, tagades riigipõhiste valideerimisreeglite õige rakendamise.

Konteksti kasutamine kohandatud konksudega

Kohandatud konksud võivad lihtsustada ka suhtlust Reacti Context API-ga. Kui teil on kontekst, mida paljud komponendid sageli kasutavad, võib kohandatud konksu loomine selle konteksti pääsemiseks ja potentsiaalselt haldamiseks teie koodi sujuvamaks muuta.

Näide: useAuth kohandatud konks

Eeldades, et teil on autentimiskontekst:

            import React, { useContext } from 'react';

// Eeldame, et AuthContext on määratletud mujal ja pakub kasutajateavet ja sisselogimise/väljalogimise funktsioone
const AuthContext = React.createContext();

function AuthProvider({ children }) {
  const [user, setUser] = React.useState(null);

  const login = (userData) => setUser(userData);
  const logout = () => setUser(null);

  return (
    
      {children}
    
  );
}

function useAuth() {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error('useAuth peab olema kasutatud AuthProvideris');
  }
  return context;
}

export { AuthProvider, useAuth };

            

              
                Copy
              
            
          

Selgitus:

• Komponent AuthProvider pakib teie rakenduse osad ja pakub autentimise olekut ja meetodeid konteksti kaudu.
• Konks useAuth lihtsalt kasutab seda konteksti. See sisaldab ka kontrolli, et veenduda, et seda kasutatakse õiges pakkujas, visates kasuliku veateate, kui seda pole. See veakäsitlus on iga meeskonna jaoks ülioluline arendajate kogemuse jaoks.

Kuidas seda komponendis kasutada:

            import React from 'react';
import { useAuth } from './AuthContext'; // Eeldades, et AuthContexti seadistus on selles failis

function Header() {
  const { user, logout } = useAuth();

  return (
    

      {user ? (
        

          Tere, {user.name}!
          Logi välja
        
      ) : (
        
Palun logige sisse.
      )}
    
  );
}

export default Header;

            

              
                Copy
              
            
          

Ülemaailmses rakenduses, kus kasutajad loovad ühenduse erinevatest piirkondadest, on autentimise oleku järjepidev haldamine eluliselt tähtis. See useAuth konks tagab, et kõikjal rakenduses toimub kasutajateabe kasutamine või väljalogimise käivitamine standarditud, puhta liidese kaudu, muutes koodibaasi hajutatud meeskondade jaoks palju hallatavamaks.

Kohandatud konksude parimad tavad

Kohandatud konksude tõhusaks kasutamiseks ja teie ülemaailmses meeskonnas kvaliteetse koodibaasi säilitamiseks kaaluge neid parimaid tavasid:

• Nimetamisnõue: Alati alustage oma kohandatud konksude nimesid sõnaga use (nt useFetch, useForm). See pole ainult konventsioon; React toetub sellele, et jõustada konksude reeglid.
• Üks kohustus: Iga kohandatud konks peaks ideaalis keskenduma ühele olekuga loogika tükile. Vältige monoliitiliste konksude loomist, mis teevad liiga palju asju. See muudab neid lihtsamaks mõistmiseks, testimiseks ja taaskasutamiseks.
• Hoidke komponente sihvakana: Teie komponendid peaksid peamiselt keskenduma UI renderdamisele. Delegeerige keerukas olekuloogika ja kõrvalmõjud kohandatud konksudele.
• Sõltuvuse massiivid: Pöörake tähelepanu funktsioonides useEffect ja muudes konksudes olevatele sõltuvuse massiividele. Ebaõiged sõltuvused võivad viia vananenud sulgemiste või tarbetute uuesti renderdamisteni. Kohandatud konksude puhul, mis aktsepteerivad rekvisiite või olekut argumentidena, veenduge, et need on sõltuvuse massiivis, kui neid kasutatakse efekti sees.
• Kasutage useCallback ja useMemo: Kui edastate funktsioone või objekte vanemkomponendist kohandatud konksu alla või kui määratlete funktsioone kohandatud konksu sees, mis edastatakse useEffect-i sõltuvustena, kaaluge funktsiooni useCallback kasutamist, et vältida tarbetuid uuesti renderdamisi ja lõputuid silmuseid. Samuti kasutage useMemo keerukate arvutuste jaoks.
• Selged tagastusväärtused: Kujundage oma kohandatud konksud nii, et need tagastaksid selged ja hästi määratletud väärtused või funktsioonid. Destructureerimine on levinud ja tõhus viis konksu väljundi tarbimiseks.
• Testimine: Kirjutage oma kohandatud konksudele ühikute teste. Kuna need on lihtsalt JavaScripti funktsioonid, on neid tavaliselt lihtne isoleeritult testida. See on suurte, hajutatud projektide töökindluse tagamiseks ülioluline.
• Dokumentatsioon: Laialt kasutatavate kohandatud konksude jaoks, eriti suurtes meeskondades, on selge dokumentatsioon selle kohta, mida konks teeb, selle parameetrid ja tagastusväärtused tõhusaks koostööks hädavajalik.
• Kaaluge teeke: Levinud mustrite jaoks, nagu andmete toomine, vormide haldamine või animatsioon, kaaluge hästi väljakujunenud teekide kasutamist, mis pakuvad töökindlaid konksude rakendusi (nt React Query, Formik, Framer Motion). Neid teeke on sageli lahingus testitud ja optimeeritud.

Millal MITTE kasutada kohandatud konksusid

Kuigi need on võimsad, ei ole kohandatud konksud alati lahendus. Arvestage nende punktidega:

• Lihtne olek: Kui teie komponendil on ainult mõned lihtsad oleku tükid, mida ei jagata ja mis ei hõlma keerukat loogikat, võib standardne useState olla täiesti piisav. Üleabstraktsioon võib lisada tarbetut keerukust.
• Puhas funktsioon: Kui funktsioon on puhas utiliidi funktsioon (nt matemaatiline arvutus, stringi manipuleerimine) ja ei hõlma Reacti olekut ega elutsüklit, ei pea see olema konks.
• Jõudluse kitsaskohad: Kui kohandatud konks on halvasti rakendatud ebaõigete sõltuvustega või memoizatsiooni puudumisega, võib see tahtmatult põhjustada jõudlusprobleeme. Alati profileerige ja testige oma konksusid.

Järeldus: ülemaailmse arenduse võimustamine kohandatud konksudega

Reacti kohandatud konksud on põhiline vahend skaleeritava, hooldatava ja taaskasutatava koodi loomiseks kaasaegsetes Reacti rakendustes. Lubades arendajatel komponentidest olekuga loogikat ekstraheerida, edendavad nad puhtamat koodi, vähendavad dubleerimist ja lihtsustavad testimist. Ülemaailmsete arendusmeeskondade jaoks on eelised suurenenud. Kohandatud konksud soodustavad järjepidevust, sujuvamad koostööd ja kiirendavad arendust, pakkudes eelnevalt ehitatud, taaskasutatavaid lahendusi levinud olekuhaldusprobleemidele.

Olenemata sellest, kas loote reageerivat UI-d, toote andmeid hajutatud API-st, haldate keerukaid vorme või integreerite kontekstiga, pakuvad kohandatud konksud elegantset ja tõhusat lähenemisviisi. Embracing the principles of hooks and following best practices, development teams worldwide can harness their power to build robust, high-quality React applications that stand the test of time and global usability.

Alustage korduvate olekuga loogikate tuvastamisega oma praegustes projektides ja kaaluge selle kapseldamist kohandatud konksudesse. Esialgne investeering nende taaskasutatavate utiliitide loomisse tasub end ära arendaja tootlikkuse ja koodi kvaliteedi osas, eriti töötades erinevate meeskondadega erinevates ajavööndites ja geograafilistes piirkondades.