折腾：
【未解决】小程序中列表中实现每行左边图片右边多行键值对的文字效果
期间，看到代码：
<view
wx:for="{{searchBookList}}"
wx:for-index="bookIdx"
wx:for-item="curBookItem"
>
。。。
</view>运行提示警告：
VM714:2 ./pages/index/index.wxml
(anonymous) @ VM714:2
VM714:3 Now you can provide attr "wx:key" for a "wx:for" to improve performance.
44 | </view>
45 | <view class='book_list_attribute_tags'>
> 46 | <view wx:for="{{curBookItem.tags}}" wx:for-index="tagIdx" wx:for-item="eachTag">
| ^
47 | <text class='book_single_tag'>{{eachTag}}</text>
48 | </view>
49 | </view>->很明显，和reactjs中的逻辑一样：要有个key，便于内部计算要渲染的html的diff差值时，效率最高，提升页面显示和加载的效率
->所以去加上：
<view
wx:for="{{searchBookList}}"
wx:for-index="bookIdx"
wx:for-item="curBookItem"
wx:key="{{curBookItem.id}}"
>
结果：问题依旧。
所以去看官网解释：
wx:key
改为：
<view
wx:for="{{searchBookList}}"
wx:for-index="bookIdx"
wx:for-item="curBookItem"
wx:key="id"
>竟然还报错：
然后发现是tags的for循环报错的
而此处是由于：
tags中每个tag都是个普通字符串，本身就不一样，所以可以作为key本身，所以改为：
<view class='book_list_attribute_tags'>
<view
wx:for="{{curBookItem.tags}}"
wx:for-index="tagIdx"
wx:for-item="eachTag"
wx:key="*this"
>
<text class='book_single_tag'>{{eachTag}}</text>
</view>
</view>结果：
就可以消除警告了：
【总结】
小程序中，对于list列表类的for循环去显示时，（和reactjs等内部机制类似）需要一个key去提高显示的性能，具体写法是：
如果for循环中，每个元素
- 中的某个字段是唯一的，则采用该字段
- 具体写法：
- wx:key=”keyNameInEachItemDict”
- 典型的是id之类的，比如：
- wx:key=”id”
- 中本身就是一个，唯一的值，就采用本身：
- 具体写法：
- wx:key=”*this”
- 典型的就是：字符串的列表，每个都是个（不同的）字符串
参考的代码：
wx:for="{{searchBookList}}"
wx:for-index="bookIdx"
wx:for-item="curBookItem"
wx:key="id"
>
...
</view>或：
wx:for="{{curBookItem.tags}}"
wx:for-index="tagIdx"
wx:for-item="eachTag"
wx:key="*this"
>
<text class='book_single_tag'>{{eachTag}}</text>
</view>详见：
中的wx:key
转载请注明：在路上 » 【已解决】小程序中for循环的list元素警告：Now you can provide attr “wx:key” for a “wx:for” to improve performance