[转]深入理解小程序中的数据——小程序探索

2019-03-20  本文已影响0人  kangaroo_v

研究背景

上一篇文章了解了小程序的生命周期，接下来研究一下数据通信，我觉得清楚了生命周期和数据通信，就能对整个程序有一定的把控能力，定位问题和解决问题的能力将大幅提高
我刚开始撸小程序的时候，觉得看看文档就可以了，导致写了很多垃圾代码坑人坑己，相信大部分初学者也不会去仔细研究文档，更别说啰里啰嗦的指南了，在通读小程序官方指南后，我觉得很有必要为初学者总结一番，教学相长

天生的延时

如何控制合适的时机更新UI

小程序作为MVVM框架中的一员，数据驱动是核心，得数据者得天下

在这之前，还是上几张官方的图，有个概念便于后续理解

1.png 2.png

明确几点概念

一、小程序中数据的作用域

1、全局数据

// app.js
App({
  globalData: 'I am global data' // 全局共享数据
})
// 其他页面脚本other.js
var appInstance = getApp()
console.log(appInstance.globalData) // 输出: I am global data

2、页面共享数据

console.log('加载 page.js')
var count = 0
Page({
  onLoad: function() {
    count += 1
    console.log('第 ' + count + ' 次启动这个页面')
  }
})

3、Page实例中的数据

Page({
  data: { text: "我用来改变界面显示" },
  onLoad: function(options) { },
  onReady: function() { },
  onShow: function() { },
  onHide: function() { },
  onUnload: function() { },
  text: "我不显示在页面上",
  myData:{
      a: '我也不显示在页面上',
      b: true
  }
})

4、自定义组件中的数据

二、合理操作数据，提升性能

数据通信

3.png

提升性能须遵循的原则

调用setData执行重渲染时，视图层将data和setData数据套用在WXML片段上，得到一个新节点树，然后与当前节点树进行比较，这样可以得到哪些节点的哪些属性需要更新、哪些节点需要添加或移除，最后，将setData数据合并到data中，并用新节点树替换旧节点树，用于下一次重渲染。

4.png

可以看出逻辑层setData发送数据给更新视图时，需要两个线程的一些通信消耗，且不会diff数据，只会一股脑传过去，生成新节点树，每一次通信都需要经过传输、生成、比较、合并

为了提升数据更新的性能，最好遵循以下原则：

其他优化策略：

注意：

三、组件间的数据通信

组件区分业务组件和纯组件

四、缓存数据

本地数据缓存是小程序存储在当前设备上硬盘上的数据，小程序宿主环境从不同小程序和不同用户两个维度来隔离缓存空间，每个小程序的缓存空间上限为10MB

缓存充当全局数据

利用本地缓存提前渲染界面

Page({
  onLoad: function() {
    var that = this
    var list =wx.getStorageSync("list")
    if (list) { // 本地如果有缓存列表，提前渲染
      that.setData({
        list: list
      })
    }
    wx.request({
      url: 'https://test.com/getproductlist',
      success: function (res) {
        if (res.statusCode === 200) {
          list = res.data.list
          that.setData({ // 再次渲染列表
            list: list
          })
          wx.setStorageSync("list",list) // 覆盖缓存数据
        }
      }
    })
  }
})

五、扩展-状态管理westore

引用
众所周知，小程序通过页面或组件各自的 setData 再加上各种父子、祖孙、姐弟、姑姑与堂兄等等组件间的通讯会把程序搞成一团浆糊，如果再加上跨页面之间的组件通讯，会让程序非常难维护和调试。虽然市面上出现了许多技术栈编译转小程序的技术，但是我觉没有戳中小程序的痛点。小程序不管从组件化、开发、调试、发布、灰度、回滚、上报、统计、监控和最近的云能力都非常完善，小程序的工程化简直就是前端的典范。而开发者工具也在持续更新，可以想象的未来，组件布局的话未必需要写代码了。而且据统计，开发小程序使用最多的技术栈是使用小程序本身的开发工具和语法，所以最大的痛点只剩下状态管理和跨页通讯

5.png

Westore项目地址

上一篇 下一篇

猜你喜欢

热点阅读