浅谈成都小程序微信小程序的setData

来源:成都manbetx3.0建设 栏目:manbetx3.0建设 时间:2022-01-19 浏览量:163
文字大小

由于微信小程序诞生于vue.js和react.js之后,所以他们在当初设计代码架构的时候也是借鉴了vue.js和react.js的想法,也遵循的组件化的方式,延用了setData的机制去把视图层和逻辑层做一个“中转站”两边连接起来。但是这种机制一直存在性能上的问题,微信小程序也不例外。先看一张图:

这张图大体描述了一下setData的工作原理,当程序开始触发setData操作的时候,先把数据做成字符串形式传递,同时把转换后的数据拼接成js脚本形式,接下来这个js脚本都被2边提供的evaluateJavascript所实现,那为什么要分webview和javascriptCore去执行呢?先说一下这2个是干嘛的

webview和JavascriptCore

        在微信打开小程序的时候,会先起了2个线程一个是view Thread,一个是AppService Thread, 通俗讲前者是视图层,后者是逻辑层。它们是独立的,各自职能不一样,但它们是并行操作的,小程序的页面展示都是嵌套在webview里面的,

在小程序入口文件app.js里面有一个pages配置项,例如:

pages: [

     'pages/indexBar',

     'pages/friends/friends'

]

这里配置了多少个页面,小程序都会预先加载多少个页面对应的webview,这是view Thread所做的操作,同时AppService Thread也是对应的页面做了逻辑层面的加载操作,会根据小程序的生命周期依次做逻辑操作,这里也会和view Thread有数据传输交互,下面一张图可以很详细的描述view Thread和AppService Thread同时加载一个页面的所有过程

在架构上,WebView 和 JavascriptCore 都是独立的模块,数据是不能直接共享的,为了让数据共享,WebView和JavascriptCore都提供了evaluateJavascript来实现,(在安卓机上老早以前提供的不是evaluateJavascript来调用js操作的,到sdk19以上采用evaluateJavascript方法)

由于有了以上的机制,造成了setData存在一些性能上的问题,如果频繁地调用,WebView和JavascriptCore执行并发多了就会造成用户体验卡顿的现象,为了减少性能开销,建议尽量对setData进行合并操作:

1
2
3

this.setData({ one: '1' })
this.setData({ two: '2'})
this.setData({ three: '3' })

修改成:

this.setData({
     one: '1',
     two: '2',
     three: '3',
})

这样就减少了拼接js脚本的次数,从而提升了性能。

在Taro小程序框架里面更新数据时调用的 setState 为异步方法,自动对同一个事件循环多次setState调用,然后进行合并处理,还会对数据进行diff优化,自动剔除那些未改变的数据。

以上就是成都小程序小编和大家分享的微信小程序的setData!如果您有其他manbetx3.0建设、小程序、app问题可以随时和我们联系,联系电话:18180487356。



Recommendation

推荐文章

浅谈成都manbetx3.0建设公司搭建manbetx3.0的费用情况是怎么样呢?

公司manbetx3.0建设具体怎么做才能有实际网络营销效果

关于公司manbetx3.0建设新manbetx3.0如何有效推广获取流量

祝贺我司第二次签约迈普通信信息化平台设计

咨询热线:18180487356
微信客服咨询