小程序 setData 學問多

爲何不能頻繁 setData

先科普下 setData 作的事情：

在數據傳輸時，邏輯層會執行一次 JSON.stringify 來去除掉 setData 數據中不可傳輸的部分，以後將數據發送給視圖層。同時，邏輯層還會將 setData 所設置的數據字段與 data 合併，使開發者能夠用 this.data 讀取到變動後的數據。

所以頻繁調用，視圖會一直更新，阻塞用戶交互，引起性能問題。

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

參考 Vue，咱們能知道，Vue 每次賦值操做並不會直接更新視圖，而是緩存到一個數據更新隊列中，異步更新，再觸發渲染，此時屢次賦值，也只會渲染一次。

let newState = null;
let timeout = null;
const asyncSetData = ({
  vm,
  newData,
}) => {
  newState = {
    ...newState,
    ...newData,
  };
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    vm.setData({
      ...newState,
    });
    newState = null
  }, 0);
};

因爲異步代碼會在同步代碼以後執行，所以，當你屢次使用 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) {
  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>

問題解決！

參考資料

• 終極蛇皮上帝視角之微信小程序之告別 setData, 佯真愚, 2018年08月12日