# 列表渲染

# 列表展开

借助 wx:for 可以将一个数组展开成一组节点。例如：

<view wx:for="{{ arr }}">
  数组的第 {{ index }} 项是 {{ item }}
</view>

在上例中，如果 arr 数组有三项，那最终就会生成 3 个 <view>。

如果结构比较复杂，可以借助 <block> 虚拟块。例如：

<block wx:for="{{ arr }}">
  <view>数组的第 {{ index }} 项是：</view>
  <view>{{ item }}</view>
</block>

# 列表临时变量

wx:for 展开的列表内部，会自动生成 item 和 index 两个临时变量。其中，item 表示列表当前项目的值，index 表示索引下标。

这两个临时变量名可以通过 wx:for-item 和 wx:for-index 来调整。例如：

<view wx:for="{{ arr }}" wx:for-item="t" wx:for-index="i">
  数组的第 {{ i }} 项是 {{ t }}
</view>

# 列表的 key 字段

在列表数据更新时，组件框架会尝试对比新旧列表数据来推断哪些节点应该被增删或移动。

如果列表开头或者中间部分需要发生插入或删除，组件框架的推断可能不够准确或高效。此时可以提供一个 key 字段来辅助推断。

例如对于这样的数据：

// page.js
Page({
  data: {
    students: [
      { id: 'A0001', name: '张三' },
      { id: 'A0002', name: '李四' },
      { id: 'A0003', name: '王五' },
    ]
  }
})

列表中每一项的 id 是唯一的、有代表性的，就可以将它作为 key 使用。在 WXML 中：

<!-- page.wxml -->
<view wx:for="{{ students }}" wx:key="id">
  姓名：{{ item.name }}
</view>

注意：

wx:key 不能使用数据绑定，应直接指定一个字段名字符串；
如果 item 本身是字符串或者数值（而非对象），可以指定 wx:key="*this" 表示使用 item 自身的值作为 key 。

# 合理使用 key 字段

使用 wx:key 不一定能提升列表渲染性能（有时甚至对性能有负面影响）。是否使用 wx:key 可以遵循以下规则：

如果列表是固定不变的，那就不要使用 wx:key；
如果列表只会在末尾增加、删除项目，那就不要使用 wx:key；
如果找不到一个有代表性的 key，那就不要使用 wx:key。

选定有代表性的 key，需要遵循如下规则：

key 字段值应当尽可能是唯一的，如果有重复的，就会降低使用 key 进行推断效果；
key 字段值会被转换为字符串，再作为标识符使用，因此 key 字段值应当是字符串或者数值，否则会失去唯一性。

# 列表展开其他类型数据

除了数组，对象、数值、字符串也可以被 wx:for 展开。但这样经常产生非预期的效果，所以并不推荐。

对于对象，wx:for 会将对象视为 key-value 对来进行展开；
对于数值，wx:for 会将数值视为展开的次数；
对于字符串，wx:for 会将字符串分解为字符来展开。