关于微信小程序WXML列表渲染中的wx:key笔记说明

素颜马尾好姑娘i 2023-07-02 14:29 12阅读 0赞

## 1.直接看看官方文档中给出的说明： ##

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，
    并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），
    需要使用 wx:key 来指定列表中项目的唯一的标识符。
    
    wx:key 的值以两种形式提供
    
    1.字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
    2.保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
    
    当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，
    而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
    
    如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

## 2.举个小例子说明上述项目中的状态改变是什么意思？ ##

**1. 在某一Page的js文件中添加下述代码：**

Page({
      data:{
        lines:[
          {
            "id":1,
            "name":"switch1"
          },
          {
            "id": 2,
            "name": "switch2"
          },
          {
            "id": 3,
            "name": "switch3"
          }
        ]
      },
    })

**2.在该配置的wxml文件中添加switch：**

Ctrl + s 运行效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwem5iYQ_size_16_color_FFFFFF_t_70][]

**3.接下来来对上述switch做动态的改变；**

在WXML文件中添加一个更新按钮，通过点击该按钮，可以添加一个switch开关，即对上述lines进行一个数据的更新：

运行后效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwem5iYQ_size_16_color_FFFFFF_t_70 1][]

在js文件中添加相应的事件触发函数：

Page({
    
      data:{
        lines:[
          {
            "id":1,
            "name":"switch1"
          },
          {
            "id": 2,
            "name": "switch2"
          },
          {
            "id": 3,
            "name": "switch3"
          }
        ]
    
      },
      tapEvent:function(event){
        var lines = this.data.lines;
        lines.splice(0,0,{
          id:4,
          name:'switch4'
        });
        this.setData({
          lines:lines
        })
      }
      
    })

tapEvent实现的功能为当点击该更新按钮后，在lines中添加一个对象\{id:4,name : 'switch4'\}，并对lines进行更新。

运行后，点击更新按钮，发现成功添加一个switch：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwem5iYQ_size_16_color_FFFFFF_t_70 2][]

那么什么是项目中的状态改变呢？

重新运行项目，然后选中其中的一个switch：

![20200130202725978.png][]

点击更新后：

![20200130202734194.png][]

发现switch1的选中状态并没有被记录下来，这种情况下就需要用到wx:key来对指定列表中的项目进行唯一标识：

将之前的WXML代码修改如下：

重新运行，并选中其中的switch1：

![20200130203225982.png][]

此时点击更新按钮后，发现switch1的状态已经成功保持：

![20200130203259990.png][]

当然如果lines为\[1,2,3\]这种数组，那么wx:key则必须设为：

【注意】即使列表中的组件没有发生状态变化，也要使用wx:key。为什么？？因为效率比较高。让我们再次看到上述官方文档：

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，
    而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

以上即为wx:key的用法说明

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwem5iYQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020013020083054.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwem5iYQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwem5iYQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200130201955254.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwem5iYQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwem5iYQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200130202351264.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwem5iYQ==,size_16,color_FFFFFF,t_70
[20200130202725978.png]: https://img-blog.csdnimg.cn/20200130202725978.png
[20200130202734194.png]: https://img-blog.csdnimg.cn/20200130202734194.png
[20200130203225982.png]: https://img-blog.csdnimg.cn/20200130203225982.png
[20200130203259990.png]: https://img-blog.csdnimg.cn/20200130203259990.png