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

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

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

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

參考官方的解釋

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

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

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

寫個(gè)簡單的測試頁面

<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'},  ],},

從測試結(jié)果來看，并不會影響到排序。

key 重名時(shí)是否會報(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})}

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

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

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

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

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