16-avgust, 2025O'zbek

Kuchli yuklanish holatini boshqarish va xatolarni silliq hal qilish uchun React Suspense va Error Boundaries-ni o'zlashtiring. Chidamli va foydalanuvchiga qulay ilovalar yaratishni o'rganing.

React Suspense va Error Boundaries: Kengaytirilgan Yuklash va Xatolarni Boshqarish

React Suspense va Error Boundaries - bu ishlab chiquvchilarga yanada chidamli va foydalanuvchiga qulay ilovalar yaratish imkonini beruvchi kuchli xususiyatlardir. Ular yuklanish holatlari va kutilmagan xatolarni deklarativ usulda boshqarishni ta'minlaydi, umumiy foydalanuvchi tajribasini yaxshilaydi va ishlab chiqish jarayonini soddalashtiradi. Ushbu maqola React Suspense va Error Boundaries-dan samarali foydalanish bo'yicha keng qamrovli qo'llanmani taqdim etadi, unda asosiy tushunchalardan tortib ilg'or texnikalargacha bo'lgan hamma narsa qamrab olingan.

React Suspense-ni Tushunish

React Suspense - bu komponentning render qilinishini ma'lum bir shart bajarilguncha, odatda asinxron operatsiyadan ma'lumotlar olinmaguncha "to'xtatib turish" mexanizmidir. Bu ma'lumotlar yuklanishini kutish paytida yuklanish ko'rsatkichlari kabi zaxira UI ko'rsatish imkonini beradi. Suspense yuklanish holatlarini boshqarishni soddalashtiradi, qo'lda shartli render qilish zaruratini yo'q qiladi va kodning o'qilishini yaxshilaydi.

Suspense-ning Asosiy Tushunchalari

Suspense Chegaralari: Bular to'xtab qolishi mumkin bo'lgan komponentlarni o'rab turuvchi React komponentlaridir. Ular o'ralgan komponentlar to'xtab qolgan vaqtda ko'rsatiladigan zaxira UI-ni belgilaydi.
Zaxira UI: Komponent to'xtab qolgan vaqtda ko'rsatiladigan UI. Bu odatda yuklanish ko'rsatkichi yoki o'rinbosar (placeholder) bo'ladi.
Asinxron Ma'lumotlarni Olish: Suspense `fetch`, `axios` yoki maxsus ma'lumotlarni olish yechimlari kabi asinxron ma'lumotlarni olish kutubxonalari bilan uzluksiz ishlaydi.
Kodni Bo'lish (Code Splitting): Suspense, shuningdek, kod modullarining yuklanishini kechiktirish, kodni bo'lishni yoqish va dastlabki sahifa yuklanish samaradorligini oshirish uchun ham ishlatilishi mumkin.

Suspense-ning Asosiy Amalga Oshirilishi

Quyida ma'lumotlarni olish paytida yuklanish ko'rsatkichini ko'rsatish uchun Suspense-dan qanday foydalanishning oddiy misoli keltirilgan:


import React, { Suspense } from 'react';

// Ma'lumotlarni olishni simulyatsiya qilish (masalan, API'dan)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// Suspense ishlata oladigan resurs yaratish
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// Resursdan o'qiydigan komponent
const UserProfile = () => {
  const data = userData.read();
  return (
    
      Name: {data.name}
      Age: {data.age}
    
  );
};

const App = () => {
  return (
    Foydalanuvchi ma'lumotlari yuklanmoqda...

}>
      
    
  );
};

export default App;

Ushbu misolda:

`fetchData` asinxron ma'lumotlarni olish operatsiyasini simulyatsiya qiladi.
`createResource` Suspense ma'lumotlarning yuklanish holatini kuzatish uchun ishlata oladigan resurs yaratadi.
`UserProfile` resursdan `read` metodi yordamida ma'lumotlarni o'qiydi. Agar ma'lumotlar hali mavjud bo'lmasa, u promise tashlaydi, bu esa komponentni to'xtatib qo'yadi.
`Suspense` komponenti `UserProfile` ni o'rab oladi va `fallback` propini taqdim etadi, bu esa komponent to'xtatilgan vaqtda ko'rsatiladigan UI ni belgilaydi.

Code Splitting bilan Suspense

