{#each} Bersarang dan Pembaruan Berkunci
Tangani daftar bersarang dan pastikan pembaruan DOM efisien dengan blok each berkunci.
{#each} Bersarang dan Pembaruan Berkunci adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Dua Dimensi
Sarangkan blok {#each} untuk merender tabel, kisi, atau pohon.
{#each rows as row, i}
<tr>
{#each row as cell, j}
<td>{cell}</td>
{/each}
</tr>
{/each}Kunci di Setiap Tingkat
Tambahkan kunci di setiap tingkat untuk pembaruan yang efisien.
{#each rows as row (row.id)}
{#each row.cells as cell (cell.id)}
...
{/each}
{/each}Struktur Pohon
Gunakan komponen yang mendukung rekursi atau blok each untuk data berbentuk pohon.
Hindari Kunci Indeks
Menggunakan indeks array sebagai kunci akan gagal ketika item disisipkan atau dihapus di bagian tengah. Utamakan id yang stabil.
Jebakan Data yang Dapat Diubah
Mengubah array bersarang tanpa menetapkan ulang referensi luar akan merusak reaktivitas. Tetapkan ulang di tingkat teratas.
rows = rows.map(r => r.id === id ? {...r, name} : r);Pemfilteran dan Pengurutan
Selalu kembalikan array baru saat memfilter atau mengurutkan; mengubah array di tempat tidak akan memicu pembaruan.
sorted = [...items].sort();Performa
Kunci membuat penambahan, penghapusan, atau pemindahan item menjadi O(n), alih-alih memaksa perenderan ulang penuh.
Mengurutkan Ulang Daftar
Dengan kunci, animasi pengurutan ulang menjadi mudah: gabungkan dengan animate:flip.
Perenderan Kondisional di Dalam
Gabungkan blok {#if} di dalam each untuk mengendalikan dengan lebih baik item mana yang ditampilkan.
Komponen untuk Setiap Item
Untuk item yang kompleks, render komponen anak agar isi perulangan tetap ringkas.
{#each todos as todo (todo.id)}
<Todo {todo} />
{/each}Pola Paginasi
Untuk daftar panjang, gunakan paginasi atau virtualisasi alih-alih merender ribuan node.
Pemeriksaan Singkat
Mengapa kunci sebaiknya menggunakan ID stabil, bukan indeks?
Ringkasan
Sarangkan blok each untuk data 2D, gunakan ID stabil sebagai kunci di setiap tingkat, dan selalu tetapkan ulang koleksi untuk memicu pembaruan.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “{#each} Bersarang dan Pembaruan Berkunci” gratis?
Ya — teks lengkap “{#each} Bersarang dan Pembaruan Berkunci” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “{#each} Bersarang dan Pembaruan Berkunci”?
Tangani daftar bersarang dan pastikan pembaruan DOM efisien dengan blok each berkunci. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “{#each} Bersarang dan Pembaruan Berkunci” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- {#if} {#else if} {#else}
- {#each} dengan Indeks dan Kunci
- {#key} untuk Memaksa Render Ulang
- {#each} Bersarang dan Pembaruan Berkunci