生命周期差異 · 各種小程序

[TOC] # 頁面結構使用Taro開發，了解各個小程序渲染方式： index-page: ``` <View> 我是頁面 <Parent> <Child></Child> <Child2></Child2> </Parent> </View> ``` parent: ``` <View className='Assistant'> 我是父組件 <slot /> <Child2 /> </View> ``` child: ``` <View className='Assistant'> 我是子組件 <Demo2 /> <Demo /> </View> ``` child2: ``` <View className='Assistant'> 我是子組件2 <Demo2 /> </View> ``` Demo: ``` <View className='visitList'> Demo 組件 </View> ``` Demo2: ``` <View className='visitList'> Demo2 組件 </View> ``` # 渲染結果： ## 微信生命周期方式： `yarn dev:weapp` ``` index.js:52 page componentWillMount index.js:52 Parent componentWillMount index.js:52 Child2 componentWillMount demo.js:52 Demo2 componentWillMount index.js:52 Child componentWillMount demo.js:52 Demo2 componentWillMount demo.js:52 Demo componentWillMount index.js:52 Child2 componentWillMount demo.js:52 Demo2 componentWillMount index.js:57 Parent componentDidShow index.js:57 page componentDidShow index.js:62 page componentDidMount index.js:62 Parent componentDidMount index.js:57 Child componentDidMount 2 index.js:57 Child2 componentDidMount 2 demo.js:57 Demo2 componentDidMount demo.js:57 Demo componentDidMount demo.js:57 Demo2 componentDidMount ``` ### 小結：微信小程序遇到就先進入創建：首先創建Page頁面 -> 創建頁面父組件 -> (**查找該組件內部是否有組件**---->去創建) -> 創建頁面子組件-> 頁面掛載完成ready -> 父組件掛載完成 ->子組件掛載完成。父級組件掛載完成時，內部組件(包括內部的內部...)已經完成創建。 ## 百度 swan 詭異的生命周期（百度正在填坑）： `yarn dev:swan` ``` index.js:90 page componentWillMount index.js:95 page componentDidShow index.js:100 page componentDidMount index.js:90 Parent componentWillMount index.js:100 Parent componentDidMount index.js:90 Child componentWillMount 2 index.js:90 Child2 componentWillMount index.js:95 Child componentDidMount 2 index.js:95 Child2 componentDidMount demo.js:90 Demo2 componentWillMount demo.js:90 Demo componentWillMount demo.js:95 Demo2 componentDidMount demo.js:95 Demo componentDidMount demo.js:90 Demo2 componentWillMount demo.js:95 Demo2 componentDidMount demo.js:90 Demo2 componentWillMount demo.js:95 Demo2 componentDidMount ``` ### 小結：百度首先 **按順序渲染**：首先 Page 頁面（全部渲染完成） -> 頁面中的所有組件（全部渲染完成） -> 組件中的所含子組件（全部渲染完成） |--（遞歸查找組件中的子組件，直到渲染完成）--- | 導致的問題：父組件已經渲染完成了，子組件都還沒有創建。。。。。 ## 字節跳動小程序： `yarn dev:tt` ``` index.js:52 page componentWillMount index.js:57 page componentDidShow index.js:52 Parent componentWillMount index.js:52 Child componentWillMount index.js:52 Child2 componentWillMount index.js:62 page componentDidMount index.js:52 Child2 componentWillMount index.js:62 Parent componentDidMount demo.js:52 Demo2 componentWillMount demo.js:52 Demo componentWillMount index.js:57 Child componentDidMount demo.js:52 Demo2 componentWillMount index.js:57 Child2 componentDidMount demo.js:52 Demo2 componentWillMount index.js:57 Child2 componentDidMount demo.js:57 Demo2 componentDidMount demo.js:57 Demo componentDidMount 2 demo.js:57 Demo2 componentDidMount ``` ### 小結 ## 支付寶小程序： `yarn dev:alipay` // ap/SDKVersion: 1.14.2 ``` index.js:52 page componentWillMount index.js:52 Parent componentWillMount index.js:62 page componentDidMount index.js:57 page componentDidShow index.js:52 Child componentWillMount 2 index.js:52 Child2 componentWillMount index.js:62 Parent componentDidMount index.js:57 Parent componentDidShow demo.js:52 Demo2 componentWillMount demo.js:52 Demo componentWillMount 2 demo.js:52 Demo2 componentWillMount index.js:57 Child componentDidMount 2 index.js:57 Child2 componentDidMount demo.js:57 Demo2 componentDidMount demo.js:57 Demo componentDidMount 2 demo.js:57 Demo2 componentDidMount ``` ### 小結支付寶，頁面先渲染完成 -> 頁面組件創建 -> **直接子組件**創建 - 父組件掛載完成 -> 內部子組件的所含組件被創建 ->內部子組件的父級組件掛載完成 ----如此循環直到結束--- 父組件掛載完成時，**直接子組件**已被創建。 [啟用 component2 編譯](https://docs.alipay.com/mini/framework/custom-component-overview) ： ``` index.js:52 page componentWillMount index.js:52 Parent componentWillMount index.js:52 Child componentWillMount 2 index.js:52 Child2 componentWillMount demo.js:52 Demo2 componentWillMount demo.js:52 Demo componentWillMount 2 demo.js:52 Demo2 componentWillMount index.js:62 page componentDidMount index.js:57 page componentDidShow ``` ### 小結 ---`component2 編譯` 就很詭異了---，可能 Taro 對這一新特性還未支持。 # 總結 1. 組件中不應該使用 `DidShow` （該生命周期本來也就是為頁面準備的）。 2. 真的不知道以后著生命周期會不會變，但是總結出相同點，避開坑。還是有幫助的。大體的方向應該不會變。 # 解決辦法 ## [1.3.0-bate.5 百度小程序組件ref 報錯](https://github.com/NervJS/taro/issues/3255) 答復：百度小程序先不要用 ref，百度那邊正在改生命周期觸發順序，他們說還有1、2個月。