主页 / coding / 问题 / 78380243
Accepted
RISHI RAJ
Asked: 2024-04-25 01:27:51 +0800 CST

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

  • 772

用户 当前的问题围绕着理解为 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 的重要性。

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

foreach

1 个回答

  1. Best Answer

    这实际上与 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 中什么也没有发生。

    这样，移动操作和删除的影响也最小。

    使用密钥进行 REPL

    • 1

相关问题