入口文件的生命周期:
入口文件继承自 Component 组件基类,它同样拥有组件生命周期,但因为入口文件的特殊性,他的生命周期并不完整,如下
生命周期方法 | 作用 | 说明 |
---|---|---|
componentWillMount | 程序被载入 | 在微信小程序中这一生命周期方法对应 app 的 onLaunch |
componentDidMount | 程序被载入 | 在微信小程序中这一生命周期方法对应 app 的 onLaunch,在 componentWillMount 后执行 |
componentDidShow | 程序展示出来 | 在微信小程序中这一生命周期方法对应 onShow,在 H5 中同样实现 |
componentDidHide | 程序被隐藏 | 在微信小程序中这一生命周期方法对应 onHide,在 H5 中同样实现 |
componentDidCatchError | 错误监听函数 | 在微信小程序中这一生命周期方法对应 onError |
componentDidNotFound | 页面不存在监听函数 | 在微信小程序中这一生命周期方法对应 onPageNotFound |
微信小程序中 onLaunch 通常带有一个参数 options,在 Taro 中你可以在所有生命周期和普通事件方法中通过 this.$router.params 访问到,在其他端也适用
页面 JS 的生命周期:
页面 JS 也继承自 Component 组件基类,所以页面同样拥有生命周期,页面的生命周期方法如下:
生命周期方法 | 作用 | 说明 |
---|---|---|
componentWillMount | 页面被载入 | 在微信小程序中这一生命周期方法对应 onLoad |
componentDidMount | 页面渲染完成 | 在微信小程序中这一生命周期方法对应 onReady |
shouldComponentUpdate | 页面是否需要更新 | |
componentWillUpdate | 页面即将更新 | |
componentDidUpdate | 页面更新完毕 | |
componentWillUnmount | 页面退出 | 在微信小程序中这一生命周期方法对应 onUnload |
componentDidShow | 页面展示出来 | 在微信小程序中这一生命周期方法对应 onShow,在 H5 中同样实现 |
componentDidHide | 页面被隐藏 | 在微信小程序中这一生命周期方法对应 onHide,在 H5 中同样实现 |
微信小程序中 onLoad 通常带有一个参数 options,在 Taro 中你可以在所有生命周期和普通事件方法中通过 this.$router.params 访问到,在其他端也适用
在小程序中,页面还有在一些专属的方法成员,如下:
方法 | 作用 |
---|---|
onPullDownRefresh | 页面相关事件处理函数--监听用户下拉动作 |
onReachBottom | 页面上拉触底事件的处理函数 |
onShareAppMessage | 用户点击右上角转发 |
onPageScroll | 页面滚动触发事件的处理函数 |
onTabItemTap | 当前是 tab 页时,点击 tab 时触发 |
componentWillPreload | 预加载,只在微信小程序中可用 |
以上成员方法在 Taro 的页面中同样可以使用,书写同名方法即可,不过需要注意的,目前暂时只有微信小程序端支持这些方法,编译到 H5 端后这些方法均会失效。
组件
Taro 的组件同样是继承自 Component 组件基类,与页面类似,组件也必须包含一个 render 函数,返回 JSX 代码。
与页面相比,组件没有自己的 config,同时组件的生命周期相比页面来说多了一个 componentWillReceiveProps ,表示当父组件(或页面)发生更新,带动子组件进行更新时调用的方法。