M

MLOG

O'zbek

React Suspense yordamida ma'lumotlarni samarali yuklashni o'rganing! Komponent darajasidagi yuklashdan parallel yuklashgacha turli strategiyalarni ko'rib chiqing va sezgir, qulay ilovalar yarating.

React Suspense: Zamonaviy Ilovalar Uchun Ma'lumotlarni Yuklash Strategiyalari

React Suspense – bu React 16.6 versiyasida taqdim etilgan kuchli xususiyat bo'lib, u asinxron operatsiyalarni, ayniqsa ma'lumotlarni yuklashni soddalashtiradi. U ma'lumotlar yuklanishini kutish paytida komponent renderini "to'xtatib turish" imkonini beradi va yuklanish holatlarini boshqarishning yanada deklarativ va foydalanuvchiga qulay usulini ta'minlaydi. Ushbu qo'llanmada React Suspense yordamida ma'lumotlarni yuklashning turli strategiyalari ko'rib chiqiladi va sezgir hamda yuqori samarali ilovalar yaratish bo'yicha amaliy tavsiyalar beriladi.

React Suspense'ni Tushunish

Maxsus strategiyalarni ko'rib chiqishdan oldin, React Suspense'ning asosiy tushunchalarini tushunib olaylik:

Suspense Bilan Ma'lumotlarni Yuklash Strategiyalari

Quyida React Suspense yordamida ma'lumotlarni yuklashning bir nechta samarali strategiyalari keltirilgan:

1. Komponent Darajasida Ma'lumotlarni Yuklash

Bu eng oddiy yondashuv bo'lib, unda har bir komponent Suspense chegarasi ichida o'z ma'lumotlarini yuklaydi. Bu mustaqil ma'lumot talablariga ega bo'lgan oddiy komponentlar uchun mos keladi.

Misol:

Aytaylik, bizda API'dan foydalanuvchi ma'lumotlarini yuklashi kerak bo'lgan UserProfile komponenti bor:

// Oddiy ma'lumotlarni yuklash utilitasi (o'zingiz afzal ko'rgan kutubxona bilan almashtiring)
const fetchData = (url) => {
  let status = 'pending';
  let result;
  let suspender = fetch(url)
    .then(res => {
      if (!res.ok) {
        throw new Error(`HTTP xatosi! Status: ${res.status}`);
      }
      return res.json();
    })
    .then(
      res => {
        status = 'success';
        result = res;
      },
      err => {
        status = 'error';
        result = err;
      }
    );

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

const userResource = fetchData('/api/user/123');

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

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

Izoh:

Afzalliklari:

Kamchiliklari:

2. Parallel Ma'lumotlarni Yuklash

"Sharshara" usulida yuklashni oldini olish uchun siz bir vaqtning o'zida bir nechta ma'lumot so'rovlarini boshlashingiz va komponentlarni render qilishdan oldin ularning barchasini kutish uchun Promise.all yoki shunga o'xshash usullardan foydalanishingiz mumkin. Bu umumiy yuklanish vaqtini minimallashtiradi.

Misol:

const userResource = fetchData('/api/user/123');
const postsResource = fetchData('/api/user/123/posts');

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={<div>Foydalanuvchi ma'lumotlari va postlar yuklanmoqda...</div>}>
      <UserProfile />
    </Suspense>
  );
}

Izoh:

Afzalliklari:

Kamchiliklari:

3. Selektiv Gidratatsiya (Server Tomonidan Renderlash - SSR uchun)

Server Tomonidan Renderlash (SSR) dan foydalanganda, Suspense sahifaning qismlarini selektiv ravishda gidratatsiya qilish uchun ishlatilishi mumkin. Bu siz sahifaning eng muhim qismlarini birinchi navbatda gidratatsiya qilishni ustuvorlashtirishingiz mumkin deganidir, bu esa Interaktivlikgacha Bo'lgan Vaqtni (TTI) va seziladigan samaradorlikni yaxshilaydi. Bu asosiy tartibni yoki yadro kontentini iloji boricha tezroq ko'rsatishni xohlagan holatlarda foydalidir, shu bilan birga kamroq muhim komponentlarning gidratatsiyasini kechiktiradi.

Misol (Konseptual):

// Server tomonida:
<Suspense fallback={<div>Muhim kontent yuklanmoqda...</div>}>
  <CriticalContent />
</Suspense>
<Suspense fallback={<div>Ixtiyoriy kontent yuklanmoqda...</div>}>
  <OptionalContent />
</Suspense>

Izoh:

Afzalliklari:

Kamchiliklari:

4. Suspense'ni Qo'llab-quvvatlaydigan Ma'lumotlarni Yuklash Kutubxonalari

Bir nechta mashhur ma'lumotlarni yuklash kutubxonalari React Suspense uchun o'rnatilgan qo'llab-quvvatlashga ega. Bu kutubxonalar ko'pincha ma'lumotlarni yuklash va Suspense bilan integratsiya qilishning qulayroq va samaraliroq usulini ta'minlaydi. Ba'zi e'tiborga loyiq misollar:

