Svelte Kit 如何从为循环项指定唯一 ID 中受益？不这样做会对性能产生哪些影响？

Question

用户 当前的问题围绕着理解为 Svelte Kit 中的循环项指定唯一 ID 的必要性。具体来说，调查深入探讨了这一要求背后的原因、不遵守该要求对性能的影响，以及在提供唯一 ID 时 Svelte Kit 如何优化渲染过程。 如果你举出任何喜欢基准标记的例子，它真的会对我有帮助......！ :)

具有唯一 ID 的示例

<script>
    let people = [
        { name: 'yoshi', beltColour: 'black', age: 25, id: 1 },
        { name: 'mario', beltColour: 'orange', age: 45, id: 2 },
        { name: 'luigi', beltColour: 'brown', age: 35, id: 3 }
    ];
</script>

<h1>Loops</h1>

{#each people as p (p.id)}
    <h3>{p.name}</h3>
    <p>beltColour: {p.beltColour}</p>
    <p>age: {p.age}</p>
{/each}

没有唯一 ID 的示例

<script>
    let people = [
        { name: 'yoshi', beltColour: 'black', age: 25 },
        { name: 'mario', beltColour: 'orange', age: 45 },
        { name: 'luigi', beltColour: 'brown', age: 35 }
    ];
</script>

<h1>Loops</h1>

{#each people as p}
    <h3>{p.name}</h3>
    <p>beltColour: {p.beltColour}</p>
    <p>age: {p.age}</p>
{/each}

第一个示例包含循环中每个项目的唯一 ID，而第二个示例则不包含。观察两种场景之间的性能差异，尤其是在大型数据集的情况下，可以帮助理解在 Svelte Kit 应用程序中提供唯一 ID 的重要性。

如果可能的话，我需要一个合适的基准示例:)

Answer 1

这与 SvelteKit 没有任何关系，这是一个核心 Svelte 机制。

除非您稍后更新列表，否则它也没有效果。

如果存在某个键，Svelte 可以移动现有的 DOM 节点并执行更少的工作，从而导致更少的 DOM 更新。如果存在本地状态，则不提供密钥也可能导致错误，例如在声明自己变量的循环中渲染组件时。

示例：您没有密钥并在前面插入新项目：

people = [{ name: 'wario', beltColour: 'yellow', age: 42 }, ...people];

Svelte 不知道这里发生了什么操作，它只是注意到列表发生了变化并且现在更长了。它（大致）将执行以下操作：

• 在末尾添加新的

  h3

  、

  p

  、

  p

  ，在该索引处插入项目的值 (Luigi)。
• 更新所有其他 DOM 元素以更改内容。
  包含 Yoshi 数据的 DOM 元素更改为 Wario 的数据，Mario 的数据更改为 Yoshi 的数据，等等

REPL 显示此内容

如果有键，则现有元素将保持不变。这些值可能有所不同，但由于其他项目没有改变，DOM 中什么也没有发生。

通过这种方式，移动操作和删除的影响也最小。