浅谈小程序 setData学问多

为什么不能频繁 setData

先科普下 setData 做的事情：

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

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

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

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

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

let newState = nullconst 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});

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