小程序 setData 学问多
栏目: JavaScript · 发布时间: 5年前
内容简介:先科普下 setData 做的事情:在数据传输时,逻辑层会执行一次 JSON.stringify 来去除掉 setData 数据中不可传输的部分,之后将数据发送给视图层。同时,逻辑层还会将 setData 所设置的数据字段与 data 合并,使开发者可以用 this.data 读取到变更后的数据。因此频繁调用,视图会一直更新,阻塞用户交互,引发性能问题。
先科普下 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> 复制代码
问题解决!
参考资料
- 终极蛇皮上帝视角之微信小程序之告别 setData , 佯真愚, 2018年08月12日
以上所述就是小编给大家介绍的《小程序 setData 学问多》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 关于HashMap容量的初始化,还有这么多学问。
- 程序员有话说 | 平时的程序猿 VS 面试的程序员
- 玩转小程序转发——小程序探索
- 利用“驱动人生”升级程序的恶意程序预警
- 我是女程序员,不是程序媛
- 「小程序JAVA实战」小程序搜索功能(54)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Java核心技术及面试指南
金华、胡书敏、周国华、吴倍敏 / 北京大学出版社 / 2018-9-1 / 59.00
本书根据大多数软件公司对高级开发的普遍标准,为在Java 方面零基础和开发经验在3 年以下的初级程序员提供了升级到高级工程师的路径,并以项目开发和面试为导向,精准地讲述升级必备的技能要点。具体来讲,本书围绕项目常用技术点,重新梳理了基本语法点、面向对象思想、集合对象、异常处理、数据库操作、JDBC、IO 操作、反射和多线程等知识点。 此外,本书还提到了对项目开发很有帮助的“设计模式”和“虚拟......一起来看看 《Java核心技术及面试指南》 这本书的介绍吧!