微信小程序 wx:key

发布时间：2018-05-09 10:45:33点(dian)击(ji)：3410字号：T|T

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

上网查找(zhao)资料与(yu)查看官方文档(dang)发现原(yuan)因大致如下：

官方解释：

wx:key

如果列(lie)表(biao)中(zhong)(zhong)项(xiang)(xiang)目(mu)的(de)(de)(de)位置会动态改变或者有新的(de)(de)(de)项(xiang)(xiang)目(mu)添加(jia)到列(lie)表(biao)中(zhong)(zhong)，并且希望列(lie)表(biao)中(zhong)(zhong)的(de)(de)(de)项(xiang)(xiang)目(mu)保持自己的(de)(de)(de)特(te)征和状(zhuang)态（如 <input/> 中(zhong)(zhong)的(de)(de)(de)输入内容(rong)，<switch/> 的(de)(de)(de)选(xuan)中(zhong)(zhong)状(zhuang)态），需要使用 wx:key 来(lai)指定列(lie)表(biao)中(zhong)(zhong)项(xiang)(xiang)目(mu)的(de)(de)(de)唯(wei)一(yi)的(de)(de)(de)标识符。




网上资料：

wx:key 的值以(yi)两种形式(shi)提供(gong)

1、wx:key="property" 其中property是代表在 for 循(xun)环的(de) array 中 item 的(de)某个 property，该 property 的(de)值需要是列表中唯一(yi)的(de)字(zi)符串或数字(zi)，且不(bu)能(neng)动态改变。类似于字(zi)典(dian)的(de)key值

2、wx:key="*this"， 保留关键(jian)字(zi)(zi) *this 代(dai)表(biao)在 for 循环中的 item 本(ben)身，这种(zhong)表(biao)示需要 item 本(ben)身是一(yi)个唯一(yi)的字(zi)(zi)符串或者(zhe)数字(zi)(zi)，如：

当数据(ju)改变(bian)触(chu)发渲染层重新(xin)渲染的时候，会校正带有(you) key 的组(zu)件，框架会确(que)保他们被重新(xin)排序，而不是重新(xin)创建，以确(que)保使组(zu)

件保持自身的状态(tai)，并且提高列表渲(xuan)染时的效率。




不添(tian)加wx:key情(qing)况：

<block wx:for-items="{{userInfoList}}" >，会(hui)出现warning： Now you can provide attr "wx:key" for a "wx:for" to improve performance. 如果(guo)明确知道该列表是(shi)静态，或者(zhe)不(bu)必关(guan)注其顺序，可以选择(ze)忽略。

推荐array 的(de) 每一(yi)个(ge)item都添加一(yi)个(ge)唯一(yi)识别(bie)的(de)property来(lai)管理，这样就(jiu)可以(yi)去(qu)掉warning，如果使用保留关键字(zi)，好(hao)像会出现显(xian)示的(de)item都是最后一(yi)个(ge)的(de)

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