微信小程序 wx:key

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

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

上网查(cha)找资料(liao)与查(cha)看官方文(wen)档发现(xian)原因大致如下：

官方解(jie)释(shi)：

wx:key

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




网上资料：

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

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

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

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

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




不添加wx:key情况：

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

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

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