【微信小程序開發•系列文章六】生命週期和路由

時間 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。這幾個狀況也比較直觀。