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

时间 2019-12-08

原文原文链接

这篇文章理论的知识比较多一些，都是我的观点，描述有失稳当的地方但愿读者指出。html

整个微信小程序从打开到关闭，整个过程能够分为不少阶段或者说状态，这一整段的过程，咱们称之为小程序的生命周期。而周期中的每种不一样的状态，到另外一个状态的过分和转化，是须要一个触发机制的，这种机制咱们称之为路由。react

1、生命周期算法

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

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层的框架。segmentfault

那么咱们还须要一个“线程”来处理主逻辑，这些就是咱们本身要写的主要的代码。微信小程序跟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，虽然字面上理解起来比较类似，但实际上是不同的过程，触发条件也是不同的。数据结构

2、路由多线程

路由的控制逻辑主要在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。这几个状况也比较直观。