小程序：最難點For的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. }
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" />
10. },

---

E：2個動態圖的源碼

1. //test.wxml
3. <view class="container log-list">
5. <!--有wx:key-->
6. <input value="id:{{item.id}}" wx:for="{{input_data}}" wx:key="unique" />
8. <button bindtap="addToFront">
9. 前部插入元素
10. </button>
12. <button bindtap="switch">
13. 隨機排序
14. </button>
16. </view>

1. //test.js
3. Page({
5. data: {
6. input_data: [
7. { id: 1, unique: "unique1" },
8. { id: 2, unique: "unique2" },
10. ]
11. },
12. //前部插入元素函數
13. addToFront: function (e) {
14. const length = this.data.input_data.length + 1;
15. this.data.input_data = [{ id: length, unique: 'unique_' + length }].concat(this.data.input_data)
16. this.setData({
17. input_data: this.data.input_data
18. })
19. },
20. //隨機排序函數
21. switch: function (e) {
22. const length = this.data.input_data.length
23. for (let i = 0; i < length; ++i) {
24. const x = Math.floor(Math.random() * length)
25. const y = Math.floor(Math.random() * length)
26. const temp = this.data.input_data[x]
27. this.data.input_data[x] = this.data.input_data[y]
28. this.data.input_data[y] = temp
29. }
30. this.setData({
31. input_data: this.data.input_data
32. })
33. }
34. })

1. //test.wxss
2. .log-list {
3. display: flex;
4. flex-direction: column;
5. padding: 40rpx;
6. }
8. input {
9. background: none repeat scroll 0 0 #FFEEEE;
10. float: left;
11. width: 240px;
12. padding: 0 3px;
13. padding-left:10px;
14. height: 42px;
15. color: #69737d;
16. font-size: 16px;
17. line-height: 42px;
18. border: 1px solid #E70047;
19. margin: 20rpx;
20. }
22. button{
23. display: inline-block;
24. vertical-align: baseline;
25. margin: 0 2px;
26. margin-top:30rpx;
27. outline: none;
28. text-align: center;
29. text-decoration: none;
30. font: 14px/100% Arial, Helvetica, sans-serif;
31. padding: .5em 2em .55em;
32. text-shadow: 0 1px 1px rgba(0,0,0,.3);
33. border-radius: .5em;
34. box-shadow: 0 1px 2px rgba(0,0,0,.2);
35. }