Özet - Suspense ve lazy

Bir ağır modal'ı React.lazy ile yükleyip Suspense ile sararsın.

Özet - Suspense ve lazy

Bu grupta React.lazy ile kod bölme, Suspense ile yükleme sınırı ve çoklu sınır kullanımını öğrendin. lazy bileşeni ihtiyaç anında yükler; Suspense yükleme sırasında yedek gösterir.

Çoklu sınır ise her bölümün ayrı yüklenmesini sağlar; kullanıcı kademeli olarak içerik görür. Son adımda üç aracı birleştireceksin.

Uygulama Özet lazy

Aşağıdaki iskeleti tamamla. Heavy bileşenini lazy ile tanımla; App <Suspense fallback={"{"<Spinner />}"}><Heavy /></Suspense> döndürsün. Dışa aktar.

Örnek çözümü göster

import { lazy, Suspense } from "react";

const Heavy = lazy(() => import("./Heavy"));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Heavy />
    </Suspense>
  );
}

export default App;

Kendini test et

Hangisi kod bölme sağlar?
- useRef
- useEffect
- React.lazy
- useState
Cevabı göster

React.lazy — React.lazy kod bölme sağlar.
Özet eşleştir

React.lazy

Kod bölme
Suspense

Yükleme sınırı
fallback

Yedek içerik
çoklu sınır

Kademeli yükleme

Sıradaki ders: Portal nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler