Maxsus Hook'lar: React'da Qayta Ishlatiladigan Mantiqiy Andozalar

React Hook'lari funksional komponentlarga holat (state) va hayotiy sikl (lifecycle) xususiyatlarini kiritib, React komponentlarini yozish usulimizni inqilob qildi. Ular taklif qiladigan ko'plab afzalliklar orasida, maxsus hook'lar bir nechta komponentlar bo'ylab mantiqni ajratib olish va qayta ishlatish uchun kuchli mexanizm sifatida ajralib turadi. Ushbu blog posti maxsus hook'lar dunyosiga chuqur kirib boradi, ularning afzalliklari, yaratilishi va amaliy misollar bilan qo'llanilishini o'rganadi.

Maxsus Hook'lar nima?

Aslini olganda, maxsus hook - bu "use" so'zi bilan boshlanadigan va boshqa hook'larni chaqira oladigan JavaScript funksiyasidir. Ular sizga komponent mantiqini qayta ishlatiladigan funksiyalarga ajratib olish imkonini beradi. Bu render props, yuqori darajali komponentlar yoki boshqa murakkab andozalarga murojaat qilmasdan, holatli mantiq, yon ta'sirlar yoki boshqa murakkab xatti-harakatlarni komponentlar o'rtasida bo'lishishning kuchli usulidir.

Maxsus Hook'larning Asosiy Xususiyatlari:

Nomlash Qoidasi: Maxsus hook'lar "use" so'zi bilan boshlanishi shart. Bu React'ga funksiya hook'larni o'z ichiga olganligini va hook'lar qoidalariga rioya qilishi kerakligini bildiradi.
Qayta Ishlatiluvchanlik: Asosiy maqsad qayta ishlatiladigan mantiqni inkapsulyatsiya qilish bo'lib, bu funksionallikni komponentlar o'rtasida bo'lishishni osonlashtiradi.
Holatli Mantiq: Maxsus hook'lar useState hook'idan foydalanib o'z holatini boshqarishi mumkin, bu esa ularga murakkab holatli xatti-harakatlarni inkapsulyatsiya qilish imkonini beradi.
Yon Ta'sirlar: Ular shuningdek, useEffect hook'idan foydalanib yon ta'sirlarni bajarishi mumkin, bu esa tashqi API'lar bilan integratsiya, ma'lumotlarni olish va boshqalarni ta'minlaydi.
Kompozitsiyalanuvchanlik: Maxsus hook'lar boshqa hook'larni chaqira oladi, bu esa sizga kichikroq, aniqroq yo'naltirilgan hook'larni birlashtirib murakkab mantiqni yaratish imkonini beradi.

Maxsus Hook'lardan Foydalanishning Afzalliklari

Maxsus hook'lar React dasturlashida bir nechta muhim afzalliklarni taqdim etadi:

Kodning Qayta Ishlatiluvchanligi: Eng yaqqol afzallik - bu mantiqni bir nechta komponentlar bo'ylab qayta ishlatish qobiliyatidir. Bu kod takrorlanishini kamaytiradi va yanada DRY (O'zingizni Takrorlamang) kod bazasini rivojlantiradi.
O'qish Osonligi Yaxshilanishi: Murakkab mantiqni alohida maxsus hook'larga ajratib olish orqali komponentlaringiz toza va tushunarli bo'ladi. Asosiy komponent mantiq'i UI'ni render qilishga qaratilgan bo'lib qoladi.
Qo'llab-quvvatlash Osonligi Yaxshilanishi: Mantiq maxsus hook'larda inkapsulyatsiya qilinganida, o'zgartirishlar va xatoliklarni tuzatishlar bir joyda qo'llanilishi mumkin, bu esa bir nechta komponentlarda xatoliklarni kiritish xavfini kamaytiradi.
Sinovdan O'tkazish Osonligi: Maxsus hook'larni alohida sinovdan o'tkazish oson, bu esa qayta ishlatiladigan mantiq ulardan foydalanadigan komponentlardan mustaqil ravishda to'g'ri ishlashini ta'minlaydi.
Soddalashtirilgan Komponentlar: Maxsus hook'lar komponentlarni tartibga solishga yordam beradi, ularni kamroq so'zli va asosiy maqsadlariga ko'proq yo'naltirilgan qiladi.

Birinchi Maxsus Hook'ingizni Yaratish

Keling, maxsus hook yaratishni amaliy misol bilan ko'rib chiqaylik: oyna o'lchamini kuzatuvchi hook.

Misol: useWindowSize

Ushbu hook brauzer oynasining joriy kengligi va balandligini qaytaradi. Shuningdek, u oyna o'lchami o'zgarganda bu qiymatlarni yangilaydi.

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

    // Remove event listener on cleanup
    return () => window.removeEventListener('resize', handleResize);
  }, []); // Empty array ensures that effect is only run on mount

  return windowSize;
}

export default useWindowSize;

Tushuntirish:

Kerakli Hook'larni import qilish: Biz React'dan useState va useEffect'ni import qilamiz.
Hook'ni Aniqlash: Biz nomlash qoidasiga rioya qilgan holda useWindowSize nomli funksiya yaratamiz.
Holatni Boshlash: Biz useState yordamida windowSize holatini oynaning boshlang'ich kengligi va balandligi bilan boshlaymiz.
Hodisa Tinglovchisini O'rnatish: Biz useEffect yordamida oynaga 'resize' hodisasi tinglovchisini qo'shamiz. Oyna o'lchami o'zgarganda, handleResize funksiyasi windowSize holatini yangilaydi.
Tozalash: Komponent o'chirilganda hodisa tinglovchisini olib tashlash uchun useEffect'dan tozalash funksiyasini qaytaramiz. Bu xotira sizib chiqishining oldini oladi.
Qiymatlarni Qaytarish: Hook oynaning joriy kengligi va balandligini o'z ichiga olgan windowSize obyektini qaytaradi.

Maxsus Hook'ni Komponentda Ishlatish

Endi biz maxsus hook'imizni yaratganimizdan so'ng, uni React komponentida qanday ishlatishni ko'rib chiqaylik.

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

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

  return (
    
      Oyna kengligi: {width}px
      Oyna balandligi: {height}px
    
  );
}

export default MyComponent;

Tushuntirish:

Hook'ni Import Qilish: Biz useWindowSize maxsus hook'ini import qilamiz.
Hook'ni Chaqirish: Biz komponent ichida useWindowSize hook'ini chaqiramiz.
Qiymatlarga Kirish: Biz width va height qiymatlarini olish uchun qaytarilgan obyektni destrukturizatsiya qilamiz.
Qiymatlarni Render Qilish: Biz komponentning UI'sida kenglik va balandlik qiymatlarini render qilamiz.

useWindowSize'dan foydalanadigan har qanday komponent oyna o'lchami o'zgarganda avtomatik ravishda yangilanadi.

Murakkabroq Misollar

Keling, maxsus hook'lar uchun ba'zi ilg'or foydalanish holatlarini o'rganaylik.

Misol: useLocalStorage

