浅谈小程序 setData学问多


Posted in Javascript onFebruary 20, 2019

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

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

Javascript 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
vue.js 实现点击展开收起动画效果
Jul 07 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 #Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 #Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 #Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 #Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 #Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 #Javascript
详解关于element级联选择器数据回显问题
Feb 20 #Javascript
You might like
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
javascript常用函数(1)
2015/11/04 Javascript
详解javascript高级定时器
2015/12/31 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
jquery 手势密码插件
2017/03/17 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
shiro授权的实现原理
2017/09/21 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
python 动态调用函数实例解析
2019/10/21 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
django中cookiecutter的使用教程
2020/12/03 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
学生自我评价范文
2014/02/02 职场文书
上班玩手机检讨书
2014/02/17 职场文书
老公保证书范文
2014/04/29 职场文书
幼儿园见习报告
2014/10/30 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android