為什么不能頻繁 setData

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),寧海企業(yè)網(wǎng)站建設(shè),寧海品牌網(wǎng)站建設(shè),網(wǎng)站定制,寧海網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,寧海網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

先科普下 setData 做的事情：

在數(shù)據(jù)傳輸時，邏輯層會執(zhí)行一次 JSON.stringify 來去除掉 setData 數(shù)據(jù)中不可傳輸?shù)牟糠?，之后將?shù)據(jù)發(fā)送給視圖層。同時，邏輯層還會將 setData 所設(shè)置的數(shù)據(jù)字段與 data 合并，使開發(fā)者可以用 this.data 讀取到變更后的數(shù)據(jù)。

因此頻繁調(diào)用，視圖會一直更新，阻塞用戶交互，引發(fā)性能問題。

但頻繁調(diào)用是常見開發(fā)場景，能不能頻繁調(diào)用的同時，視圖延遲更新呢？

參考 Vue，我們能知道，Vue 每次賦值操作并不會直接更新視圖，而是緩存到一個數(shù)據(jù)更新隊(duì)列中，異步更新，再觸發(fā)渲染，此時多次賦值，也只會渲染一次。

于是有網(wǎng)友就給出了這套方案的實(shí)現(xiàn)方法：

let newState = null
const asyncSetData = ({
  vm,
  newData,
}) => {
  newState = {
    ...newState,
    ...newData,
  }
  Promise.resolve().then(() => {
    if (!newState) return
    vm.setData({
      ...newState,
    })
    newState = null
  })
}

由于異步代碼會在同步代碼之后執(zhí)行，因此，當(dāng)你多次使用 asyncSetData 設(shè)置 newState 時，newState 都會被緩存起來，并異步 setData 一次

但同時，這個方案也會帶來一個新的問題，同步代碼會阻塞頁面的渲染。

同步代碼會阻塞頁面的渲染的問題其實(shí)在瀏覽器中也存在，但在小程序中，由于是邏輯、視圖雙線程架構(gòu)，因此邏輯并不會阻塞視圖渲染，這是小程序的優(yōu)點(diǎn)，但在這套方案將會丟失這個優(yōu)點(diǎn)。

魚與熊掌不可兼得也！

對于信息流頁面，數(shù)據(jù)過多怎么辦

單次設(shè)置的數(shù)據(jù)不能超過 1024kB，請盡量避免一次設(shè)置過多的數(shù)據(jù)

通常，我們拉取到分頁的數(shù)據(jù) newList，添加到數(shù)組里，一般是這么寫：

this.setData({
 list: this.data.list.concat(newList)
})

隨著分頁次數(shù)的增加，list 會逐漸增大，當(dāng)超過 1024 kb 時，程序會報 exceed max data size 錯誤。

為了避免這個問題，我們可以直接修改 list 的某項(xiàng)數(shù)據(jù)，而不是對整個 list 重新賦值：

let length = this.data.list.length;
let newData = newList.reduce((acc, v, i)=>{
 acc[`list[${length+i}]`] = v;
 return acc;
}, {});
this.setData(newData);

這看著似乎還有點(diǎn)繁瑣，為了簡化操作，我們可以把 list 的數(shù)據(jù)結(jié)構(gòu)從一維數(shù)組改為二維數(shù)組：list = [newList, newList]， 每次分頁，可以直接將整個 newList 賦值到 list 作為一個子數(shù)組，此時賦值方式為：

let length = this.data.list.length;
this.setData({
 [`list[${length}]`]: newList
});

同時，模板也需要相應(yīng)改成二重循環(huán)：

下拉加載，讓我們一夜回到解放前

信息流產(chǎn)品，總避免不了要做下拉加載。

下拉加載的數(shù)據(jù)，需要插到 list 的最前面，所以我們應(yīng)該這樣做：

this.setData({
 'list[-1]': newList
})

哦不，對不起，上面是錯的，應(yīng)該是下面這樣：

this.setData({
 list: this.data.list.unshift(newList)
});

這下好，又是一次性修改整個數(shù)組，一夜回到解放前......

為了解決這個問題，這里需要一點(diǎn)奇淫巧技：

• 為下拉加載維護(hù)一個單獨(dú)的二維數(shù)組 pullDownList
• 在渲染時，用 wxs 將 pullDownList reverse 一下

此時，當(dāng)下拉加載時，便可以只修改數(shù)組的某個子項(xiàng)：

let length = this.data.pullDownList.length;
this.setData({
 [`pullDownList[${length}]`]: newList
});

關(guān)鍵在于渲染時候的反向渲染：

function reverseArr(arr) {
 console.log
 return arr.reverse()
}
module.exports = {
 reverseArr: reverseArr
}


 



 

問題解決！以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。