生命周期差异 · 各种小程序

[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个月。