【小程序】006 详解wx:key

如果我们的wx:for循环没有wx:key则会出现如下警告：提醒我们使用wx:key，使组件保持自身的状态并且提高渲染效率。

wx:key的最主要的一个作用是给小程序的diff算法提供标识支持，添加元素或改变元素顺序时，可通过key识别使组件保持自身的状态。

写好随机排序函数：

  sort(){
    //随机排序函数
    const length = this.data.arr.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.arr[x]
      this.data.arr[x] = this.data.arr[y]
      this.data.arr[y] = temp
    } 
    this.setData({
      arr: this.data.arr
    })
  },

<text>wx:key demo</text>
<block wx:for="{{arr}}">
      <view>
       <checkbox>
          {{item}}
       </checkbox>
      </view>
</block>
<button bindtap="sort">随机排序</button>

可以观察到无论如何排序，勾选对象与勾选框并未识别绑定

有wx:key

<text>wx:key demo</text>
<block wx:for="{{arr}}" wx:key="*this">
      <view>
       <checkbox>
          {{item}}
       </checkbox>
      </view>
</block>
<button bindtap="sort">随机排序</button>