关于微信小程序WXML列表渲染中的wx:key笔记说明
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：
<view wx:for="{{lines}}"><switch>{{item.name}}</switch></view>
Ctrl + s 运行效果如下：
3.接下来来对上述switch做动态的改变；
在WXML文件中添加一个更新按钮，通过点击该按钮，可以添加一个switch开关，即对上述lines进行一个数据的更新：
<view wx:for="{{lines}}"><switch>{{item.name}}</switch></view><button bindtap="tapEvent">更新</button>
运行后效果如下：
在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：
那么什么是项目中的状态改变呢？
重新运行项目，然后选中其中的一个switch：
点击更新后：
发现switch1的选中状态并没有被记录下来，这种情况下就需要用到wx:key来对指定列表中的项目进行唯一标识：
将之前的WXML代码修改如下：
<view wx:for="{{lines}}" wx:key="id"><switch>{{item.name}}</switch></view><button bindtap="tapEvent">更新</button>
重新运行，并选中其中的switch1：
此时点击更新按钮后，发现switch1的状态已经成功保持：
当然如果lines为[1,2,3]这种数组，那么wx:key则必须设为：
<view wx:for="{{lines}}" wx:key="*this"><switch>{{item.name}}</switch></view><button bindtap="tapEvent">更新</button>
【注意】即使列表中的组件没有发生状态变化，也要使用wx:key。为什么？？因为效率比较高。让我们再次看到上述官方文档：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
以上即为wx:key的用法说明
矫情吗；*
左手的ㄟ右手
╰+哭是因爲堅強的太久メ
还没有评论，来说两句吧...