为什么不能频繁 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日
纠正下 作者的一处小错误。
<block wx:for="{{list}}" wx:for-item="{{listItem}}" wx:key="{{listItem}}"> <child wx:for="{{listItem}}" wx:key="{{item}}"></child>
</block>
这里的 wx:for-item="{{listItem}}" 应该这样写 wx:for-item="listItem"
感谢
您好 这个二维数组是怎么定义的呀 新手 谢谢指教
小程度官方也提供了另一种长列表的解决方案,可以参考:https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/recycle-view.html
请问你知道我采用二维数组,但是分页加载到数据5百多kb的时候就卡住渲染不了页面是什么原因吗,都不会到1024kb,感觉我每次还是变成setdata整个累计的数据并不是最后一页的数据
let searchList = [];
//如果isFromSearch是true从data中取出数据,否则先从原来的数据继续添加
searchList = [{
className: classname,
classId: curClassId,
list: res
//返回商品数据
}];
console.log(
this
.data.productList)
this
.data.curCategoryIndex = index + 1;
let listIndex =
this
.data.productList.length
this
.setData({
[
'productList['
+ listIndex +
']'
]: searchList,
//获取数据数组
searchLoading:
true
,
//把"上拉加载"的变量设为false,显示
heightArr:
this
.data.heightArr
});
是的,关键是没有报超出阀值的提示
这样的方式是为了每次分页只setdata最后一个二维数组,那如果前一页更新了或者被插入了一条数据,那么我在获取下一页的时候会不会出现和上一页重复的内容。因为我们每次setdata下一页数据的时候时无法更新上一页或者前面几页的数据。这样我们改怎么去解决呢?
你说的是分页的问题,分页本来就不该修改之前已经拉下来的数据。参考:《分页查询的重复数据问题》
哎呀提醒的好,我还在渲染那边想了半天的方法。还得从sq入手,谢谢大佬
Mark
都是很实用的技巧
不错
newState是个对象吧
是的,用于缓存 setData 的数据
promise 里面的 if 判断,都是false吧
多次 asyncSetData 会有多个 Promise,所以 newState 存在为 null 的情况
换成 setTimeout 可能会好理解一些