為什么不能頻繁 setData
先科普下 setData 做的事情：
在數據傳輸時，邏輯層會執行一次 JSON.stringify 來去除掉 setData 數據中不可傳輸的部分，之后將數據發送給視圖層。同時，邏輯層還會將 setData 所設置的數據字段與 data 合并，使開發者可以用 this.data 讀取到變更后的數據。
因此頻繁調用，視圖會一直更新，阻塞用戶交互，引發性能問題。
但頻繁調用是常見開發場景，能不能頻繁調用的同時，視圖延遲更新呢？
參考 Vue，我們能知道，Vue 每次賦值操作并不會直接更新視圖，而是緩存到一個數據更新隊列中，異步更新，再觸發渲染，此時多次賦值，也只會渲染一次。
于是有網友就給出了這套方案的實現方法：
let newState = nullconst asyncSetData = ({ vm, newData,}) => { newState = { ...newState, ...newData, } Promise.resolve().then(() => { if (!newState) return vm.setData({ ...newState, }) newState = null })}由于異步代碼會在同步代碼之后執行，因此，當你多次使用 asyncSetData 設置 newState 時，newState 都會被緩存起來，并異步 setData 一次
但同時，這個方案也會帶來一個新的問題，同步代碼會阻塞頁面的渲染。
同步代碼會阻塞頁面的渲染的問題其實在瀏覽器中也存在，但在小程序中，由于是邏輯、視圖雙線程架構，因此邏輯并不會阻塞視圖渲染，這是小程序的優點，但在這套方案將會丟失這個優點。
魚與熊掌不可兼得也！
對于信息流頁面，數據過多怎么辦
單次設置的數據不能超過 1024kB，請盡量避免一次設置過多的數據
通常，我們拉取到分頁的數據 newList，添加到數組里，一般是這么寫：
this.setData({ list: this.data.list.concat(newList)})隨著分頁次數的增加，list 會逐漸增大，當超過 1024 kb 時，程序會報 exceed max data size 錯誤。
為了避免這個問題，我們可以直接修改 list 的某項數據，而不是對整個 list 重新賦值：
let length = this.data.list.length;let newData = newList.reduce((acc, v, i)=>{ acc[`list[${length+i}]`] = v; return acc;}, {});this.setData(newData);這看著似乎還有點繁瑣，為了簡化操作，我們可以把 list 的數據結構從一維數組改為二維數組：list = [newList, newList]， 每次分頁，可以直接將整個 newList 賦值到 list 作為一個子數組，此時賦值方式為：
let length = this.data.list.length;this.setData({ [`list[${length}]`]: newList});同時，模板也需要相應改成二重循環：
<block wx:for="{{list}}" wx:for-item="{{listItem}}" wx:key="{{listItem}}"> <child wx:for="{{listItem}}" wx:key="{{item}}"></child></block>下拉加載，讓我們一夜回到解放前
信息流產品，總避免不了要做下拉加載。
下拉加載的數據，需要插到 list 的最前面，所以我們應該這樣做：
this.setData({ 'list[-1]': newList})哦不，對不起，上面是錯的，應該是下面這樣：
this.setData({ list: this.data.list.unshift(newList)});這下好，又是一次性修改整個數組，一夜回到解放前......
為了解決這個問題，這里需要一點奇淫巧技：
此時，當下拉加載時，便可以只修改數組的某個子項：
let length = this.data.pullDownList.length;this.setData({ [`pullDownList[${length}]`]: newList});關鍵在于渲染時候的反向渲染：
<wxs module="utils">function reverseArr(arr) { console.log return arr.reverse()}module.exports = { reverseArr: reverseArr}</wxs><block wx:for="{{utils.reverseArr(pullDownList)}}" wx:for-item="{{listItem}}" wx:key="{{listItem}}"> <child wx:for="{{listItem}}" wx:key="{{item}}"></child></block><block wx:for="{{list}}" wx:for-item="{{listItem}}" wx:key="{{listItem}}"> <child wx:for="{{listItem}}" wx:key="{{item}}"></child></block>問題解決！以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
