请求处理中...
请求处理中...
由于微信小程序诞生于vue.js和react.js之后，所以他们在当初设计代码架构的时候也是借鉴了vue.js和react.js的想法，也遵循的组件化的方式，延用了setData的机制去把视图层和逻辑层做一个“中转站”两边连接起来。但是这种机制一直存在性能上的问题，微信小程序也不例外。先看一张图:
微信小程序的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
3this.setData({ one: '1' })
this.setData({ two: '2'})
this.setData({ three: '3' })
修改成：
this.setData({
one: '1',
two: '2',
three: '3',
})
这样就减少了拼接js脚本的次数，从而提升了性能。
在Taro小程序框架里面更新数据时调用的 setState 为异步方法，自动对同一个事件循环多次setState调用，然后进行合并处理，还会对数据进行diff优化，自动剔除那些未改变的数据。
今天小编就为大家分享到这里啦，如果觉得自己还想了解更多，欢迎大家上我们一品威客的网站，里面有更多丰富的相关内容等着大家去挖掘哦!如果你需要app开发，网络推广，设计，文案写作，营销策划等服务，欢迎到一品威客网发布法律服务相关任务，让广大的服务商为您解决难题
交易额: 3412.16万元
企业 |山东省 |临沂市 |临沂市
交易额: 1082.75万元
企业 |山东省 |青岛市 |城阳区
交易额: 427.32万元
企业 |山东省 |济南市 |历下区
交易额: 170.44万元
企业 |浙江省 |温州市 |瓯海区
成为一品威客服务商，百万订单等您来有奖注册中
价格是多少？怎样找到合适的人才？
￥20000 已有3人投标
￥3000 已有3人投标
￥5000 已有1人投标
￥10000 已有25人投标
￥50000 已有14人投标
￥5000 已有21人投标
￥8000 已有1人投标
￥1000 已有0人投标
企业QQ
智能客服
