Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

React Suspense

React Suspense sizga kod yoki ma’lumotlar yuklanishini kutayotganda muqobil HTMLni ko‘rsatish imkonini beradi.

Muqobil HTML component, matn yoki har qanday tegishli kontent bo‘lishi mumkin.

ULASHISH

Suspense nima?

Suspense - bu kod yoki ma’lumotlar yuklanishini kutayotganda componentlaringizga muqobil HTMLni ko‘rsatishga imkon beruvchi React xususiyati.

Eng keng tarqalgan foydalanish holatlari:

  • Suspens-faylli frameworklar yordamida ma’lumotlarni olish
  • React.lazy() yordamida componentlarni dinamik ravishda yuklash

Suspense-dan foydalanish

Agar componentni yuklash uchun vaqt kerak bo‘lsa, siz Suspense componentidan foydalanishingiz mumkin va u component yuklanayotganda zaxira tarkibni ko‘rsatadi.

Misol

Fruits componentini yuklash uchun ikki soniya vaqt ketadi, shuning uchun yuklanayotgan vaqtda yuklash xabarini ko‘rsatish uchun uni Suspense componentiga o‘rab olamiz.

import { createRoot } from 'react-dom/client';
import { Suspense } from 'react';
import Fruits from './Fruits';

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Fruits />
      </Suspense>
    </div>
  );
}

createRoot(document.getElementById('root')).render(
  <App />
);

Misolni ishga tushirish »

Suspense’ni lazy loading (kechiktirilgan yuklash) bilan ishlatish

Suspense componentidan yana bir keng tarqalgan foydalanish lazy yuklangan componentlarni import qilishdir:

Yuqoridagi misolda biz yuklash xabarini ko‘rish uchun ikki soniyalik kechikishni soxtalashtirishimiz kerak edi. Massivdan uchta mevani ko‘rsatish kabi vazifa yuklash xabarini umuman ko‘rish uchun juda tez bo‘ladi.

Ammo lazy yuklanishi bilan biz componentni dinamik ravishda import qilishimiz mumkin va u yuklanayotganda yuklash xabarini ko‘rsatadi, vazifa juda tez bo‘lsa ham.

Keling, avval lazy yuklashdan foydalanmasdan misol yarataylik, bu yerda biz ikki soniya kechikishni soxta qilmaymiz:

Misol

Ushbu misol yuklash xabarini ko‘rish uchun juda tez:

import { createRoot } from 'react-dom/client';
import { Suspense } from 'react';
import Cars from './Cars';

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Cars />
      </Suspense>
    </div>
  );
}

createRoot(document.getElementById('root')).render(
  <App />
);

Misolni ishga tushirish »

Keling, lazy yuklash yordamida WITH misolini yarataylik:

Misol

Yuqoridagi misolning o‘zi, lekin lazy yuklash bilan:

import { createRoot } from 'react-dom/client';
import { Suspense, lazy } from 'react';

const Cars = lazy(() => import('./Cars'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Cars />
      </Suspense>
    </div>
  );
}

createRoot(document.getElementById('root')).render(
  <App />
);

Misolni ishga tushirish »

Misol tushuntirildi

  • lazy() componentni dinamik ravishda yuklash imkonini beradi
  • Suspense component yuklanayotganda orqaga qaytishni ko‘rsatadi

Bir nechta componentlar

Bitta Suspense componenti bir nechta lazy (kechiktirib yuklanadigan) componentlarni o‘rashi mumkin:

Misol

import { createRoot } from 'react-dom/client';
import { Suspense, lazy } from 'react';

const Header = lazy(() => import('./Header'));
const Content = lazy(() => import('./Content'));
const Sidebar = lazy(() => import('./Sidebar'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Header />
        <div style={{ display: 'flex' }}>
          <Sidebar />
          <Content />
        </div>
      </Suspense>
    </div>
  );
}

createRoot(document.getElementById('root')).render(
  <App />
);

Misolni ishga tushirish »

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish