浅谈小程序 setData学问多

2023-08-28 18:26:05 64

为什么不能频繁setData

先科普下setData做的事情：

在数据传输时，逻辑层会执行一次JSON.stringify来去除掉setData数据中不可传输的部分，之后将数据发送给视图层。同时，逻辑层还会将setData所设置的数据字段与data合并，使开发者可以用this.data读取到变更后的数据。

因此频繁调用，视图会一直更新，阻塞用户交互，引发性能问题。

但频繁调用是常见开发场景，能不能频繁调用的同时，视图延迟更新呢？

参考Vue，我们能知道，Vue每次赋值操作并不会直接更新视图，而是缓存到一个数据更新队列中，异步更新，再触发渲染，此时多次赋值，也只会渲染一次。

于是有网友就给出了这套方案的实现方法：

letnewState=null
constasyncSetData=({
vm,
newData,
})=>{
newState={
...newState,
...newData,
}
Promise.resolve().then(()=>{
if(!newState)return
vm.setData({
...newState,
})
newState=null
})
}

由于异步代码会在同步代码之后执行，因此，当你多次使用asyncSetData设置newState时，newState都会被缓存起来，并异步setData一次

但同时，这个方案也会带来一个新的问题，同步代码会阻塞页面的渲染。

同步代码会阻塞页面的渲染的问题其实在浏览器中也存在，但在小程序中，由于是逻辑、视图双线程架构，因此逻辑并不会阻塞视图渲染，这是小程序的优点，但在这套方案将会丢失这个优点。

鱼与熊掌不可兼得也！

对于信息流页面，数据过多怎么办

单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据

通常，我们拉取到分页的数据newList，添加到数组里，一般是这么写：

this.setData({
list:this.data.list.concat(newList)
})

随着分页次数的增加，list会逐渐增大，当超过1024kb时，程序会报exceedmaxdatasize错误。

为了避免这个问题，我们可以直接修改list的某项数据，而不是对整个list重新赋值：

letlength=this.data.list.length;
letnewData=newList.reduce((acc,v,i)=>{
acc[`list[${length+i}]`]=v;
returnacc;
},{});
this.setData(newData);

这看着似乎还有点繁琐，为了简化操作，我们可以把list的数据结构从一维数组改为二维数组：list=[newList,newList]，每次分页，可以直接将整个newList赋值到list作为一个子数组，此时赋值方式为：

letlength=this.data.list.length;
this.setData({
[`list[${length}]`]:newList
});

同时，模板也需要相应改成二重循环：

下拉加载，让我们一夜回到解放前

信息流产品，总避免不了要做下拉加载。

下拉加载的数据，需要插到list的最前面，所以我们应该这样做：

this.setData({
'list[-1]':newList
})

哦不，对不起，上面是错的，应该是下面这样：

this.setData({
list:this.data.list.unshift(newList)
});

这下好，又是一次性修改整个数组，一夜回到解放前......

为了解决这个问题，这里需要一点奇淫巧技：

为下拉加载维护一个单独的二维数组pullDownList
在渲染时，用wxs将pullDownListreverse一下

此时，当下拉加载时，便可以只修改数组的某个子项：

letlength=this.data.pullDownList.length;
this.setData({
[`pullDownList[${length}]`]:newList
});

关键在于渲染时候的反向渲染：


functionreverseArr(arr){
console.log
returnarr.reverse()
}
module.exports={
reverseArr:reverseArr
}

问题解决！以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

浅谈小程序 setData学问多

热门推荐

随机推荐