[TOC]
# 生命周期
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html
1. `componentWillMount`
在微信小程序中这一生命周期方法对应页面的`onLoad`或 入口文件app中的 `onLaunch`
2. `componentDidMount`
在微信小程序中这一生命周期方法对应页面的 `onReady` 或入口文件app中的 `onLaunch`，在 `componentWillMount`后执行
3. `componentDidShow`
在微信小程序中这一生命周期方法对应 `onShow`。小程序启动，或从后台进入前台显示时触发。
4. `componentDidHide`
在微信小程序中这一生命周期方法对应 `onHide`
5. `componentDidCatchError`
错误监听函数，在微信小程序中这一生命周期方法对应 `onError`
6. `componentDidNotFound`
页面不存在监听函数，在微信小程序中这一生命周期方法对应 `onPageNotFound`
7. `shouldComponentUpdate`
页面是否需要更新
8. `componentWillUpdate`
页面即将更新
9. `componentDidUpdate`
页面更新完毕
10. `componentWillUnmount`
https://segmentfault.com/q/1010000011961146/
页面退出，在微信小程序中这一生命周期方法对应 `onUnload`
```js
// Components
interface ComponentLifecycle<P, S> {
componentWillMount?(): void;
componentDidMount?(): void;
componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean;
componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<S>, prevContext: any): void;
componentWillUnmount?(): void;
componentDidShow?(): void;
componentDidHide?(): void;
componentDidCatchError?(err: string): void;
componentDidNotFound?(obj: PageNotFoundObject): void;
}
```
## 专属的方法成员
在小程序中 ，页面还有一些专属的方法成员，如下：
1. `onPullDownRefresh`：页面相关事件处理函数--监听用户下拉动作
2. `onReachBottom`：页面上拉触底事件的处理函数
3. `onShareAppMessage`：用户点击右上角转发
4. `onPageScroll`：页面滚动触发事件的处理函数
5. `onTabItemTap`：当前是 tab 页时，点击 tab 时触发
6. `componentWillPreload`：预加载，只在微信小程序中可用
## 微信小程序转 Taro
`import withWeapp from '@tarojs/with-weapp'`
Taro 会将原始文件的生命周期钩子函数**转换为 Taro 的生命周期**，完整对应关系如下：
| Page.onLoad | componentWillMount |
| --- | --- |
| onShow | componentDidShow |
| onHide | componentDidHide |
| onReady | componentDidMount |
| onUnload | componentWillUnmount |
| onError | componentCatchError |
| App.onLaunch | componentWillMount |
| **Component.created** | componentWillMount |
| attached | componentDidMount |
| ready | componentDidMount |
| detached | componentWillUnmount |
| moved | 保留 |
## process.env.TARO_ENV
使用 `process.env.TARO_ENV` 可以帮助我们判断当前的编译环境，从而做一些特殊处理，目前它的取值有 `weapp` 、`swan` 、 `alipay` 、 `h5` 、 `rn` 五个。可以通过这个变量来书写对应一些不同环境下的代码，在编译时会将不属于当前编译类型的代码去掉，只保留当前编译类型下的代码，从而达到兼容的目的。例如想在微信小程序和 H5 端分别引用不同资源：
```
if (process.env.TARO_ENV === 'weapp') {
require('path/to/weapp/name')
}
else if (process.env.TARO_ENV === 'h5') {
require('path/to/h5/name')
}
```
我们知道了这个变量的用法后，就可以进行一些多端兼容了，下面举两个例子来详细阐述
# 参考
[Taro深度开发实践](https://aotu.io/notes/2018/11/30/taro_practice/index.html)
