React Suspense Patternlari: Ma'lumotlarni Yuklash va Xatolik Chegaralari

React Suspense - bu ma'lumotlarni yuklash kabi asenkron operatsiyalar tugashini kutayotganda komponentni "to'xtatib qo'yish" imkonini beruvchi kuchli xususiyatdir. Xatolik chegaralari bilan birgalikda u yuklanish holatlari va xatoliklarni boshqarish uchun mustahkam mexanizmni ta'minlaydi, natijada yanada silliq va chidamli foydalanuvchi tajribasi paydo bo'ladi. Ushbu maqola React ilovalarida Suspense va Xatolik Chegaralaridan samarali foydalanish uchun turli naqshlarni o'rganadi.

React Suspense-ni tushunish

Asosiy mohiyatiga ko'ra, Suspense - bu React-ga komponentni render qilishdan oldin nimadir kutishga imkon beradigan mexanizmdir. Bu "nimadir" odatda API-dan ma'lumotlarni olish kabi asenkron operatsiya hisoblanadi. Bo'sh ekran yoki potentsial adashtiruvchi oraliq holatni ko'rsatish o'rniga, ma'lumotlar yuklanayotganda orqaga qaytish UI-ni (masalan, yuklanish spinneri) ko'rsatishingiz mumkin.

Asosiy afzalligi - yaxshilangan sezgir ishlash va yanada yoqimli foydalanuvchi tajribasi. Foydalanuvchilarga ilova muzlab qolganmi degan savol tug'ilish o'rniga, nimadir sodir bo'layotganini ko'rsatadigan vizual fikr-mulohazalar darhol taqdim etiladi.

Asosiy tushunchalar

• Suspense Komponenti: <Suspense> komponenti to'xtatilishi mumkin bo'lgan komponentlarni o'rab oladi. U fallback prop-ni qabul qiladi, bu o'ralgan komponentlar to'xtatilganda render qilinadigan UI-ni belgilaydi.
• Fallback UI: Bu asenkron operatsiya davom etayotganda ko'rsatiladigan UI. Bu oddiy yuklanish spinneridan tortib yanada murakkab animatsiyagacha bo'lishi mumkin.
• Promise Integratsiyasi: Suspense Promises bilan ishlaydi. Komponent hali hal qilinmagan Promisedan qiymatni o'qishga harakat qilsa, React komponentni to'xtatib, fallback UI-ni ko'rsatadi.
• Ma'lumotlar manbalari: Suspense Suspense-dan xabardor bo'lgan ma'lumotlar manbalariga tayanadi. Ushbu manbalar React-ga ma'lumotlar qachon olinayotganini aniqlashga imkon beradigan API-ni ochib beradi.

Suspense bilan ma'lumotlarni olish

Ma'lumotlarni olish uchun Suspense-dan foydalanish uchun sizga Suspense-dan xabardor ma'lumotlarni olish kutubxonasi kerak bo'ladi. Mana, maxsus `fetchData` funktsiyasidan foydalangan holda keng tarqalgan yondashuv:

Misol: Oddiy ma'lumotlarni olish

Avvalo, ma'lumotlarni olish uchun yordamchi funktsiyani yarating. Ushbu funktsiya 'to'xtatib turish' jihatini boshqarishi kerak. Va'da holatini to'g'ri boshqarish uchun fetch qo'ng'iroqlarimizni maxsus resursga o'rab olamiz.

            // utils/api.js
const wrapPromise = (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 fetchData = (url) => {
  const promise = fetch(url)
    .then((res) => res.json())
    .then((data) => data);
  return wrapPromise(promise);
};

export default fetchData;
            

              
                Copy
              
            
          

Endi, Suspense-dan foydalanib foydalanuvchi ma'lumotlarini ko'rsatadigan komponentni yarataylik:

            // components/UserProfile.js
import React from 'react';
import fetchData from '../utils/api';

const resource = fetchData('https://jsonplaceholder.typicode.com/users/1');

function UserProfile() {
  const user = resource.read();
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <p>Phone: {user.phone}</p>
    </div>
  );
}

export default UserProfile;
            

              
                Copy
              
            
          

Nihoyat, UserProfile komponentini <Suspense> bilan o'rab oling:

            // App.js
import React, { Suspense } from 'react';
import UserProfile from './components/UserProfile';

