评论

setData 学问多

为什么不能频繁 setData?我偏偏想频繁 setData 啊,而且setData 操作的数据就是很多。我来告诉你怎么办。

为什么不能频繁 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>

问题解决!

参考资料

最后一次编辑于  2019-04-11  
点赞 22
收藏
评论

8 个评论

  • 林上皓
    林上皓
    2019-04-10

    纠正下 作者的一处小错误。

    <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"

    2019-04-10
    赞同 1
    回复 1
    • 2019-04-11

      感谢

      2019-04-11
      回复
  • Me嶶笶
    Me嶶笶
    2020-04-15

    您好 这个二维数组是怎么定义的呀 新手 谢谢指教

    2020-04-15
    赞同
    回复 2
  • soul
    soul
    2019-07-12

    请问你知道我采用二维数组,但是分页加载到数据5百多kb的时候就卡住渲染不了页面是什么原因吗,都不会到1024kb,感觉我每次还是变成setdata整个累计的数据并不是最后一页的数据

    2019-07-12
    赞同
    回复 3
    • 2019-07-12
      你的 setData 是把数据赛道一个新的下标吗,我没有遇到你上述的问题,你提供下代码参考下最好了
      2019-07-12
      回复
    • soul
      soul
      2019-07-15回复

       

      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
         });

      是的,关键是没有报超出阀值的提示

      2019-07-15
      回复
    • 2019-07-16
      没看出什么问题,提供代码片段在论坛问下吧(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
      2019-07-16
      回复
  • console.log
    console.log
    2019-03-29

    这样的方式是为了每次分页只setdata最后一个二维数组,那如果前一页更新了或者被插入了一条数据,那么我在获取下一页的时候会不会出现和上一页重复的内容。因为我们每次setdata下一页数据的时候时无法更新上一页或者前面几页的数据。这样我们改怎么去解决呢?

    2019-03-29
    赞同
    回复 2
    • 2019-03-30

      你说的是分页的问题,分页本来就不该修改之前已经拉下来的数据。参考:《分页查询的重复数据问题

      2019-03-30
      回复
    • console.log
      console.log
      2019-04-01回复

      哎呀提醒的好,我还在渲染那边想了半天的方法。还得从sq入手,谢谢大佬

      2019-04-01
      回复
  • cc
    cc
    2019-03-26

    Mark

    2019-03-26
    赞同
    回复
  • 2019-03-23

    都是很实用的技巧

    2019-03-23
    赞同
    回复
  • 耐跪搓衣板
    耐跪搓衣板
    2019-03-19

    不错

    2019-03-19
    赞同
    回复
  • HeHe.J
    HeHe.J
    2019-03-19

    newState是个对象吧

    2019-03-19
    赞同
    回复 3
    • 2019-03-19

      是的,用于缓存 setData 的数据

      2019-03-19
      回复
    • HeHe.J
      HeHe.J
      2019-03-19回复

      promise 里面的 if 判断,都是false吧

      2019-03-19
      回复
    • 2019-03-19回复HeHe.J

      多次 asyncSetData 会有多个 Promise,所以 newState 存在为 null 的情况

      换成 setTimeout 可能会好理解一些

      2019-03-19
      回复
登录 后发表内容