最难点For的wx:key,您肯定不知道的!(框架细节十一)

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

以初学者的视角看问题,感谢各路大神的纠错与指教。

A:数据改变,导致重新渲染的两种情况:


1:有wx:key的情况(不重新创建,仅改变顺序)

添加元素或改变元素顺序导致数据改变时,
会校正带有Key的组件(可通过key识别各组件),
框架会根据“目前数据”,重新排序各组件,而不是重新创建,
使组件保持自身的状态,列表渲染效率高。



2:无wx:key的情况(重新创建)

添加元素或改变元素顺序导致数据改变时,
此时各组件没有key(无法识别各组件)
框架会被迫根据“目前数据”重新创建各组件,
使组件重置初始状态(原有状态自然被清空),列表渲染效率低。



B:两种情况的对比

wk:key 组件识别 渲染情况 状态情况 for效率
各组件可识别 渲染时仅改变组件顺序 保持组件之前原来状态 效率高
组件无法识别 渲染时重新创建各组件 重置组件的初始状态 效率低

C:什么时候需要wx:key

1.需要wx:key的情况

  1. 列表中项目的位置会动态改变或者有新的项目添加到列表中
  2. 希望列表中的项目保持自己的特征和状态
    (如 <input/> 中的输入内容,<switch/> 的选中状态)

需要使用 wx:key 来指定列表中项目的唯一的标识符。

2.可不需要wx:key的情况

如果明确知道该列表是静态,或者不必关注其顺序,可以不用加wx:key,忽略如下的警告。

不提供 wx:key的警告:


D:wx:key的使用及wx:key的值

1:wx:key="字符串"

这个”字符串”代表在 for 循环的 array 中 item 的某个“属性”
该“属性” 的值需要是列表中唯一的字符串或数字,且不能动态改变。
用于被遍历的组件需要多个属性的时候。

  1. //test.js
  2. data: {
  3. input_data: [
  4. { id: 1, unique: "unique1" },
  5. { id: 2, unique: "unique2" },
  6. { id: 3, unique: "unique3" },
  7. { id: 4, unique: "unique4" },
  8. ]
  9. }
  10. //test.wxml
  11. <input value="id:{{item.id}}" wx:for="{{input_data}}" wx:key="unique" />

2:wx:key="*this"

保留关键字”*this”代表在 for 循环中的 item 本身,
这种表示需要 item 本身是一个唯一的字符串或者数字
用于组件仅需要一个属性,且属性值唯一。

  1. //test.js
  2. data: {
  3. numberArray: [1, 2, 3, 4],
  4. stringArray:['aaa','ccc','fff','good']
  5. }
  6. //test.wxml
  7. <input value="id:{{ item }}" wx:for="{{numberArray}}" wx:key="*this" />
  8. <input value="id:{{ item }}" wx:for="{{stringArray}}" wx:key="*this" />
  9. },

E:2个动态图的源码

  1. //test.wxml
  2. <view class="container log-list">
  3. <!--有wx:key-->
  4. <input value="id:{{item.id}}" wx:for="{{input_data}}" wx:key="unique" />
  5. <button bindtap="addToFront">
  6. 前部插入元素
  7. </button>
  8. <button bindtap="switch">
  9. 随机排序
  10. </button>
  11. </view>
  1. //test.js
  2. Page({
  3. data: {
  4. input_data: [
  5. { id: 1, unique: "unique1" },
  6. { id: 2, unique: "unique2" },
  7. ]
  8. },
  9. //前部插入元素函数
  10. addToFront: function (e) {
  11. const length = this.data.input_data.length + 1;
  12. this.data.input_data = [{ id: length, unique: 'unique_' + length }].concat(this.data.input_data)
  13. this.setData({
  14. input_data: this.data.input_data
  15. })
  16. },
  17. //随机排序函数
  18. switch: function (e) {
  19. const length = this.data.input_data.length
  20. for (let i = 0; i < length; ++i) {
  21. const x = Math.floor(Math.random() * length)
  22. const y = Math.floor(Math.random() * length)
  23. const temp = this.data.input_data[x]
  24. this.data.input_data[x] = this.data.input_data[y]
  25. this.data.input_data[y] = temp
  26. }
  27. this.setData({
  28. input_data: this.data.input_data
  29. })
  30. }
  31. })
  1. //test.wxss
  2. .log-list {
  3. display: flex;
  4. flex-direction: column;
  5. padding: 40rpx;
  6. }
  7. input {
  8. background: none repeat scroll 0 0 #FFEEEE;
  9. float: left;
  10. width: 240px;
  11. padding: 0 3px;
  12. padding-left:10px;
  13. height: 42px;
  14. color: #69737d;
  15. font-size: 16px;
  16. line-height: 42px;
  17. border: 1px solid #E70047;
  18. margin: 20rpx;
  19. }
  20. button{
  21. display: inline-block;
  22. vertical-align: baseline;
  23. margin: 0 2px;
  24. margin-top:30rpx;
  25. outline: none;
  26. text-align: center;
  27. text-decoration: none;
  28. font: 14px/100% Arial, Helvetica, sans-serif;
  29. padding: .5em 2em .55em;
  30. text-shadow: 0 1px 1px rgba(0,0,0,.3);
  31. border-radius: .5em;
  32. box-shadow: 0 1px 2px rgba(0,0,0,.2);
  33. }
分享到:

4人打赏积分

Michael漂泊水手JeremyLu梦醒时分
JeremyLu
JeremyLu 2016-11-27 11:11:43.0

for:key是很多初学者难理解的知识点

Roluce
Roluce 2016-11-27 13:09:16.0

@JeremyLu 嗯,我开始看的时候也不是太懂,慢慢的才懂了点~

梦醒时分
梦醒时分 2016-11-27 20:10:13.0

这个好,前几天群里还有美女问,赶快拿着去撩妹子吧

Roluce
Roluce 2016-11-27 22:27:01.0
我是小宝
我是小宝 2016-11-28 21:38:29.0

学习

追风使者
追风使者 2018-07-27 18:09:37.0

你好 我粘了源码 但是wx:key不起作用是我忽视了什么选项吗?

忘川
忘川 2018-11-21 15:30:54.0

收藏一波

7条评论
我来说两句...
x
 
Ctrl+Enter
作者

Roluce

Roluce

APP:0 帖子:50 回复:112 积分:3610

已加入社区[3236]天

山东_聊城_qq:635068

作者详情》