微信小程序 wx:for

使用wx:for

// js文件
Page({
    data: {
        array:[
            {
                id: 1,
                name: "张三",
            },
            {
                id: 2,
                name: "李四",
            }
        ]
    },
});

<!--wxml文件-->
<view wx:for="{{array}}" wx:for-index="id" wx:for-item="item">
	{{id}}: {{item.name}}
</view>

渲染的页面

理解for循环：

1. 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

2. 数组中当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

3. 使用 wx:for-item 可以指定数组当前元素的变量名；使用 wx:for-index 可以指定数组当前下标的变量名，此变量名可以视为除索引外所有值的集合，通过.的方式调用某一具体值

使用上述for循环后，控制台会输出warning: Now you can provide attr wx:key for a wx:for to improve performance.，这表明使用wx:key能提高效率

[WXML Runtime warning] ./pages/demo/demo.wxml
 Now you can provide attr `wx:key` for a `wx:for` to improve performance.
  37 | <input bindinput="handleInput" /> -->
  38 | 
> 39 | <view wx:for="{{array}}" wx:for-index="id" wx:for-item="item">
     |  ^
  40 | 	{{id}}: {{item.name}}
  41 | </view>

wx:key

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

在不使用 wx:key 的情况下, 如果 array 内的数据是动态改变的，则会不断的重新创建每个Item对象并渲染列表，效率较低。而通过使用 wx:key ，如果array中的数据发生改变，只是将对应的对象重新排序。未发生变化的对象，不会重新创建。

使用场景

wx:key适用于动态改变的数组，对于静态数组可用可不用。

使用方法

1. wk:key=“字符串”

wk:key="字符串"表示参与循环的某个数组array中的item的变量名，该变量的值应是列表中唯一且不发生改变的字符串或者数字。
例如下面代码中的id是唯一且不变的，所以wx:key="id"

// js文件
        array:[
            {
                id: 1,
                name: "张三",
            },
            {
                id: 2,
                name: "李四",
            }
        ]

2. wk:key="*this"

wk:key="*this"代表在for循环中的item自身，这种表示需要item本身就是一个唯一的字符串或者数字。

// xx.js
data: {
	numberArray: [1, 2, 3, 4],
	stringArray:['aaa','ccc','fff','good']
}

<!--xx.wxml-->
	<input value="id:{{ item }}" wx:for="{{numberArray}}" wx:key="*this" />
	<input value="id:{{ item }}" wx:for="{{stringArray}}" wx:key="*this" />

---

参考文章：

1. 微信小程序 列表渲染 wx:for 来源：w3school
2. 微信小程序： wx:key详解 作者：Jowney 来源：简书
3. wx:key的使用及wx:key的值