小程式 setData 學問多

henry_chen發表於2019-02-19

為什麼不能頻繁 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>
複製程式碼

問題解決！

參考資料

相關文章