浅谈小程序 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 相关文章推荐
jquery cookie插件代码类
May 26 Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 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
PHP date函数参数详解
2006/11/27 PHP
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
CI框架常用函数封装实例
2016/11/21 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
用js编写留言板
2020/03/17 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
详解python读取和输出到txt
2019/03/29 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
python中np是做什么的
2020/07/21 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
html5启动原生APP总结
2020/07/03 HTML / CSS
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
法学毕业生自我鉴定
2014/01/31 职场文书
元旦活动感言
2014/03/08 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
python解析照片拍摄时间进行图片整理
2022/07/23 Python
python高温预警数据获取实例
2022/07/23 Python