Suspense, shuningdek, kodni bo'lishni amalga oshirish uchun `React.lazy` bilan birga ishlatilishi mumkin. Bu komponentlarni faqat kerak bo'lganda yuklash imkonini beradi va dastlabki sahifa yuklanish samaradorligini oshiradi.


import React, { Suspense, lazy } from 'react';

// MyComponent komponentini erinchoq (lazy) yuklash
const MyComponent = lazy(() => import('./MyComponent'));

const App = () => {
  return (
    Komponent yuklanmoqda...}>
      
    
  );
};

export default App;

Ushbu misolda:

`React.lazy` `MyComponent` komponentini erinchoq (lazily) yuklash uchun ishlatiladi.
`Suspense` komponenti `MyComponent` ni o'rab oladi va `fallback` propini taqdim etadi, bu esa komponent yuklanayotgan vaqtda ko'rsatiladigan UI ni belgilaydi.

Error Boundaries-ni Tushunish

Error Boundaries - bu o'zlarining quyi komponentlar daraxtining istalgan joyida JavaScript xatolarini ushlaydigan, ushbu xatolarni qayd etadigan va butun ilovaning ishdan chiqishi o'rniga zaxira UI ko'rsatadigan React komponentlaridir. Ular kutilmagan xatolarni silliq boshqarish usulini ta'minlaydi, foydalanuvchi tajribasini yaxshilaydi va ilovangizni yanada mustahkam qiladi.

Error Boundaries-ning Asosiy Tushunchalari

Xatolarni Tutish: Error Boundaries render qilish paytida, hayotiy sikl metodlarida va o'zlaridan pastdagi butun daraxt konstruktorlarida xatolarni ushlaydi.
Zaxira UI: Xato yuz berganda ko'rsatiladigan UI. Bu odatda xato xabari yoki o'rinbosar bo'ladi.
Xatolarni Qayd Etish: Error Boundaries xatolarni disk raskadrovka qilish uchun servisga yoki konsolga qayd etish imkonini beradi.
Komponentlar Daraxtini Izolyatsiya Qilish: Error Boundaries xatolarni komponentlar daraxtining ma'lum qismlariga izolyatsiya qiladi, bu ularning butun ilovani ishdan chiqarishini oldini oladi.

Error Boundaries-ning Asosiy Amalga Oshirilishi

Quyida Error Boundary yaratishning oddiy misoli keltirilgan:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Holatni yangilang, shunda keyingi render zaxira UI ni ko'rsatadi.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Xatoni xatolarni hisobot berish servisiga ham qayd etishingiz mumkin
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Siz istalgan maxsus zaxira UI ni render qilishingiz mumkin
      return Nimadir xato ketdi.;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Ushbu misolda:

`ErrorBoundary` komponenti `getDerivedStateFromError` va `componentDidCatch` metodlarini belgilaydi.
`getDerivedStateFromError` quyi komponentda xato yuz berganda chaqiriladi. U xato yuz berganligini ko'rsatish uchun holatni yangilaydi.
`componentDidCatch` xato ushlanganidan keyin chaqiriladi. U xatoni servisga yoki konsolga qayd etish imkonini beradi.
`render` metodi `hasError` holatini tekshiradi va agar xato yuz bergan bo'lsa, zaxira UI ni ko'rsatadi.

Error Boundaries-dan Foydalanish

`ErrorBoundary` komponentidan foydalanish uchun, shunchaki himoya qilmoqchi bo'lgan komponentlarni u bilan o'rang:


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

const MyComponent = () => {
  // Xatoni simulyatsiya qilish
  throw new Error('Xato yuz berdi!');
};

const App = () => {
  return (
    
      
    
  );
};

export default App;

Ushbu misolda, agar `MyComponent` da xato yuz bersa, `ErrorBoundary` komponenti xatoni ushlaydi va zaxira UI ni ko'rsatadi.

Suspense va Error Boundaries-ni Birlashtirish

Suspense va Error Boundaries asinxron operatsiyalar uchun mustahkam va keng qamrovli xatolarni boshqarish strategiyasini ta'minlash uchun birlashtirilishi mumkin. To'xtab qolishi mumkin bo'lgan komponentlarni ham Suspense, ham Error Boundaries bilan o'rab, siz yuklanish holatlarini va kutilmagan xatolarni silliq boshqarishingiz mumkin.

Suspense va Error Boundaries-ni Birlashtirish Misoli


