這篇文章主要介紹了淺談小程序 setData學問多,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
爲什麼不能頻繁 setData
先科普下 setData 做的事情:
在數據傳輸時,邏輯層會執行一次 JSON.stringify 來去除掉 setData 數據中不可傳輸的部分,之後將數據發送給視圖層。同時,邏輯層還會將 setData 所設置的數據字段與 data 合併,使開發者可以用 this.data 讀取到變更後的數據。
因此頻繁調用,視圖會一直更新,阻塞用戶交互,引發性能問題。
但頻繁調用是常見開發場景,能不能頻繁調用的同時,視圖延遲更新呢?
參考 Vue,我們能知道,Vue 每次賦值操作並不會直接更新視圖,而是緩存到一個數據更新隊列中,異步更新,再觸發渲染,此時多次賦值,也只會渲染一次。
於是有網友就給出了這套方案的實現方法:
let newState = null const 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) });
這下好,又是一次性修改整個數組,一夜回到解放前......
爲了解決這個問題,這裏需要一點奇淫巧技:
- 爲下拉加載維護一個單獨的二維數組 pullDownList
- 在渲染時,用 wxs 將 pullDownList reverse 一下
此時,當下拉加載時,便可以只修改數組的某個子項:
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>
問題解決!以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持神馬文庫。