欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浅谈小程序 setData学问多

程序员文章站 2022-06-05 22:53:36
为什么不能频繁 setdata 先科普下 setdata 做的事情: 在数据传输时,逻辑层会执行一次 json.stringify 来去除掉 setdata 数...

为什么不能频繁 setdata

先科普下 setdata 做的事情:

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

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

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

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

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

let newstate = null
const asyncsetdata = ({
  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 会逐渐增大,当超过 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) {
 console.log
 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>

<block wx:for="{{list}}" wx:for-item="{{listitem}}" wx:key="{{listitem}}">
 <child wx:for="{{listitem}}" wx:key="{{item}}"></child>
</block>

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