Misol (SWR yordamida):

import useSWR from 'swr'

const fetcher = (...args) => fetch(...args).then(res => res.json())

function UserProfile() {
  const { data: user, error } = useSWR('/api/user/123', fetcher, { suspense: true })

  if (error) return <div>yuklashda xatolik</div>
  if (!user) return <div>yuklanmoqda...</div> // Bu Suspense bilan deyarli hech qachon render qilinmaydi

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  )
}

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

Izoh:

Afzalliklari:

Kamchiliklari:

Suspense Bilan Xatoliklarni Qayta Ishlash

Suspense'dan foydalanganda xatoliklarni qayta ishlash juda muhim. React Suspense chegaralari ichida yuzaga keladigan xatoliklarni ushlash uchun ErrorBoundary komponentini taqdim etadi.

Misol:

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

  static getDerivedStateFromError(error) {
    // Keyingi render zaxira interfeysini ko'rsatishi uchun holatni yangilang.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Siz xatoni xatoliklar haqida hisobot berish xizmatiga ham yuborishingiz mumkin
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Siz har qanday maxsus zaxira interfeysini render qilishingiz mumkin
      return <h1>Nimadir noto'g'ri ketdi.</h1>;
    }

    return this.props.children; 
  }
}

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>Yuklanmoqda...</div>}>
        <UserProfile />
      </Suspense>
    </ErrorBoundary>
  );
}

Izoh:

React Suspense'dan Foydalanish Bo'yicha Eng Yaxshi Amaliyotlar

Haqiqiy Hayotdan Misollar

React Suspense turli xil stsenariylarda qo'llanilishi mumkin, jumladan:

1-misol: Xalqaro elektron tijorat platformasi

Turli mamlakatlardagi mijozlarga xizmat ko'rsatadigan elektron tijorat platformasini tasavvur qiling. Narxlar va tavsiflar kabi mahsulot tafsilotlarini foydalanuvchining joylashuviga qarab yuklash kerak bo'lishi mumkin. Suspense lokalizatsiya qilingan mahsulot ma'lumotlarini yuklash paytida yuklanish indikatorini ko'rsatish uchun ishlatilishi mumkin.

function ProductDetails({ productId, locale }) {
  const productResource = fetchData(`/api/products/${productId}?locale=${locale}`);
  const product = productResource.read();

  return (
    <div>
      <h2>{product.name}</h2>
      <p>Narxi: {product.price}</p>
      <p>Tavsifi: {product.description}</p>
    </div>
  );
}

function App() {
  const userLocale = getUserLocale(); // Foydalanuvchi lokalini aniqlash funksiyasi
  return (
    <Suspense fallback={<div>Mahsulot tafsilotlari yuklanmoqda...</div>}>
      <ProductDetails productId="123" locale={userLocale} />
    </Suspense>
  );
}

2-misol: Global ijtimoiy media lentasi

Dunyo bo'ylab foydalanuvchilarning postlari lentasini ko'rsatadigan ijtimoiy media platformasini ko'rib chiqing. Har bir post matn, tasvir va videolarni o'z ichiga olishi mumkin, ularni yuklash uchun har xil vaqt ketishi mumkin. Suspense alohida postlar uchun ularning tarkibi yuklanayotganda o'rinbosarlarni ko'rsatish uchun ishlatilishi mumkin, bu esa silliqroq aylantirish tajribasini ta'minlaydi.

function Post({ postId }) {
  const postResource = fetchData(`/api/posts/${postId}`);
  const post = postResource.read();

  return (
    <div>
      <p>{post.text}</p>
      {post.image && <img src={post.image} alt="Post Rasmi" />}
      {post.video && <video src={post.video} controls />}
    </div>
  );
}

function App() {
  const postIds = getPostIds(); // Post ID'lari ro'yxatini olish funksiyasi
  return (
    <div>
      {postIds.map(postId => (
        <Suspense key={postId} fallback={<div>Post yuklanmoqda...</div>}>
          <Post postId={postId} />
        </Suspense>
      ))}
    </div>
  );
}

Xulosa

React Suspense – React ilovalarida asinxron ma'lumotlarni yuklashni boshqarish uchun kuchli vositadir. Turli xil ma'lumotlarni yuklash strategiyalari va eng yaxshi amaliyotlarni tushunish orqali siz ajoyib foydalanuvchi tajribasini taqdim etadigan sezgir, foydalanuvchiga qulay va samarali ilovalar yaratishingiz mumkin. O'zingizning maxsus ehtiyojlaringiz uchun eng yaxshi yondashuvni topish uchun turli strategiyalar va kutubxonalar bilan tajriba o'tkazing.

React rivojlanishda davom etar ekan, Suspense ma'lumotlarni yuklash va render qilishda yanada muhimroq rol o'ynashi mumkin. Eng so'nggi ishlanmalar va eng yaxshi amaliyotlardan xabardor bo'lish ushbu xususiyatning to'liq salohiyatidan foydalanishga yordam beradi.