最难点For的wx:key,您肯定不知道的!(框架细节十一)

A:数据改变,导致重新渲染的两种情况:

1:有wx:key的情况(不重新创建,仅改变顺序)

添加元素或改变元素顺序导致数据改变时,
会校正带有Key的组件(可通过key识别各组件),
框架会根据“目前数据”,重新排序各组件,而不是重新创建,

使组件保持自身的状态,列表渲染效率高。


2:无wx:key的情况(重新创建)

添加元素或改变元素顺序导致数据改变时,
此时各组件没有key(无法识别各组件)
框架会被迫根据“目前数据”重新创建各组件,

使组件重置初始状态(原有状态自然被清空),列表渲染效率低。


B:两种情况的对比

wk:key组件识别渲染情况状态情况for效率
各组件可识别渲染时仅改变组件顺序保持组件之前原来状态效率高
组件无法识别渲染时重新创建各组件重置组件的初始状态效率低

C:什么时候需要wx:key

1.需要wx:key的情况
  1. 列表中项目的位置会动态改变或者有新的项目添加到列表中
  2. 希望列表中的项目保持自己的特征和状态
    (如 <input/> 中的输入内容,<switch/> 的选中状态)

需要使用 wx:key 来指定列表中项目的唯一的标识符。

2.可不需要wx:key的情况

如果明确知道该列表是静态,或者不必关注其顺序,可以不用加wx:key,忽略如下的警告。

不提供 wx:key的警告: 


D:wx:key的使用及wx:key的值

1:wx:key="字符串"

这个”字符串”代表在 for 循环的 array 中 item 的某个“属性”
该“属性” 的值需要是列表中唯一的字符串或数字,且不能动态改变。
用于被遍历的组件需要多个属性的时候。

//test.js
      data: {
        input_data: [
          { id: 1, unique: "unique1" },
          { id: 2, unique: "unique2" },
          { id: 3, unique: "unique3" },
          { id: 4, unique: "unique4" },
        ]
      }
    //test.wxml
    <input value="id:{{item.id}}"   wx:for="{{input_data}}"  wx:key="unique"  />

2:wx:key="*this"

保留关键字”*this”代表在 for 循环中的 item 本身,
这种表示需要 item 本身是一个唯一的字符串或者数字
用于组件仅需要一个属性,且属性值唯一。


//test.js
  data: {
    numberArray: [1, 2, 3, 4],
    stringArray:['aaa','ccc','fff','good']
  }
//test.wxml
   <input value="id:{{ item }}"   wx:for="{{numberArray}}"  wx:key="*this"  />
   <input value="id:{{ item }}"   wx:for="{{stringArray}}"  wx:key="*this"  />
  },

E:2个动态图的源码

//test.wxml
<view class="container log-list">
<!--有wx:key-->
<input value="id:{{item.id}}"   wx:for="{{input_data}}"   wx:key="unique" />
<button bindtap="addToFront">
    前部插入元素
</button>
<button bindtap="switch">
    随机排序
</button>
</view>
//test.js
Page({
  data: {
    input_data: [
      { id: 1, unique: "unique1" },
      { id: 2, unique: "unique2" },
    ] 
  },
  //前部插入元素函数
  addToFront: function (e) {
    const length = this.data.input_data.length + 1;
    this.data.input_data = [{ id: length, unique: 'unique_' + length }].concat(this.data.input_data)
    this.setData({
      input_data: this.data.input_data
    })
  },
  //随机排序函数
  switch: function (e) {
    const length = this.data.input_data.length
    for (let i = 0; i < length; ++i) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.input_data[x]
      this.data.input_data[x] = this.data.input_data[y]
      this.data.input_data[y] = temp
    }
    this.setData({
      input_data: this.data.input_data
    })
  }
})
//test.wxss
.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
input {
    background: none repeat scroll 0 0 #FFEEEE;
     float: left;
     width: 240px;
    padding: 0 3px;
    padding-left:10px;
    height: 42px;
    color: #69737d;
    font-size: 16px;
    line-height: 42px;
    border: 1px solid #E70047;
    margin: 20rpx;
}
button{
  display: inline-block; 
  vertical-align: baseline; 
margin: 0 2px; 
margin-top:30rpx;
outline: none; 
 text-align: center; 
text-decoration: none; 
font: 14px/100% Arial, Helvetica, sans-serif; 
padding: .5em 2em .55em; 
text-shadow: 0 1px 1px rgba(0,0,0,.3); 
border-radius: .5em; 
box-shadow: 0 1px 2px rgba(0,0,0,.2); 
}
原链接:http://www.wxappclub.com/topic/536


  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值