這邊文章的內(nèi)容主要講述在小程序中使用 wx:key 提升 wx:for 的渲染效率

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

如果不加 wx:key, 在 setData 之后，如果 array 內(nèi)的數(shù)據(jù)如果發(fā)生改變，會(huì)重新創(chuàng)建前端的渲染對(duì)象加上 wx:key，重新渲染時(shí)，只是沈陽(yáng)微信小程序

將對(duì)應(yīng)的對(duì)象重新排序。未發(fā)生變化的對(duì)象，不會(huì)重新創(chuàng)建

參考官方的解釋

當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時(shí)候，會(huì)校正帶有 key 的組件，框架會(huì)確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)，并且提高列表渲染時(shí)的效率。

需要驗(yàn)證的問(wèn)題

加上 wx:key 之后，會(huì)根據(jù)給定的 key 進(jìn)行排序么？

寫(xiě)個(gè)簡(jiǎn)單的測(cè)試頁(yè)面

<block wx:for="{{languages}}" wx:for-item="language" wx:key="id">  <text class="log-item">{{ language.id }} . {{ language.name }}</text></block>data: {  languages: [    {id: 1, name: 'php'},    {id: 4, name: 'javascript'},    {id: 3, name: 'golang'},    {id: 2, name: 'python'},    {id: 5, name: 'java'},  ],},

從測(cè)試結(jié)果來(lái)看，并不會(huì)影響到排序。

key 重名時(shí)是否會(huì)報(bào)錯(cuò)

data: {  languages: [    {id: 1, 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.languageslanguages.push(language)this.setData({languages: languages})}

微信小程序開(kāi)發(fā)工具只會(huì)報(bào)一個(gè)警告，并不會(huì)導(dǎo)致程序崩潰

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

比較奇怪的是，這個(gè)警告只有在重新渲染時(shí)才會(huì)報(bào)，如果初始化時(shí)就使用同樣的 key，并不會(huì)導(dǎo)致警告。

相關(guān)視頻連接:小程序開(kāi)發(fā)教程

以上就是小程序：使用 wx:key 提升 wx:for 的渲染效率的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注沈陽(yáng)網(wǎng)站建設(shè)其它相關(guān)文章！