小程序setdata优化_支付宝小程序扩展能力附录 1：优化 setData 逻辑方案明细

优化 setData 逻辑

任何页面变化都会触发 setData，同一时间可能会有多个 setData 触发页面进行重新渲染。如下四个接口都会触发 web-view 页面重新渲染。

Page.prototype.setData：触发整个页面做差异比较；

Page.prototype.$spliceData：针对长列表做优化，避免每次传递整个列表，触发整个页面做差异比较；

Component.prototype.setData：只会从对应组件节点开始做差异比较；

Component.prototype.$spliceData：针对长列表做优化，避免每次传递整个列表，只会从对应组件节点开始做差异比较。

优化建议

避免频繁触发 setData 或者 $spliceData，不管是页面级别还是组件级别。在我们分析的案例中，有些页面有倒计时逻辑，但是有的倒计时过于频繁触发(ms 级别的触发)；

需要频繁触发重新渲染时，避免使用页面级别的 setData 和 $spliceData，将这一块封装成自定义组件，然后使用组件级别的 setData 或 $spliceData 触发组件重新渲染；

长列表数据触发渲染时，使用 $spliceData 多次追加数据，而不用传递整个列表；

复杂页面建议封装成自定义组件，减少页面级别的 setData。

优化案例

推荐指定路径设置数据

this.setData({

'array[0]': 1,

'obj.x':2,

});

不推荐如下用法(虽然拷贝了this.data, 仍然直接更改了其属性)

const array = this.data.array.concat();

array[0] = 1;

const obj={...this.data.obj};

obj.x=2;

this.setData({array,obj});

更不推荐直接更改 this.data(违反不可变数据原则)

this.data.array[0]=1;

this.data.obj.x=2;

this.setData(this.data)

长列表使用 $spliceData

this.$spliceData({ 'a.b': [1, 0, 5, 6] })

注意

有时业务逻辑封装到了组件中，当组件 UI 需要重新渲染时，只需在组件内部调用 setData。但有时需要从页面触发组件重新渲染，比如在页面上监听了 onPageScroll 事件，当事件触发时，需要通知对应组件重新渲染，此时的处理措施如下所示：

// pages/index/index.jsPage({

onPageScroll(e) {

if (this.xxcomponent) {

this.xxcomponent.setData({

scrollTop: e.scrollTop })

}

})

// components/index/index.jsComponent({

didMount(){

this.$page.xxcomponent = this;

}

})

可在组件的 didMount 中将组件挂载到对应的页面上，即可在页面中调用组件级别的 setData 只触发组件重新渲染。

小程序setdata优化_支付宝小程序扩展能力附录 1：优化 setData 逻辑方案明细相关推荐

血泪总结:如何从微信小程序的坑跳进支付宝小程序的大坑
众所周知,iOS没人要了,小程序现在火了... 哈哈,开玩笑,不过小程序真是非常火所以,今天我就来讲讲最近折腾出的小程序总结:如何从微信小程序的坑跳进支付宝小程序的大坑! 小程序非常适合不经常使用的 ...
小程序搜索框_微信小程序搜索及优化相关知识科普
生活中我们常常会用到微信小程序,但很多人不知道该如何搜索.找到小程序:而有些已经做了自己的小程序的商家,也不懂怎么提升自己的微信小程序搜索效果.所以下面就跟大家科普下这两个问题. 1.怎么搜索微信小程 ...
医疗小程序源码_零售小程序源码，零售小程序商城
零售小程序开发(贺经理:188微1924电2925同号),零售小程序定制,零售小程序源码,零售小程序商城,零售商城小程序,零售小程序平台,零售小程序软件,开发零售小程序,近年来,实体经济转型.商流量红 ...
node.js 微信小程序部署服务器_微信小程序开发入门（一），Nodejs搭建本地服务器...
1. 如何模拟真实环境中,读取服务端数据,首先需要使用Nodejs搭建一个本地服务器的环境. 在搭建web服务器之前,需要先安装node.js(安装版本最好为6.9.x) 安装后node.js,接下 ...
微信小程序页面栈_微信小程序之页面传值(路由、页面栈、globalData、缓存)
1. 通过url带参数传递 1.1 固定参数传递例如,从 list 页面到 detail 页面, 传递一个或多个固定值 list页面传值: 点此进入 detail detail页面取值: onLoa ...
java写微信小程序答辩问题_微信小程序毕业设计选题和毕业论文怎么写，答辩流程是怎样的？...
1. 开始准备选题大四上学期开学时开始准备论文的,首先是确定论文主题,看自己想做什么毕业设计,可以选取之前接触过的,做过的东西,这样快一些,如果选的是没接触过的方向,一定要早点开始.打算做一个小程序 ...
小程序实名信息_【小程序】实名认证流程
健康服务云平台 | 第2664期为了让患者少跑腿,减少排队等候时间,让就医更加舒适便捷.我院依托微信公众平台.微信小程序开发建设我院健康服务云平台,逐步上线自助就医功能,全面推行网络便民服务.现已 ...
java小程序源码_【小程序源码分享】基于Java开发的物业管理系统!
前言大家好,我是it分享师,今天给大家带来一个基于Springmvc开发的物业管理系统,微信小程序的源码! 使用技术本套系统有两个入口,一个是微信小程序端主要是面向用户,另一个是基于spring, ...
php 小程序运动步数_微信小程序步数运动-收益讲解
不得不佩服,步数小程序的厉害之处. 把闲散的运动步数,转化成一种可量化的社交货币,流动保存起来,探索出一种门槛低,又健康的经济模式. 对用户,真金白银的刺激,免费步数换取/抵现商品,红包,充值卡等. ...
小程序实名信息_微信小程序+商城信息管理系统
下载地址长期有效微信商城信息管理系统(java后台+小程序) 使用方法 >温馨提示 java后台信息管理系统微信商城小程序 >使用方法加小编微信进行咨询 >实现功能一:会员管 ...

小程序setdata优化_支付宝小程序扩展能力附录 1：优化 setData 逻辑方案明细

小程序setdata优化_支付宝小程序扩展能力附录 1：优化 setData 逻辑方案明细相关推荐

最新文章

热门文章

小程序setdata优化_支付宝小程序扩展能力 附录 1：优化 setData 逻辑方案明细

小程序setdata优化_支付宝小程序扩展能力 附录 1：优化 setData 逻辑方案明细相关推荐

最新文章

热门文章

小程序setdata优化_支付宝小程序扩展能力附录 1：优化 setData 逻辑方案明细

小程序setdata优化_支付宝小程序扩展能力附录 1：优化 setData 逻辑方案明细相关推荐