function App() {
  return (
    <Suspense fallback={<p>Foydalanuvchi ma'lumotlari yuklanmoqda...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;
            

              
                Copy
              
            
          

Ushbu misolda UserProfile komponenti resursdan user ma'lumotlarini o'qishga harakat qiladi. Agar ma'lumotlar hali mavjud bo'lmasa (Promise hali ham kutilayotgan bo'lsa), komponent to'xtatiladi va fallback UI ("Foydalanuvchi ma'lumotlari yuklanmoqda...") ko'rsatiladi. Ma'lumotlar olingandan so'ng, komponent haqiqiy foydalanuvchi ma'lumotlari bilan qayta render qilinadi.

Ushbu yondashuvning afzalliklari

• Deklarativ ma'lumotlarni olish: Komponent *qanday* ma'lumotlar kerakligini ifodalaydi, *qanday* qilib olishni emas.
• Markazlashtirilgan yuklanish holatini boshqarish: Suspense komponenti yuklanish holatini boshqaradi va komponent mantiqini soddalashtiradi.

Chidamlilik uchun xatolik chegaralari

Suspense yuklanish holatlarini oqlik bilan boshqarsa-da, ma'lumotlarni olish yoki komponentni render qilish paytida yuzaga kelishi mumkin bo'lgan xatolarni o'z-o'zidan hal qilmaydi. Xatolik chegaralari aynan shu yerda qo'l keladi.

Xatolik chegaralari - bu o'zining bola komponenti daraxtidagi istalgan joyda JavaScript xatolarini ushlaydigan, ushbu xatolarni qayd etadigan va butun ilovani buzish o'rniga fallback UI-ni ko'rsatadigan React komponentlaridir. Ular kutilmagan xatolarni oqlik bilan hal qila oladigan chidamli UI-larni yaratish uchun juda muhimdir.

Xatolik chegarasini yaratish

Xatolik chegarasini yaratish uchun siz static getDerivedStateFromError() va componentDidCatch() hayotiy sikl usullarini amalga oshiradigan sinf komponentini aniqlashingiz kerak.

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

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null
    };
  }

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

  componentDidCatch(error, errorInfo) {
    // Shuningdek, xatoni xato haqida xabar berish xizmatiga yozib qo'yishingiz mumkin
    console.error("Ushlangan xato: ", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // Har qanday maxsus fallback UI-ni render qilishingiz mumkin
      return (
        <div>
          <h2>Nimadir noto'g'ri ketdi.</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;
            

              
                Copy
              
            
          

getDerivedStateFromError usuli avlod komponentida xato yuz berganda chaqiriladi. U xato yuz berganligini ko'rsatish uchun holatni yangilaydi.

componentDidCatch usuli xato yuz bergandan keyin chaqiriladi. U xato va xato ma'lumotlarini oladi, ulardan xato haqida xabar berish xizmatiga xatoni yozib qo'yish yoki yanada informativ xato xabarini ko'rsatish uchun foydalanishingiz mumkin.

Suspense bilan xatolik chegaralaridan foydalanish

Xatolik chegaralarini Suspense bilan birlashtirish uchun <Suspense> komponentini <ErrorBoundary> komponenti bilan o'rab oling:

            // App.js
import React, { Suspense } from 'react';
import UserProfile from './components/UserProfile';
import ErrorBoundary from './components/ErrorBoundary';

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<p>Foydalanuvchi ma'lumotlari yuklanmoqda...</p>}>
        <UserProfile />
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;
            

              
                Copy
              
            
          

Endi, agar ma'lumotlarni olish yoki UserProfile komponentini render qilish paytida xato yuz bersa, xatolik chegarasi xatoni ushlaydi va fallback UI-ni ko'rsatadi va butun ilovaning buzilishiga yo'l qo'ymaydi.

Murakkab Suspense naqshlari

Asosiy ma'lumotlarni olish va xatolarni hal qilishdan tashqari, Suspense yanada murakkab UI-larni yaratish uchun bir nechta murakkab naqshlarni taklif etadi.

Suspense bilan kodni bo'lish

Kodni bo'lish - bu ilovangizni talab bo'yicha yuklanishi mumkin bo'lgan kichik qismlarga bo'lish jarayonidir. Bu ilovangizning dastlabki yuklanish vaqtini sezilarli darajada yaxshilashi mumkin.

React.lazy va Suspense kodni bo'lishni juda osonlashtiradi. Komponentlarni dinamik ravishda import qilish uchun React.lazy-dan foydalanishingiz va so'ngra ularni komponentlar yuklanayotganda fallback UI-ni ko'rsatish uchun <Suspense> bilan o'rashingiz mumkin.

            // components/MyComponent.js
import React from 'react';

const MyComponent = React.lazy(() => import('./AnotherComponent'));

function App() {
  return (
    <Suspense fallback={<p>Komponent yuklanmoqda...</p>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;
            

              
                Copy
              
            
          

Ushbu misolda MyComponent talab bo'yicha yuklanadi. U yuklanayotganda fallback UI ("Komponent yuklanmoqda...") ko'rsatiladi. Komponent yuklangandan so'ng, u odatdagidek render qilinadi.

Parallel ma'lumotlarni olish

Suspense bir nechta ma'lumot manbalarini parallel ravishda olish va barcha ma'lumotlar yuklanayotganda bitta fallback UI-ni ko'rsatish imkonini beradi. Bu bitta komponentni render qilish uchun bir nechta API-dan ma'lumotlarni olish kerak bo'lganda foydali bo'lishi mumkin.

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

const userResource = fetchData('https://jsonplaceholder.typicode.com/users/1');
const postsResource = fetchData('https://jsonplaceholder.typicode.com/posts?userId=1');

function UserProfile() {
  const user = userResource.read();
  const posts = postsResource.read();

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <h3>Postlar:</h3>
      <ul>
        {posts.map(post => (<li key={post.id}>{post.title}</li>))}
      </ul>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<p>Foydalanuvchi ma'lumotlari va postlar yuklanmoqda...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;
            

              
                Copy
              
            
          

Ushbu misolda UserProfile komponenti foydalanuvchi ma'lumotlari va postlar ma'lumotlarini parallel ravishda oladi. <Suspense> komponenti barcha ma'lumot manbalari yuklanayotganda bitta fallback UI-ni ko'rsatadi.

useTransition bilan Transition API

React 18 Suspense-ni UI yangilanishlarini o'tishlar sifatida boshqarish usulini ta'minlash orqali yaxshilaydigan useTransition ilmoqini taqdim etdi. Bu shuni anglatadiki, siz ba'zi holat yangilanishlarini unchalik shoshilinch emas deb belgilashingiz va ularning UI-ni bloklashiga yo'l qo'ymasligingiz mumkin. Bu, ayniqsa, sekinroq ma'lumotlarni olish yoki murakkab renderlash operatsiyalari bilan ishlashda foydalidir va sezgir ishlashni yaxshilaydi.

Mana, useTransition-dan qanday foydalanishingiz mumkin:

            import React, { useState, Suspense, useTransition } from 'react';
import fetchData from './api';

const resource = fetchData('https://jsonplaceholder.typicode.com/users/1');

function UserProfile() {
  const user = resource.read();
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <p>Phone: {user.phone}</p>
    </div>
  );
}

function App() {
  const [isPending, startTransition] = useTransition();
  const [showProfile, setShowProfile] = useState(false);

  const handleClick = () => {
    startTransition(() => {
      setShowProfile(true);
    });
  };

  return (
    <div>
      <button onClick={handleClick} disabled={isPending}>
        Foydalanuvchi profilini ko'rsatish
      </button>
      {isPending && <p>Yuklanmoqda...</p>}
      <Suspense fallback={<p>Foydalanuvchi ma'lumotlari yuklanmoqda...</p>}>
        {showProfile && <UserProfile />}
      </Suspense>
    </div>
  );
}

export default App;
            

              
                Copy
              
            
          

Ushbu misolda “Foydalanuvchi profilini ko‘rsatish” tugmasini bosish o‘tishni boshlaydi. startTransition setShowProfile yangilanishini o'tish sifatida belgilaydi va React-ga boshqa UI yangilanishlariga ustuvorlik berishga imkon beradi. useTransition-dan olingan isPending qiymati o'tishning davom etayotganligini ko'rsatadi va vizual fikr-mulohazalarni ta'minlashga imkon beradi (masalan, tugmani o'chirib qo'yish va yuklanish xabarini ko'rsatish).

Suspense va xatolik chegaralaridan foydalanish uchun eng yaxshi amaliyotlar

• Suspense-ni imkon qadar kichikroq maydon atrofida o'rab oling: Ilovangizning katta qismlarini <Suspense> bilan o'rashdan saqlaning. Buning o'rniga, faqat to'xtatib turishga muhtoj bo'lgan komponentlarni o'rab oling. Bu UI-ning qolgan qismiga ta'sirini minimallashtiradi.
• Mazmunli fallback UI-lardan foydalaning: Fallback UI foydalanuvchilarga nima bo'layotgani haqida aniq va informatsion fikr-mulohazalar bilan ta'minlashi kerak. Umumiy yuklanish spinnerlaridan saqlaning; buning o'rniga, ko'proq kontekstni taqdim etishga harakat qiling (masalan, "Foydalanuvchi ma'lumotlari yuklanmoqda...").
• Xatolik chegaralarini strategik joylashtiring: Xatolik chegaralarini qayerga qo'yishni diqqat bilan o'ylab ko'ring. Bir nechta komponentga ta'sir qilishi mumkin bo'lgan xatolarni ushlash uchun komponent daraxtida etarlicha yuqori joylashtiring, lekin faqat bitta komponentga xos bo'lgan xatolarni ushlamaslik uchun etarlicha past joylashtiring.
• Xatolarni yozib oling: Xatolik haqida xabar berish xizmatiga xatolarni yozib olish uchun componentDidCatch usulidan foydalaning. Bu sizga ilovangizdagi xatolarni aniqlashga va tuzatishga yordam beradi.
• Foydalanuvchilarga qulay xato xabarlarini taqdim eting: Xatolik chegaralari tomonidan ko'rsatilgan fallback UI foydalanuvchilarga xato haqida foydali ma'lumot va ular bu haqda nima qila olishlari haqida ma'lumot berishi kerak. Texnik jargonlardan saqlaning; buning o'rniga, aniq va qisqa tildan foydalaning.
• Xatolik chegaralaringizni sinab ko'ring: Ilovangizda ataylab xatolarni tashlab, xatolik chegaralaringiz to'g'ri ishlayotganiga ishonch hosil qiling.

Xalqaro mulohazalar

• Mahalliylashtirish: Fallback UI-lar va xato xabarlari ilovangiz tomonidan qo'llab-quvvatlanadigan har bir til uchun to'g'ri mahalliylashtirilganligiga ishonch hosil qiling. Tarjimalarni boshqarish uchun react-intl yoki i18next kabi internatsionalizatsiya (i18n) kutubxonalaridan foydalaning.
• O'ngdan chapga (RTL) tartiblari: Agar ilovangiz RTL tillarini (masalan, arab, ibroniy) qo'llab-quvvatlasa, fallback UI-lar va xato xabarlari RTL tartiblarida to'g'ri ko'rsatilishiga ishonch hosil qiling. LTR va RTL tartiblarini qo'llab-quvvatlash uchun CSS mantiqiy xususiyatlaridan (masalan, margin-left o'rniga margin-inline-start) foydalaning.
• Qulaylik: Fallback UI-lar va xato xabarlari nogironligi bo'lgan foydalanuvchilar uchun qulay bo'lishiga ishonch hosil qiling. Yuklanish holati va xato xabarlari haqida semantik ma'lumotni taqdim etish uchun ARIA atributlaridan foydalaning.
• Madaniy sezgirlik: Fallback UI-larni va xato xabarlarini loyihalashda madaniy farqlarni yodda tuting. Ba'zi madaniyatlarda haqoratli yoki noto'g'ri bo'lishi mumkin bo'lgan tasvirlar yoki tildan foydalanishdan saqlaning. Masalan, keng tarqalgan yuklanish spinneri ba'zi madaniyatlarda salbiy qabul qilinishi mumkin.

Misol: Mahalliylashtirilgan xato xabari

react-intl-dan foydalanib, siz mahalliylashtirilgan xato xabarlarini yaratishingiz mumkin:

            // components/ErrorBoundary.js
import React from 'react';
import { FormattedMessage } from 'react-intl';

class ErrorBoundary extends React.Component {
  // ... (oldin bilan bir xil)

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2><FormattedMessage id="error.title" defaultMessage="Nimadir noto'g'ri ketdi." /></h2>
          <p><FormattedMessage id="error.message" defaultMessage="Iltimos, keyinroq urinib ko'ring." /></p>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;
            

              
                Copy
              
            
          

Keyin, tarjimalarni o'z mahalliy fayllaringizda aniqlang:

            // locales/en.json
{
  "error.title": "Nimadir noto'g'ri ketdi.",
  "error.message": "Iltimos, keyinroq urinib ko'ring."
}

// locales/fr.json
{
  "error.title": "Quelque chose s'est mal passé.",
  "error.message": "Veuillez réessayer plus tard."
}

            

              
                Copy
              
            
          

Xulosa

React Suspense va Xatolik Chegaralari zamonaviy, chidamli va foydalanuvchilar uchun qulay UI-larni yaratish uchun muhim vositalardir. Ushbu maqolada tasvirlangan naqshlarni tushunish va qo'llash orqali siz React ilovalaringizning sezgir ishlashini va umumiy sifatini sezilarli darajada yaxshilashingiz mumkin. Ilovalaringiz butun dunyo bo'ylab foydalanuvchilar tomonidan ishlatilishi mumkinligiga ishonch hosil qilish uchun internatsionalizatsiya va qulaylikni hisobga olishni unutmang.

Asenkron ma'lumotlarni olish va xatolarni to'g'ri hal qilish har qanday veb-ilovaning muhim jihatlari hisoblanadi. Suspense Xatolik Chegaralari bilan birgalikda React-da ushbu murakkabliklarni boshqarishning deklarativ va samarali usulini taklif etadi va natijada butun dunyo bo'ylab foydalanuvchilar uchun yanada silliq va ishonchli foydalanuvchi tajribasini ta'minlaydi.