脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序 setData

浅谈小程序 setData学问多

 更新时间：2019年02月20日 14:37:16   作者：henry_chen  
这篇文章主要介绍了浅谈小程序 setData学问多，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

问题解决！以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

相关文章

  • webpack4 optimization使用总结

    webpack4 optimization使用总结

    这篇文章主要介绍了webpack4 optimization使用总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • js中实现继承的五种方法

    js中实现继承的五种方法

    这篇文章主要介绍了js中实现继承的五种方法，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
    2021-01-01
  • 仅IE支持clearAttributes/mergeAttributes方法使用介绍

    仅IE支持clearAttributes/mergeAttributes方法使用介绍

    仅IE中HTMLElement元素具有clearAttributes/mergeAttributes方法，它们都是非标准的
    2012-05-05
  • js实现拖动模态框效果

    js实现拖动模态框效果

    这篇文章主要为大家详细介绍了js实现拖动模态框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JavaScrip报错:module is not defined的原因及解决

    JavaScrip报错:module is not defined的原因及解决

    这篇文章主要给大家介绍了关于JavaScrip报错:module is not defined的原因及解决方法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • 论Bootstrap3和Foundation5网格系统的异同

    论Bootstrap3和Foundation5网格系统的异同

    这篇文章主要介绍了Bootstrap3和Foundation5网格系统，网格的基本构造，如何构建的，描述它们的主要部件，以及它们对不同屏幕的大小表现出的差异，感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 解决webpack无法通过IP地址访问localhost的问题

    解决webpack无法通过IP地址访问localhost的问题

    下面小编就为大家分享一篇解决webpack无法通过IP地址访问localhost的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • JS简单实现动画弹出层效果

    JS简单实现动画弹出层效果

    本文给大家介绍的是是一款javascript弹出层特效,支持点击触发js弹出层,滑过触发js弹出层,带动画效果js弹出层,可自定义函数回调js弹出层。
    2015-05-05
  • JavaScript截断字符串的方法

    JavaScript截断字符串的方法

    这篇文章主要介绍了JavaScript截断字符串的方法,涉及javascript字符串截取的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • 前端小知识之??= 操作符更简洁的默认值处理方式

    前端小知识之??= 操作符更简洁的默认值处理方式

    这篇文章主要介绍了前端小知识之??= 操作符更简洁的默认值处理方式的相关资料,??=操作符是JavaScript中用于设置默认值的新操作符,它仅在变量值为null或undefined时才赋值,需要的朋友可以参考下
    2024-11-11

最新评论