淺談小程序 setData學問多

更新時間：2019年02月20日 14:37:16 作者：henry_chen

這篇文章主要介紹了淺談小程序 setData學問多，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

為什么不能頻繁 setData

先科普下 setData 做的事情：

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

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

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

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

于是有網友就給出了這套方案的實現方法：

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

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

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

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

魚與熊掌不可兼得也！

對于信息流頁面，數據過多怎么辦

單次設置的數據不能超過 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
});

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

<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>

問題解決！以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

webpack4 optimization使用總結
這篇文章主要介紹了webpack4 optimization使用總結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-11-11
js中實現繼承的五種方法
這篇文章主要介紹了js中實現繼承的五種方法，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2021-01-01
僅IE支持clearAttributes/mergeAttributes方法使用介紹
僅IE中HTMLElement元素具有clearAttributes/mergeAttributes方法，它們都是非標準的
2012-05-05
js實現拖動模態(tài)框效果
這篇文章主要為大家詳細介紹了js實現拖動模態(tài)框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
JavaScrip報錯:module?is?not?defined的原因及解決
這篇文章主要給大家介紹了關于JavaScrip報錯:module?is?not?defined的原因及解決方法,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-09-09
論Bootstrap3和Foundation5網格系統(tǒng)的異同
這篇文章主要介紹了Bootstrap3和Foundation5網格系統(tǒng)，網格的基本構造，如何構建的，描述它們的主要部件，以及它們對不同屏幕的大小表現出的差異，感興趣的小伙伴們可以參考一下
2016-05-05
解決webpack無法通過IP地址訪問localhost的問題
下面小編就為大家分享一篇解決webpack無法通過IP地址訪問localhost的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
JS簡單實現動畫彈出層效果
本文給大家介紹的是是一款javascript彈出層特效,支持點擊觸發(fā)js彈出層,滑過觸發(fā)js彈出層,帶動畫效果js彈出層,可自定義函數回調js彈出層。
2015-05-05
JavaScript截斷字符串的方法
這篇文章主要介紹了JavaScript截斷字符串的方法,涉及javascript字符串截取的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07
前端小知識之??=?操作符更簡潔的默認值處理方式
這篇文章主要介紹了前端小知識之??=?操作符更簡潔的默認值處理方式的相關資料,??=操作符是JavaScript中用于設置默認值的新操作符,它僅在變量值為null或undefined時才賦值,需要的朋友可以參考下
2024-11-11