微信小程序开发?系列文章六生命周期和路由

Posted 2020-08-26 飞跃的技术博客

这篇文章理论的知识比较多一些，都是个人观点，描述有失妥当的地方希望读者指出。

• 【微信小程序开发•系列文章一】入门
• 【微信小程序开发•系列文章二】视图层
• 【微信小程序开发•系列文章三】数据层
• 【微信小程序开发•系列文章四】模块化
• 【微信小程序开发•系列文章五】主界面
• 【微信小程序开发•系列文章六】生命周期和路由

整个微信小程序从打开到关闭，整个过程可以分为很多阶段或者说状态，这一整段的过程，我们称之为小程序的生命周期。而周期中的每种不同的状态，到另一个状态的过度和转化，是需要一个触发机制的，这种机制我们称之为路由。

一、生命周期

先来分析一下小程序官网给的这张图，它指的是Page的整个生命周期。要理解它，我们还是先回顾一下React.js的渲染机制。

react里面有一个virtual DOM的概念，它实际上是把界面中的每个元素，用js实现的树形数据结构对应起来，结构里记录了节点的所有信息。我们可以把这个virtual DOM看成一个独立的线程（js里没有真正的多线程），我们暂时称它为view线程，它的工作就是负责界面的渲染。当virtual DOM上的数据发生变化的时候，界面的相应的部分就会跟着更新，更新机制被称为DOM diff，这里有篇文章详细地分析了这种更新机制：http://calendar.perfplanet.com/2013/diff/，不过可惜的是它要FQ才能看，后面发现segmentfault上有人把它转成中文描述了：https://segmentfault.com/a/1190000000606216，有兴趣的读者可以阅读一下这篇文章。

这里简单地介绍下：React.createClass创建的类都有一个render方法，它返回的不是真正的html代码，而是我们上面讲到的virtual DOM，每一次渲染会直接按内部转换关系画到界面上，这个流程跟传统的网页渲染差不多。但是当要修改界面上某些元素的时候，react的性能才会真正的突显出来，它会去调用setState方法，这时有内置的算法会去比对这次操作引起的变化前后，最小的差异是什么，然后把这个最小的差异更新到界面上。DOM diff的这篇文章讲到，传统的两个树形结构要分析出差异，复杂度至少要O(n^3)，但react巧妙地把这个复杂度做到了接近O(n)，优化了非常多，这也是它的核心算法。
这整个东东，就是我们上面讲到的“view线程”，它负责拿到数据后去做界面的更新，不过这个“线程”不处理主业务逻辑，只负责view层，用react的时候，它的内部框架已经帮我们做好了，所以react被称为是一个view层的框架。

那么我们还需要一个“线程”来处理主逻辑，这些就是我们自己要写的主要的代码。微信小程序跟react一样，也帮我们做好了这种渲染的算法。上图中，左侧绿色的部分，可以理解为上文中的“view线程”，应用启动时，他会用Page里的data初始值去Init出一个初始的virtual DOM，当setData被调用的时候，MINA就会触发我们上面讨论的DOM diff的过程，自动去更新界面。这也是为什么我们直接修改data无效的原因，一定要调用setData界面才会有变化。
上图右侧的“AppService线程”，其实就是我们说的主业务逻辑“线程”，我们就是跟它打交道。

下面简述一下整个生命周期的过程：
“view线程”和“AppService线程”在Page({… })被执行时差不多同时启动（实际上，个人理解，后者应该要先一步启动，因为它要接收notify，纯属猜测）。前者init结束时，发送一个notify到后者。后者在create完成后，会同时触发Onload和Onshow回调（至于为什么要同时触发两个看起来差不多的状态，在下方会分析到），在这两个函数里面对page的data做一些修改（setData），然后挂起进入等待状态，等“view线程”init完，才会进行下面的流程，因为对用户来说这个应用的直接使用方式就是界面，背后逻辑用户不管，所以一定要等“view线程”准备好后，再做下面的事情才有意义。
如果Onload和Onshow有对data做修改，收到notify通知前也不会做什么动作，直到收到通知才会把变化发送给“view线程”，之后的流程里，setData就不用等通知了，因为这个通知只是为了让“AppService线程”知道“view线程”已经准备好了，进入可用状态了，后面就可以随意setData了，“view线程”随时都会做出响应，一发现数据变化就会重新render然后做DOM diff操作，去更新界面。

而当用户进入另一个页面时（wx.nativateTo）,onHide函数被触发，页面被切换到后台，可以看成是挂起状态，不会有什么动作。而当用户切换回来的时候（wx.navigateBack），onShow会被触发，但onLoad不会，onLoad只会在page初始化完成时触发一次，后面不会再进入了，所以对于只需要做一次的操作，千万不要写到onShow里面，如请求页面初始数据，要写到onLoad里。上面讲到“AppService线程”初始化的时候要同时触发onShow和onLoad，虽然字面上理解起来比较相似，但其实是不一样的过程，触发条件也是不一样的。

二、路由

路由的控制逻辑主要在WAService.js里，这个文件，当程序在运行时，调试工具里可以查看。可惜的是，这个文件是压缩过的，格式化之后，还是很难看懂主要的逻辑。不过上表微信官方给的也表述得比较明显。

大概按这表介绍下路由的几种情况。
（1）当程序打开的时候，第一个页面会被加载（第一个页面，指在app.json里的pages配置的第一项），先初始化，这时这个页面的onLoad和onShow会被调用。
（2）从第一个页面跳到其它页面（navigateTo），这时第一个页面的onHide会被调用，跳过去的其它页面onLoad和onShow会被调用。
（3）如果是redirectTo跳转，则第一个页面被触发的是onUnload，其它跟（2）一样
（4）页面返回时，前一个页面被onUnload卸掉，返回后的页面onShow被调用。从这可以看出，返回时，前一个页面被销毁了。
（5）tab的切换，就只有onShow和onHide，当然第一个出现页面还有一个onLoad。
这几个情况也比较直观。