浅谈小程序 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 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
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
php微信公众号开发之校园图书馆
2018/10/20 PHP
JS面向对象编程之对象使用分析
2010/08/19 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
盘点提高 Python 代码效率的方法
2014/07/03 Python
python实现调用其他python脚本的方法
2014/10/05 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
python实现各种插值法(数值分析)
2019/07/30 Python
python字典的常用方法总结
2019/07/31 Python
python实现智能语音天气预报
2019/12/02 Python
python访问hdfs的操作
2020/06/06 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
财务管理专业求职信
2014/06/11 职场文书
实习单位推荐信
2015/03/27 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