列表

你可以使用标准 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 或循环语句。