Ushbu hook sizga local storage'dan ma'lumotlarni osongina saqlash va olish imkonini beradi.

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  // State to store our value
  // Pass initial value to useState so logic is only executed once
  const [storedValue, setStoredValue] = useState(() => {
    try {
      // Get from local storage by key
      const item = window.localStorage.getItem(key);
      // Parse stored json or if none return initialValue
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // If error also return initialValue
      console.log(error);
      return initialValue;
    }
  });

  // Return a wrapped version of useState's setter function that ...
  // ... persists the new value to localStorage.
  const setValue = (value) => {
    try {
      // Allow value to be a function so we have same API as useState
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      // Save to local storage
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
      // Save state
      setStoredValue(valueToStore);
    } catch (error) {
      // A more advanced implementation would handle the error case
      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;

Foydalanish:

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

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

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

export default MyComponent;

Misol: useFetch

Ushbu hook API'dan ma'lumotlarni olish mantiqini inkapsulyatsiya qiladi.

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 xatosi! status: ${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;

Foydalanish:

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

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

  if (loading) return Yuklanmoqda...;
  if (error) return Xato: {error.message};

  return (
    
      Sarlavha: {data.title}
      Bajarilgan: {data.completed ? 'Ha' : 'Yo\'q'}
    
  );
}

export default MyComponent;

Maxsus Hook'lar Uchun Eng Yaxshi Amaliyotlar

Maxsus hook'laringiz samarali va qo'llab-quvvatlanadigan bo'lishini ta'minlash uchun ushbu eng yaxshi amaliyotlarga rioya qiling:

Ularni Yo'naltirilgan Holda Saqlang: Har bir maxsus hook bitta, aniq belgilangan maqsadga ega bo'lishi kerak. Juda ko'p narsani bajarishga harakat qiladigan haddan tashqari murakkab hook'larni yaratishdan saqlaning.
Hook'laringizni Hujjatlashtiring: Har bir maxsus hook uchun uning maqsadi, kirishlari va chiqishlarini tushuntiruvchi aniq va ixcham hujjatlarni taqdim eting.
Hook'laringizni Sinovdan O'tkazing: Maxsus hook'laringiz uchun ularning to'g'ri va ishonchli ishlashini ta'minlash uchun birlik testlarini yozing.
Tavsiflovchi Nomlardan Foydalaning: Maxsus hook'laringiz uchun ularning maqsadini aniq ko'rsatadigan tavsiflovchi nomlarni tanlang.
Xatolarni To'g'ri Boshqaring: Kutilmagan xatti-harakatlarning oldini olish va ma'lumotli xato xabarlarini taqdim etish uchun maxsus hook'laringizda xatolarni boshqarishni amalga oshiring.
Qayta Ishlatiluvchanlikni Ko'rib Chiqing: Maxsus hook'laringizni qayta ishlatiluvchanlikni hisobga olgan holda loyihalashtiring. Ularni bir nechta komponentlarda ishlatilishi uchun yetarlicha umumiy qiling.
Haddan Tashqari Abstraksiyadan Qoching: Komponent ichida osongina hal qilinishi mumkin bo'lgan oddiy mantiq uchun maxsus hook'lar yaratmang. Faqat haqiqatan ham qayta ishlatiladigan va murakkab bo'lgan mantiqni ajratib oling.

Oldini Olish Kerak Bo'lgan Umumiy Xatolar

Hook'lar Qoidalarini Buzish: Har doim hook'larni maxsus hook funksiyangizning yuqori darajasida chaqiring va ularni faqat React funksional komponentlaridan yoki boshqa maxsus hook'lardan chaqiring.
useEffect'dagi Bog'liqliklarni E'tiborsiz Qoldirish: Eskirgan yopilishlar (stale closures) va kutilmagan xatti-harakatlarning oldini olish uchun useEffect hook'ining bog'liqliklar massiviga barcha kerakli bog'liqliklarni kiritganingizga ishonch hosil qiling.
Cheksiz Sikllarni Yaratish: useEffect hook'i ichida holatni yangilashda ehtiyot bo'ling, chunki bu osonlikcha cheksiz sikllarga olib kelishi mumkin. Yangilanish shartli va bog'liqliklardagi o'zgarishlarga asoslanganligiga ishonch hosil qiling.
Tozalashni Unutish: Xotira sizib chiqishining oldini olish uchun hodisa tinglovchilarini olib tashlash, obunalarni bekor qilish va boshqa tozalash vazifalarini bajarish uchun useEffect'da har doim tozalash funksiyasini qo'shing.

Ilg'or Andozalar

Maxsus Hook'larni Birlashtirish

Maxsus hook'lar murakkabroq mantiqni yaratish uchun birgalikda birlashtirilishi mumkin. Masalan, olingan ma'lumotlarni avtomatik ravishda local storage'ga saqlash uchun useLocalStorage hook'ini useFetch hook'i bilan birlashtirishingiz mumkin.

Hook'lar O'rtasida Mantiqni Bo'lishish

Agar bir nechta maxsus hook'lar umumiy mantiqqa ega bo'lsa, siz bu mantiqni alohida yordamchi funksiyaga ajratib olib, uni ikkala hook'da ham qayta ishlatishingiz mumkin.

Maxsus Hook'lar bilan Kontekstdan Foydalanish

Maxsus hook'lar global holatga kirish va uni yangilash uchun React Konteksti bilan birgalikda ishlatilishi mumkin. Bu sizga ilovaning global holatidan xabardor bo'lgan va u bilan o'zaro aloqada bo'la oladigan qayta ishlatiladigan komponentlarni yaratishga imkon beradi.

Haqiqiy Dunyo Misollari

Quyida maxsus hook'larning haqiqiy dunyo ilovalarida qanday ishlatilishi mumkinligiga oid ba'zi misollar keltirilgan:

Forma Validatsiyasi: Forma holati, validatsiyasi va yuborilishini boshqarish uchun useForm hook'ini yarating.
Autentifikatsiya: Foydalanuvchi autentifikatsiyasi va avtorizatsiyasini boshqarish uchun useAuth hook'ini amalga oshiring.
Mavzu Boshqaruvi: Turli mavzular (yorug', qorong'i va h.k.) o'rtasida almashinish uchun useTheme hook'ini ishlab chiqing.
Geolokatsiya: Foydalanuvchining joriy manzilini kuzatish uchun useGeolocation hook'ini yarating.
Aylantirishni Aniqlash: Foydalanuvchi sahifaning ma'lum bir nuqtasiga aylantirganda aniqlash uchun useScroll hook'ini yarating.

Misol : xaritalash yoki yetkazib berish xizmatlari kabi madaniyatlararo ilovalar uchun useGeolocation hook'i

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: 'Geolokatsiya bu brauzer tomonidan qo\'llab-quvvatlanmaydi.',
      });
      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;

Xulosa

Maxsus hook'lar toza, qayta ishlatiladigan va yanada qo'llab-quvvatlanadigan React kodini yozish uchun kuchli vositadir. Murakkab mantiqni maxsus hook'larda inkapsulyatsiya qilish orqali siz komponentlaringizni soddalashtirishingiz, kod takrorlanishini kamaytirishingiz va ilovalaringizning umumiy tuzilishini yaxshilashingiz mumkin. Maxsus hook'larni qabul qiling va yanada mustahkam va kengaytiriladigan React ilovalarini yaratish uchun ularning salohiyatini oching.

Mavjud kod bazangizda mantiq bir nechta komponentlar bo'ylab takrorlanayotgan joylarni aniqlashdan boshlang. Keyin, bu mantiqni maxsus hook'larga refaktor qiling. Vaqt o'tishi bilan, siz dasturlash jarayoningizni tezlashtiradigan va kodingiz sifatini yaxshilaydigan qayta ishlatiladigan hook'lar kutubxonasini yaratasiz.

Eng yaxshi amaliyotlarga rioya qilishni, umumiy xatolardan qochishni va maxsus hook'lardan maksimal darajada foydalanish uchun ilg'or andozalarni o'rganishni unutmang. Amaliyot va tajriba bilan siz maxsus hook'lar ustasi va samaraliroq React dasturchisiga aylanasiz.