javascript / beginner
Snippet
Verbesserung der Render-Performance mit Keyed-Each-Blöcken
Durch die Angabe eines eindeutigen Schlüssels wie (item.id) in einem each-Block kann Svelte genau erkennen, welche DOM-Elemente sich geändert haben, verschoben oder entfernt wurden. Dies verhindert unnötiges Neuerstellen von DOM-Knoten und verbessert die Performance erheblich.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>let items = [{ id: 'item-101', name: 'Keyboard', price: 79 },{ id: 'item-102', name: 'Mouse', price: 49 },{ id: 'item-103', name: 'Monitor', price: 199 }];function removeItem(targetId) {items = items.filter(item => item.id !== targetId);}</script><ul>{#each items as item (item.id)}<li><span>{item.name} - ${item.price}</span><button on:click={() => removeItem(item.id)}>Remove</button></li>{/each}</ul>
svelte
Erklärung
1
{#each items as item (item.id)}
Definiert eine eindeutige Kennung (item.id) als Schlüssel, um das DOM-Diffing und das Wiederverwenden von Elementen zu optimieren.
2
items = items.filter(item => item.id !== targetId);
Löst Sveltes Reaktivität aus, indem ein neues, nach der ID gefiltertes Array zugewiesen wird.