如果解决小程序1024kb渲染之坑

问题：

在小程序开发中如果有那么个场景和操作步骤，获取商品下拉列表商品列表data为goodsList

当从后台获取数据response.data.list,通常我们会setData({goodsList:response.data.list})
下拉获取到第二页数据，添加goodsList里来，再次setData一次goodsList（是的小程序直接添加进当前数组，再次setData就能渲染出来，不用生成新数组，这里不用vue3.0之前把呢不能和react那样），

const goodObject = {
  goodName:'小苹果'
}
this.data.goodsList.push(goodObject);
const goodsList = this.data.goodsList
this.setData({
  goodsList
})

或者数组合拼新数组

cosnt goodsList = this.data.goodsList
cosnt newGoodsList = response.data.list
this.setData({
  goodsList:[...goodsList,...newGoodsList]
})

　　看似没问题，实则再不同机型会有兼容问题，但是这个不是我要讲的，我要讲的是更深的坑，好吧，我们开始吧

小程序有讲

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。

其中 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。

注意：

直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
仅支持设置可 JSON 化的数据。
单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

当我们每次下拉分页，其实是将所有累计的每页数据一次setData的，那么理论上来说，迟早会超过1024Kb，如果数据里img字段而且还是二维码base64字符串，那没几页就会超过1024，此时就会报错

试了很多方法，最终还是没解决。。。。

‘

’‘

’

‘’

当我要放弃的时候，突然灵光一下，才明白小程序团队的用心良苦，如果数据越大，渲染越吃力，那开发者们开发出的小程序变慢，那人们第一时间吐槽的就是小程序底层引擎有多垃圾，而不是骂当前小程序应用有多垃圾于是小程序开发团队才会设置这样一个阈值1024kb。那么既然它有设置这样的阈值，就有相应的处理方案吧，可惜官网给出的方案太直白，直白的让人无法理解

官方文档说：请尽量避免一次设置过多的数据

　　好，然后让我们避免一次设置过多的数据，那我们怎么把过的数据渲染呢，少部分少部分的来设置？怎么设置呢？

我就不一一罗列我试过的方法了，直接给大家说一个很灵验得方法把

　　如果我们有个数组100个长度就到达1024kb，那就把数组拆分设置setData，拆多大呢？只要小于1024就行。

而且次数不影响相率，那我们就挨个渲染。为了代码的可拓展。最终给大家一个万能的方案

当我们组装好我们的goodsList的时候，挨个设置，挨个去渲染！

cosnt oldList = this.data.goodsList
cosnt newGoodsList = response.data.list
const goodsList = [...newGoodsList,...oldList]
for(let i in goodsList){
  this.setData({
    ['goodsList['+i+']']: goodsList[i]
  })
}

　　Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。

总之遇到i一个数组就这样吧，不会有潜在bug了。

for(let i in goodsList){
  this.setData({
    ['goodsList['+i+']']: goodsList[i]
  })
}
现在是凌晨快3点了，还在等运维上线，我也是醉了，好了 就这样吧！