微信小程式開發之setData

之setdata？為什麼不能頻繁 setdata

先科普下 setdata 做的事情：

在資料傳輸時，邏輯層會執行一次 json.stringify 來去除掉 setdata 資料中不可傳輸的部分，之後將資料傳送給檢視層。同時，邏輯層還會將 setdata 所設定的資料字段與 data 合併，使開發者可以用 this.data 讀取到變更後的資料。

因此頻繁呼叫，檢視會一直更新，阻塞使用者互動，引發效能問題。

但頻繁呼叫是常見開發場景，能不能頻繁呼叫的同時，檢視延遲更新呢？

參考 vue，我們能知道，vue 每次賦值操作並不會直接更新檢視，而是快取到乙個資料更新佇列中，非同步更新，再觸發渲染，此時多次賦值，也只會渲染一次。

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

let newstate = null
const asyncsetdata =() =>
promise.resolve().then(() =>)
newstate = null
})}

由於非同步**會在同步**之後執行，因此，當你多次使用 asyncsetdata 設定 newstate 時，newstate 都會被快取起來，並非同步 setdata 一次

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

同步**會阻塞頁面的渲染的問題其實在瀏覽器中也存在，但在小程式中，由於是邏輯、檢視雙線程架構，因此邏輯並不會阻塞檢視渲染，這是小程式的優點，但在這套方案將會丟失這個優點。

魚與熊掌不可兼得也！

對於資訊流頁面，資料過多怎麼辦

單次設定的資料不能超過 1024kb，請盡量避免一次設定過多的資料

通常，我們拉取到分頁的資料 newlist，新增到陣列裡，一般是這麼寫：

this
.setdata()

隨著分頁次數的增加，list 會逐漸增大，當超過 1024 kb 時，程式會報 exceed max data size 錯誤。

為了避免這個問題，我們可以直接修改 list 的某項資料，而不是對整個 list 重新賦值：

let length = this
.data.list.length;
let newdata = newlist.reduce((acc, v, i)=>]`] =v;
return
acc;
}, {});
this.setdata(newdata);

這看著似乎還有點繁瑣，為了簡化操作，我們可以把 list 的資料結構從一維陣列改為二維陣列：list = [newlist, newlist]，每次分頁，可以直接將整個 newlist 賦值到 list 作為乙個子陣列，此時賦值方式為：

let length = this
.data.list.length;
this
.setdata(]`]: newlist
});

同時，模板也需要相應改成二重迴圈：

for="}" wx:for-item="}" wx:key="}">
for="}" wx:key="}">

下拉載入，讓我們一夜回到解放前

資訊流產品，總避免不了要做下拉載入。

下拉載入的資料，需要插到 list 的最前面，所以我們應該這樣做：

this
.setdata()
//哦不，對不起，上面是錯的，應該是下面這樣：
this
.setdata();

這下好，又是一次性修改整個陣列，一夜回到解放前......

為了解決這個問題，這裡需要一點奇淫巧技：

為下拉載入維護乙個單獨的二維陣列 pulldownlist

在渲染時，用 wxs 將 pulldownlist reverse 一下

此時，當下拉載入時，便可以只修改陣列的某個子項：

let length = this
.data.pulldownlist.length;
this
.setdata(]`]: newlist
});

關鍵在於渲染時候的反向渲染：

function
reversearr(arr) 
module.exports =
for="}" wx:for-item="}" wx:key="}">
for="}" wx:key="}">
for="}" wx:for-item="}" wx:key="}">
for="}" wx:key="}">

問題解決！以上就是本文的全部內容

微信小程式開發之setData

微信小程式 setData 方法

微信小程式 setData 的坑

微信小程式 setData 的坑

微信小程式開發之setData

微信小程式 setData 方法

微信小程式 setData 的坑

微信小程式 setData 的坑

相關推薦