- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

【小程序】006 详解wx:key

LongYorke 发表于 2021/01/31 22:15:23 2021/01/31

【摘要】如果我们的wx:for循环没有wx:key则会出现如下警告：提醒我们使用wx:key，使组件保持自身的状态并且提高渲染效率。wx:key的最主要的一个作用是给小程序的diff算法提供标识支持，添加元素或改变元素顺序时，可通过key识别使组件保持自身的状态。没看懂？举个例子我们在.js下存放一个数组写好随机排序函数： sort(){ //随机排序函数 const length =...

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

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

没看懂？举个例子

我们在.js下存放一个数组

写好随机排序函数：

  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
    })
  },

const x = Math.floor(Math.random() * length)中

Math.floor()函数对数据向下取整

Math.random()生成一个【0,1）的随机数

不像Python等语言交换变量时，只是交换了引用的地址。可以a=b,b=a

javascript使用第三个变量作中间变量用于交换。

const temp = this.data.arr[x] this.data.arr[x] = this.data.arr[y] this.data.arr[y] = temp

在wxml写好多选框与绑定sort函数的按钮

无wx:key

<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>