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

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

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

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

參考官方的解釋

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

需要驗證的問題

加上 wx:key 之后，會根據(jù)給定的 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: 1, name: 'php'},    {id: 4, name: 'javascript'},    {id: 3, name: 'golang'},    {id: 2, name: 'python'},    {id: 5, name: 'java'},  ],},

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

key 重名時是否會報錯

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ā)工具只會報一個警告，并不會導致程序崩潰

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

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

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

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