微信小程序 wx:key

微信小程序 wx:key

在实际开发过程当中遇到 warning： Now you can provide attr "wx:key" for a "wx:for" to improve performance.

官方解释：

wx:key

若是列表中项目的位置会动态改变或者有新的项目添加到列表中，而且但愿列表中的项目保持本身的特征和状态（如 <input/> 中的输入内容，<switch/> 的选中状态），须要使用 wx:key 来指定列表中项目的惟一的标识符。

网上资料：

wx:key 的值以两种形式提供

一、wx:key="property" 其中property是表明在 for 循环的 array 中 item 的某个 property，该 property 的值须要是列表中惟一的字符串或数字，且不能动态改变。相似于字典的key值

二、wx:key="*this"， 保留关键字 *this 表明在 for 循环中的 item 自己，这种表示须要 item 自己是一个惟一的字符串或者数字，如：

当数据改变触发渲染层从新渲染的时候，会校订带有 key 的组件，框架会确保他们被从新排序，而不是从新建立，以确保使组

件保持自身的状态，而且提升列表渲染时的效率。 

不添加wx:key状况：

<block wx:for-items="{{userInfoList}}" >，会出现warning： Now you can provide attr "wx:key" for a "wx:for" to improve performance. 若是明确知道该列表是静态，或者没必要关注其顺序，能够选择忽略。推荐array 的 每个item都添加一个惟一识别的property来管理，这样就能够去掉warning，若是使用保留关键字，好像会出现显示的item都是最后一个的

<block wx:for-items="{{userInfoList}}" wx:key="userInfoListId">

• 若是不加 wx:key, 在 setData 以后，若是 array 内的数据若是发生改变，会从新建立前端的渲染对象
• 加上 wx:key，从新渲染时，只是将对应的对象从新排序。未发生变化的对象，不会从新建立

 

参考官方的解释

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

须要验证的问题

 

加上 wx:key 以后，会根据给定的 key 进行排序么？

写个简单的测试页面

<block wx:for="{{languages}}" wx:for-item="language" wx:key="id">
  <text class="log-item">{{ language.id }} . {{ language.name }}</text>
</block>

data: {
  languages: [
    {id: 1, name: 'php'},
    {id: 4, name: 'javascript'},
    {id: 3, name: 'golang'},
    {id: 2, name: 'python'},
    {id: 5, name: 'java'},
  ],
},

从测试结果来看，并不会影响到排序。

key 重名时是否会报错

data: {
  languages: [
    {id: 1, name: 'php'},
    {id: 4, name: 'javascript'},
    {id: 3, name: 'golang'},
    {id: 2, name: 'python'},
    {id: 5, name: 'java'},
  ],
},

click: function () {
	let language = {id: 5, name: 'kotlin'}
	let languages = this.data.languages
	languages.push(language)

	this.setData({
		languages: languages
	})
}

微信小程序开发工具只会报一个警告，并不会致使程序崩溃

VM6265:2 Do not set same key {5} in wx:key

比较奇怪的是，这个警告只有在从新渲染时才会报，若是初始化时就使用一样的 key，并不会致使警告