wx:key详解

原文地址：http://www.wxappclub.com/topic/536

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.  
11. //test.wxml
12. <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.  
10. },

---

E：2个动态图的源码

1. //test.wxml
2.  
3. <view class="container log-list">
4.  
5. <!--有wx:key-->
6. <input value="id:{{item.id}}" wx:for="{{input_data}}" wx:key="unique" />
7.  
8. <button bindtap="addToFront">
9. 前部插入元素
10. </button>
11.  
12. <button bindtap="switch">
13. 随机排序
14. </button>
15.  
16. </view>
18. //test.js
19.  
20. Page({
21.  
22. data: {
23. input_data: [
24. { id: 1, unique: "unique1" },
25. { id: 2, unique: "unique2" },
26.  
27. ]
28. },
29. //前部插入元素函数
30. addToFront: function (e) {
31. const length = this.data.input_data.length + 1;
32. this.data.input_data = [{ id: length, unique: 'unique_' + length }].concat(this.data.input_data)
33. this.setData({
34. input_data: this.data.input_data
35. })
36. },
37. //随机排序函数
38. switch: function (e) {
39. const length = this.data.input_data.length
40. for (let i = 0; i < length; ++i) {
41. const x = Math.floor(Math.random() * length)
42. const y = Math.floor(Math.random() * length)
43. const temp = this.data.input_data[x]
44. this.data.input_data[x] = this.data.input_data[y]
45. this.data.input_data[y] = temp
46. }
47. this.setData({
48. input_data: this.data.input_data
49. })
50. }
51. })
53. //test.wxss
54. .log-list {
55. display: flex;
56. flex-direction: column;
57. padding: 40rpx;
58. }
59.  
60. input {
61. background: none repeat scroll 0 0 #FFEEEE;
62. float: left;
63. width: 240px;
64. padding: 0 3px;
65. padding-left:10px;
66. height: 42px;
67. color: #69737d;
68. font-size: 16px;
69. line-height: 42px;
70. border: 1px solid #E70047;
71. margin: 20rpx;
72. }
73.  
74. button{
75. display: inline-block;
76. vertical-align: baseline;
77. margin: 0 2px;
78. margin-top:30rpx;
79. outline: none;
80. text-align: center;
81. text-decoration: none;
82. font: 14px/100% Arial, Helvetica, sans-serif;
83. padding: .5em 2em .55em;
84. text-shadow: 0 1px 1px rgba(0,0,0,.3);
85. border-radius: .5em;
86. box-shadow: 0 1px 2px rgba(0,0,0,.2);
87. }