import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

// Ma'lumotlarni olishni simulyatsiya qilish (masalan, API'dan)
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Muvaffaqiyatli ma'lumotlar olinishini simulyatsiya qilish
      // resolve({ name: 'John Doe', age: 30 });

      // Ma'lumotlarni olish paytida xatoni simulyatsiya qilish
      reject(new Error('Foydalanuvchi ma'lumotlarini olib bo'lmadi'));

    }, 2000);
  });
};

// Suspense ishlata oladigan resurs yaratish
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// Resursdan o'qiydigan komponent
const UserProfile = () => {
  const data = userData.read();
  return (
    
      Name: {data.name}
      Age: {data.age}
    
  );
};

const App = () => {
  return (
    
      Foydalanuvchi ma'lumotlari yuklanmoqda...}>
        
      
    
  );
};

export default App;

Ushbu misolda:

`ErrorBoundary` komponenti `Suspense` komponentini o'rab oladi.
`Suspense` komponenti `UserProfile` komponentini o'rab oladi.
Agar `fetchData` funksiyasi xato bilan rad etilsa, `Suspense` komponenti promise-ning rad etilishini ushlaydi va `ErrorBoundary` Suspense tomonidan tashlangan xatoni ushlaydi.
Shundan so'ng `ErrorBoundary` zaxira UI ni ko'rsatadi.
Agar ma'lumotlar muvaffaqiyatli olinsa, `Suspense` komponenti `UserProfile` komponentini ko'rsatadi.

Ilg'or Texnikalar va Eng Yaxshi Amaliyotlar

Suspense Samaradorligini Optimallashtirish

Memoizatsiyadan Foydalaning: Keraksiz qayta renderlarning oldini olish uchun Suspense chegaralari ichida render qilinadigan komponentlarni memoizatsiya qiling.
Chuqur Suspense Daraxtlaridan Saqlaning: Renderlash samaradorligiga ta'sirini kamaytirish uchun Suspense daraxtini sayoz saqlang.
Ma'lumotlarni Oldindan Yuklash: To'xtab qolish ehtimolini kamaytirish uchun ma'lumotlarni kerak bo'lishidan oldin oldindan yuklang.

Maxsus Error Boundaries

Siz ma'lum turdagi xatolarni boshqarish yoki ko'proq ma'lumot beruvchi xato xabarlarini taqdim etish uchun maxsus Error Boundaries yaratishingiz mumkin. Masalan, yuz bergan xato turiga qarab har xil zaxira UI ko'rsatadigan Error Boundary yaratishingiz mumkin.

Suspense bilan Server Tomonida Renderlash (SSR)

Suspense dastlabki sahifa yuklanish samaradorligini oshirish uchun Server Tomonida Renderlash (SSR) bilan ishlatilishi mumkin. SSR dan foydalanganda, siz ilovangizning dastlabki holatini serverda oldindan render qilishingiz va keyin qolgan tarkibni mijozga oqim (stream) orqali yuborishingiz mumkin. Suspense sizga SSR paytida asinxron ma'lumotlarni olishni boshqarish va ma'lumotlar oqim orqali yuborilayotganda yuklanish ko'rsatkichlarini ko'rsatish imkonini beradi.

Turli Xato Stsenariylarini Boshqarish

Ushbu turli xato stsenariylarini va ularni qanday boshqarishni ko'rib chiqing:

Tarmoq Xatolari: Foydalanuvchiga ma'lumot beruvchi xato xabarini ko'rsatib, tarmoq xatolarini silliq boshqaring.
API Xatolari: Yuz bergan xatoga xos bo'lgan xato xabarini ko'rsatib, API xatolarini boshqaring.
Kutilmagan Xatolar: Xatoni qayd etib va foydalanuvchiga umumiy xato xabarini ko'rsatib, kutilmagan xatolarni boshqaring.

Global Xatolarni Boshqarish

Error Boundaries tomonidan ushlanmagan xatolarni ushlash uchun global xatolarni boshqarish mexanizmini joriy qiling. Buni global xatolarni boshqaruvchi yordamida yoki butun ilovani Error Boundary bilan o'rash orqali amalga oshirish mumkin.

Haqiqiy Dunyo Misollari va Qo'llash Holatlari

Elektron Tijorat Ilovasi

