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

最新推荐文章于 2024-07-09 15:50:22 发布

xiejunna

最新推荐文章于 2024-07-09 15:50:22 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/xiejunna/article/details/82684482

微信小程序专栏收录该内容

8 篇文章

订阅专栏

本文介绍小程序开发中如何使用wx:key属性来提升列表渲染效率。当遍历列表时，为避免警告并改善性能，需设置wx:key以指定唯一标识符。文章通过示例解释了wx:key的不同设置方式及其作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，
且不能动态改变。
保留关键字 *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 () { 

  },


})

运行效果：

这里写图片描述