javascript / expert
Snippet
Optimierung der DOM-Abstimmung mit Keyed Each-Blöcken
Die Bereitstellung eines eindeutigen Identifikators (Key) in einem #each-Block ermöglicht es dem Diffing-Algorithmus von Svelte, einzelne Elemente zu verfolgen. Dies verhindert unnötige DOM-Neu-Renderings und bewahrt den lokalen Komponentenzustand beim Sortieren oder Filtern.
snippet.js
javascript
1
2
3
4
5
6
7
8
<!-- High-performance list rendering -->{#each items as item (item.id)}<div class="row"><Component {item} /></div>{:else}<p>No items found.</p>{/each}
svelte
Erklärung
1
(item.id)
Der 'Key'-Ausdruck, der Svelte mitteilt, wie jedes Element in der Sammlung eindeutig identifiziert wird.
2
<Component {item} />
Dank des Keys wird diese Komponenteninstanz wiederverwendet, anstatt zerstört und neu erstellt zu werden, wenn sich die Listenreihenfolge ändert.
3
{:else}
Stellt einen Fallback-UI-Zustand bereit, wenn das Array leer ist, was die Benutzererfahrung verbessert.