小程式：使用 wx:key 提升 wx:for 的渲染效率

這邊文章的內容主要講述在小程式中使用wx:key 提升wx:for 的渲染效率

之所以加上wx:key 會提升wx:for 的渲染效率，原因是（我的初步理解）

• 如果不加wx:key, 在setData 之後，如果array 內的資料如果改變，會重新建立前端的渲染物件
• 加上wx:key，重新渲染時，只是將對應的物件重新排序。未發生變化的對象，不會重新創建

參考官方的解釋

#當資料改變觸發渲染層重新渲染的時候，會校正帶有key 的元件，框架會確保他們被重新排序，而不是重新創建，以確保使元件保持自身的狀態，並且提高清單渲染時的效率。

需要驗證的問題

加上 wx:key 之後，會根據給定的 key 進行排序麼？

寫個簡單的測試頁面

<block wx:for="{{languages}}" wx:for-item="language" wx:key="id">
  <text class="log-item">{{ language.id }} . {{ language.name }}</text>
</block>

data: {
  languages: [
    {id: 小程式：使用 wx:key 提升 wx:for 的渲染效率, name: &#39;php&#39;},
    {id: 4, name: &#39;javascript&#39;},
    {id: 3, name: &#39;golang&#39;},
    {id: 2, name: &#39;python&#39;},
    {id: 5, name: &#39;java&#39;},
  ],
},

從測試結果來看，並不會影響排序。

key 重新名稱時是否會報錯誤

data: {
  languages: [
    {id: 小程式：使用 wx:key 提升 wx:for 的渲染效率, name: 'php'},
    {id: 4, name: 'javascript'},
    {id: 3, name: 'golang'},
    {id: 2, name: 'python'},
    {id: 5, name: 'java'},
  ],
},

click: function () {
	let language = {id: 5, name: 'kotlin'}
	let languages = this.data.languages
	languages.push(language)

	this.setData({
		languages: languages
	})
}

微信小程式開發工具只會報一個警告，並不會導致程式崩潰

VM6265:2 Do not set same key {5} in wx:key

比較奇怪的是，這個警告只有在重新渲染時才會報，如果初始化時就使用同樣的key，並不會導致警告。

相關影片連線:小程式開發教學

以上是小程式：使用 wx:key 提升 wx:for 的渲染效率的詳細內容。更多資訊請關注PHP中文網其他相關文章！