Analisis singkat SuspenseList di React18 dan apa kegunaannya

Cara cepat memulai VUE3.0: Pelajari tentang

Suspense dulu dan sekarang.

Fitur ini muncul di versi historis React. Pertama kali adalah versi 16.6, yang merilis komponen Suspense yang mendukung pemisahan kode. Ekstraksi data sekarang didukung di versi 16.9. Siswa yang tertarik dapat pindah ke changelog React .

Penggunaan Suspense yang sederhana

telah diperkenalkan sebelumnya. Kami hanya menggunakan contoh untuk meninjau konsep dan penggunaan

// Komponen ini dimuat secara dinamis const OtherComponent = React.lazy(() => import('./OtherComponent'));

fungsi Komponen Saya() {
  kembali (
    <Penggantian React.Suspense={<Spinner />}>
      <div>
        <Komponen Lainnya />
      </div>
    </Reaksi.Ketegangan>
  );
}

Jika komponen OtherComponent belum memiliki kondisi rendering, komponen yang diteruskan oleh fallback akan digunakan untuk rendering prefabrikasi. Manifestasi spesifik dari kurangnya kondisi rendering di sini adalah waktu akuisisi data Suspense lama, struktur komponen yang rumit, dll., namun kami tidak ingin hal ini memengaruhi rendering layar pertama atau inisialisasi aplikasi telah memperkenalkannya, jadi saya tidak akan menjelaskan secara detail.

Apa itu SuspenseList

dapat dengan mudah dipahami secara harfiah. Yaitu, jika ada beberapa Suspense dalam kode kita, bagaimana kita mengontrol urutan tampilan dan metode tampilannya? Oleh karena itu, React secara resmi memberi kita komponen SuspenseList .

<SuspenseList mengungkapkanOrder="maju">
  <Fallback ketegangan={'Memuat...'}>
    <ID Gambar Profil={1} />
  </Ketegangan>
  <Fallback ketegangan={'Memuat...'}>
    <ID Gambar Profil={2} />
  </Ketegangan>
  <Fallback ketegangan={'Memuat...'}>
    <ID Gambar Profil={3} />
  </Ketegangan>
  ...
</SuspenseList>

Pertama mari kita perkenalkan dua Props dari SuspenseList

revealOrder mewakili urutan pemuatan sub Suspense . Nilai opsionalnya adalah forwards , backwards , dan together

• forwards mewakili level yang sama ke belakang, terlepas dari kecepatan permintaan. Menampilkan mundur terlebih dahulu

• backwards kebalikan dari maju.

• together berarti bahwa semua suspens ditampilkan pada saat yang sama ketika sudah siap, alih-alih menampilkannya satu per

tail item yang dibongkar di SuspenseList

Secara default, SuspenseList akan menampilkan semua fallback

• collapsed

• SuspenseList daftar

dan hanya menampilkan daftar.

Proyek fallback hidden berikutnya yang dibongkar tidak menampilkan informasi apa pun

ps: SuspenseList hanya berfungsi di Suspense atau SuspenseList dari sub-level langsung. , dan tidak akan berfungsi pada node cucu.

Peran SuspenseList

SuspenseList memungkinkan kita melakukan orkestrasi gabungan dari sekelompok perilaku Suspense . Meskipun demo dalam demonstrasi relatif sederhana, dalam proyek yang relatif besar, kita sering menggunakan Layout untuk tata letak. Ambil contoh platform manajemen menengah dan back-end umum kami serta halaman utama sisi C.

Pada sistem tengah dan back-end, kita sering menggunakan metode tata letak bilah atas + bilah sisi + halaman utama. Pada tingkat ini, industri saat ini sebagian besar mempraktikkan rutinitas mikro-front-end, seperti qiankun.js , termasuk. tim penulis. Menjelajahi serangkaian sistem implementasi mikro front-end. Jika Anda berada di halaman sisi C, mungkin tidak tepat menggunakan metode mikro front-end. Jika ada persyaratan untuk rendering multi-blok di halaman, Anda dapat menggunakan SuspenseList dan Suspense yang dikombinasikan dengan kemampuan backend React. untuk merender SSR untuk mencapai rendering blok independen dengan cara yang lebih sistematis. Pengaruh urutan dan perilaku pemuatan.