Now you can provide attr "wx:key" for a "wx:for" to improve performance

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xiejunna/article/details/82684482

小程序开发中遍历列表时，出现警告Now you can provide attr "wx:key" for a "wx:for" to improve performance 这是因为没有添加属性，使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，
   且不能动态改变。

2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
   当数据改变触发渲染层重新渲染的时候，会校正带有 key的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

wxml示例：

<radio-group class="radio-group" bindchange="radioChange">
    <!--wx:for="{{descary}}" 指定要遍历列表或数组的名称；wx:for-item="row" 指定遍历列表或数组的item，
    保留关键字item（如果不指定默认用item），可以自己指定item名称；wx:key="name" 指定每个item的唯一标识-->
   <label class="radio" wx:for="{{descary}}" wx:for-item="row" wx:key="name" 
        style='display:block;margin-top:10rpx;margin-bottom:10rpx;'>
        <radio value="{{row.name}}" checked="{{row.checked}}"/>{{row.taketype}}
        <text class='textcomm'>{{row.desc}}</text>
        {{row.feedec}}</text>
    </label>
</radio-group>

js示例：

Page({
  data: {
    descary: [
      { name: '1', taketype: '苹果', desc: '(甜甜的)', feedec: '一元一个', fee: '', checked: true },
      { name: '2', taketype: '柠檬', desc: '(酸酸的)', feedec: '1毛一个', fee: '', checked: false },
    ],

  },
  onLoad:function(){


  },
  onReady: function () { 

  },


})

运行效果：