Zagnieżdżone {#each} i aktualizacje z kluczami
Obsługuj zagnieżdżone listy i zapewniaj wydajne aktualizacje DOM za pomocą bloków each z kluczami.
Zagnieżdżone {#each} i aktualizacje z kluczami to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Dwa wymiary
Zagnieżdżaj bloki {#each}, aby renderować tabele, siatki lub drzewa.
{#each rows as row, i}
<tr>
{#each row as cell, j}
<td>{cell}</td>
{/each}
</tr>
{/each}Klucze na każdym poziomie
Dodawaj klucze na każdym poziomie, aby zapewnić wydajne aktualizacje.
{#each rows as row (row.id)}
{#each row.cells as cell (cell.id)}
...
{/each}
{/each}Struktury drzewiaste
W przypadku danych o strukturze drzewa używaj komponentów przystosowanych do rekurencji lub bloków each.
Unikaj kluczy będących indeksami
Użycie indeksu tablicy jako klucza nie działa poprawnie, gdy elementy są wstawiane lub usuwane ze środka. Należy preferować stabilny identyfikator.
Pułapka mutowalnych danych
Modyfikowanie zagnieżdżonych tablic bez ponownego przypisania zewnętrznej referencji zaburza reaktywność. Należy ponownie przypisać wartość na najwyższym poziomie.
rows = rows.map(r => r.id === id ? {...r, name} : r);Filtrowanie i sortowanie
Podczas filtrowania lub sortowania zawsze zwracaj nową tablicę; modyfikowanie tablicy w miejscu nie wywoła aktualizacji.
sorted = [...items].sort();Wydajność
Klucze sprawiają, że dodawanie, usuwanie i przenoszenie elementów ma złożoność O(n), zamiast wymuszać pełne ponowne renderowanie.
Zmiana kolejności list
Dzięki kluczom łatwo animować zmianę kolejności: połącz je z animate:flip.
Warunkowe renderowanie wewnątrz
Umieszczaj bloki {#if} wewnątrz each, aby precyzyjnie kontrolować, które elementy są wyświetlane.
Komponent dla każdego elementu
W przypadku złożonych elementów renderuj komponent podrzędny, aby zachować niewielką treść pętli.
{#each todos as todo (todo.id)}
<Todo {todo} />
{/each}Wzorzec paginacji
W przypadku długich list stosuj paginację lub wirtualizację zamiast renderować tysiące węzłów.
Szybkie sprawdzenie
Dlaczego w kluczach lepiej używać stabilnych identyfikatorów niż indeksów?
Podsumowanie
Zagnieżdżaj bloki each dla danych dwuwymiarowych, przypisuj klucz na każdym poziomie za pomocą stabilnych identyfikatorów i zawsze ponownie przypisuj kolekcje, aby wywołać aktualizacje.
Często zadawane pytania
Czy lekcja „Zagnieżdżone {#each} i aktualizacje z kluczami” jest bezpłatna?
Tak — pełny tekst „Zagnieżdżone {#each} i aktualizacje z kluczami” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Zagnieżdżone {#each} i aktualizacje z kluczami”?
Obsługuj zagnieżdżone listy i zapewniaj wydajne aktualizacje DOM za pomocą bloków each z kluczami. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Zagnieżdżone {#each} i aktualizacje z kluczami”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?
Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- {#if} {#else if} {#else}
- {#each} z indeksem i kluczem
- {#key} do wymuszania ponownego renderowania
- Zagnieżdżone {#each} i aktualizacje z kluczami