入口文件的生命周期:
入口文件繼承自 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 ,表示當父組件(或頁面)發生更新,帶動子組件進行更新時調用的方法。