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

本文介绍小程序开发中如何使用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 的值以两种形式提供

  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 () { 

  },


})

运行效果:

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值