列表

你可以使用标准的 JavaScript 构造来创建重复模板。

Lit 还提供了一个 repeat 指令，用于更高效地构建某些类型的动态列表。

当子位置中的表达式返回一个数组或可迭代对象时，Lit 会渲染数组中的所有项：

在大多数情况下，你会希望将数组项转换为更有用的形式。

要渲染列表，你可以使用 map 将数据列表转换为模板列表：

请注意，此表达式返回的是一个 TemplateResult 对象数组。Lit 会渲染子模板和其他值的数组或可迭代对象。

你也可以构建一个模板数组，然后将其传入模板表达式中。

render() {
  const itemTemplates = [];
  for (const i of this.items) {
    itemTemplates.push(html`<li>${i}</li>`);
  }

  return html`
    <ul>
      ${itemTemplates}
    </ul>
  `;
}

在大多数情况下，使用循环或 map 是构建重复模板的高效方式。但是，如果你想对一个大列表重新排序，或者通过添加和删除单个条目来修改它，这种方式可能会涉及更新大量的 DOM 节点。

repeat 指令可以帮助解决这个问题。

repeat 指令基于用户提供的键来高效地更新列表：

repeat(items, keyFunction, itemTemplate)

其中：

• items 是一个数组或可迭代对象。
• keyFunction 是一个函数，它接受单个项作为参数，并返回该项的保证唯一的键。
• itemTemplate 是一个模板函数，它接受该项及其当前索引作为参数，并返回一个 TemplateResult。

例如：

如果你对 employees 数组重新排序，repeat 指令会重新排列现有的 DOM 节点。

为了与 Lit 对列表的默认处理方式进行比较，考虑反转一个大的名称列表：

• 对于使用 map 创建的列表，Lit 会保持列表项的 DOM 节点，但会重新赋值。
• 对于使用 repeat 创建的列表，repeat 指令会重新排列_现有的_ DOM 节点，因此代表第一个列表项的节点会移动到最后一个位置。

哪种方式更高效取决于你的使用场景：

• 如果更新 DOM 节点比移动它们代价更高，请使用 repeat 指令。

• 如果 DOM 节点具有_不受_模板表达式控制的状态，请使用 repeat 指令。

  例如，考虑以下列表：

  html`${this.users.map((user) =>
    html`
      <div><input type="checkbox"> ${user.name}</div>
    `)
  }`

  复选框有选中或未选中的状态，但它不受模板表达式的控制。

  如果在用户勾选了一个或多个复选框之后对列表重新排序，Lit 会更新与复选框关联的名称，但不会更新复选框的状态。

如果以上两种情况都不适用，请使用 map 或循环语句。