Elektron tijorat ilovasida Suspense mahsulot ma'lumotlarini olish paytida yuklanish ko'rsatkichlarini ko'rsatish uchun ishlatilishi mumkin, Error Boundaries esa to'lov jarayonida yuzaga keladigan xatolarni boshqarish uchun ishlatilishi mumkin. Masalan, Yaponiyadagi foydalanuvchi Qo'shma Shtatlarda joylashgan onlayn do'konni ko'zdan kechirayotganini tasavvur qiling. Mahsulot rasmlari va tavsiflarining yuklanishi biroz vaqt talab qilishi mumkin. Suspense bu ma'lumotlar dunyoning narigi chekkasidagi serverdan olinayotganda oddiy yuklanish animatsiyasini ko'rsatishi mumkin. Agar to'lov shlyuzi vaqtinchalik tarmoq muammosi tufayli ishlamay qolsa (bu turli xil global internet infratuzilmalarida keng tarqalgan), Error Boundary foydalanuvchiga keyinroq qayta urinib ko'rishni taklif qiluvchi qulay xabarni ko'rsatishi mumkin.

Ijtimoiy Media Platformasi

Ijtimoiy media platformasida Suspense foydalanuvchi profillari va postlarini olish paytida yuklanish ko'rsatkichlarini ko'rsatish uchun, Error Boundaries esa rasm yoki videolarni yuklashda yuzaga keladigan xatolarni boshqarish uchun ishlatilishi mumkin. Hindistondan foydalanuvchi Yevropadagi serverlarda joylashtirilgan medialarni ko'rayotganda sekinroq yuklanish vaqtlariga duch kelishi mumkin. Suspense kontent to'liq yuklanmaguncha o'rinbosar ko'rsatishi mumkin. Agar ma'lum bir foydalanuvchining profil ma'lumotlari buzilgan bo'lsa (bu kamdan-kam, lekin mumkin), Error Boundary butun ijtimoiy tarmoq lentasining ishdan chiqishini oldini oladi va uning o'rniga "Foydalanuvchi profilini yuklab bo'lmadi" kabi oddiy xato xabarini ko'rsatadi.

Boshqaruv Paneli Ilovasi

Boshqaruv paneli ilovasida Suspense bir nechta manbalardan ma'lumotlarni olish paytida yuklanish ko'rsatkichlarini ko'rsatish uchun, Error Boundaries esa diagramma yoki grafiklarni yuklashda yuzaga keladigan xatolarni boshqarish uchun ishlatilishi mumkin. Londondagi moliyaviy tahlilchi global investitsiya boshqaruv paneliga kirayotganda dunyoning turli birjalaridan ma'lumotlarni yuklayotgan bo'lishi mumkin. Suspense har bir ma'lumot manbai uchun yuklanish ko'rsatkichlarini taqdim etishi mumkin. Agar bir birjaning API'si ishlamayotgan bo'lsa, Error Boundary aynan o'sha birjaning ma'lumotlari uchun xato xabarini ko'rsatib, butun boshqaruv panelining yaroqsiz holga kelishini oldini oladi.

Xulosa

React Suspense va Error Boundaries chidamli va foydalanuvchiga qulay React ilovalarini yaratish uchun muhim vositalardir. Yuklanish holatlarini boshqarish uchun Suspense-dan va kutilmagan xatolarni boshqarish uchun Error Boundaries-dan foydalanib, siz umumiy foydalanuvchi tajribasini yaxshilashingiz va ishlab chiqish jarayonini soddalashtirishingiz mumkin. Ushbu qo'llanma Suspense va Error Boundaries haqida keng qamrovli ma'lumot berdi, unda asosiy tushunchalardan tortib ilg'or texnikalargacha bo'lgan hamma narsa qamrab olindi. Ushbu maqolada keltirilgan eng yaxshi amaliyotlarga rioya qilish orqali siz eng qiyin stsenariylarni ham uddalay oladigan mustahkam va ishonchli React ilovalarini yaratishingiz mumkin.

React rivojlanishda davom etar ekan, Suspense va Error Boundaries zamonaviy veb-ilovalarini yaratishda tobora muhim rol o'ynashi mumkin. Ushbu xususiyatlarni o'zlashtirish orqali siz ilg'or bo'lib qolishingiz va ajoyib foydalanuvchi tajribalarini taqdim etishingiz mumkin.