vue生命週期函數、react生命週期函數、微信小程式生命週期函數、uni-app生命週期函數,簡介及圖示

2020-10-27 11:00:35

vue生命週期函數

  1. beforeCreate (建立前)
  2. created (建立後)
  3. beforeMount (掛載前)
  4. mounted (掛載後)
  5. beforeUpdate (資料更新前)
  6. updated (資料更新後)
  7. beforeDestroy (銷燬前)
  8. destroyed (銷燬後)

詳情傳送門

react生命週期函數

初始化

1.getDefaultProps()

  • getDefaultProps這種定義方式是用在你定義元件用的是React.createClass方式的
    如果使用的是es6的語法,例如用的是class 元件名 extends React.Component的話,就不要用
    getDefaultProps這種方式去定義props了,而是應該用 static propTypes ={}來定義,這樣就不會有警了

getInitialState()

  • 與getDefaultProps的區別在於前者設定預設的 props,後者設定初始的state在使用es6的class語法時是沒有這個勾點函數的,可以直接在constructor中定義 this.state。此時可以存取this.props

componentWillMount()

  • 元件初始化時只呼叫,以後元件更新不呼叫,整個生命週期只呼叫一次,此時可以修改state。

render()

  • react最重要的步驟,建立虛擬dom,進行diff演演算法,更新dom樹都在此進行。此時就不能更改state了。

componentDidMount()

  • 元件渲染之後呼叫,只呼叫一次。可以在此請求資料

更新

componentWillReceiveProps(nextProps)

  • 元件初始化時不呼叫,元件接受新的props時呼叫。

shouldComponentUpdate(nextProps, nextState)

  • react效能優化非常重要的一環。元件接受新的state或者props時呼叫,我們可以設定在此對比前後兩個props和state是否相同,如果相同則返回false阻止更新,因為相同的屬性狀態一定會生成相同的dom樹,這樣就不需要創造新的dom樹和舊的dom樹進行diff演演算法對比,節省大量效能,尤其是在dom結構複雜的時候

componentWillUpdata(nextProps, nextState)

  • 元件初始化時不呼叫,只有在元件將要更新時才呼叫,此時可以修改state

render()

  • 元件渲染

componentDidUpdate()

  • 元件初始化時不呼叫,元件更新完成後呼叫,此時可以獲取dom節點。

解除安裝

componentWillUnmount()

  • 元件將要解除安裝時呼叫,一些事件監聽和定時器需要在此時清除。

詳情傳送門

微信小程式生命週期函數

頁面生命週期

詳情傳送門

  1. onLoad (監聽頁面載入)
  2. onReady (監聽頁面初次渲染完成)
  3. onShow (監聽頁面顯示)
  4. onhide (監聽頁面隱藏)
  5. onUnload (監聽頁面解除安裝)
  6. onPullDownRefresh (監聽使用者下拉動作)
  7. onReachBottom (頁面上拉觸底事件的處理常式)
  8. onShareAppMessage (使用者點選右上角分享)
  9. onPageScroll (頁面捲動觸發事件的處理常式)
  10. onResize (頁面尺寸改變時觸發,詳見 響應顯示區域變化)
  11. onTabItemTap (當前是 tab 頁時,點選 tab 時觸發)

應用生命週期函數

應用生命週期函數傳送門

  1. onLaunch (監聽小程式初始化)
  2. onShow (監聽小程式顯示)
  3. onHide (監聽小程式隱藏)
  4. onError (錯誤監聽函數)
  5. onPageNotFound (頁面不存在監聽函數)
  6. onUnhandledRejection ()

元件生命週期函數

元件生命週期函數傳送門

  1. created (在元件範例剛剛被建立時執行)
  2. attached (在元件範例進入頁面節點樹時執行)
  3. ready (在元件在檢視層佈局完成後執行)
  4. moved (在元件範例被移動到節點樹另一個位置時執行)
  5. detached (在元件範例被從頁面節點樹移除時執行)
  6. error (每當元件方法丟擲錯誤時執行)

元件所在頁面的生命週期

  1. show (元件所在的頁面被展示時執行)
  2. hide (元件所在的頁面被隱藏時執行)
  3. resize (元件所在的頁面尺寸變化時執行)

uni-app 生命週期函數

應用生命週期

  1. onLaunch (當uni-app 初始化完成時觸發(全域性只觸發一次))
  2. onShow (當 uni-app 啟動,或從後臺進入前臺顯示)
  3. onHide (當 uni-app 從前臺進入後臺)
  4. onError (報錯是觸發)
  5. onUniNViewMessage (對 nvue 頁面傳送的資料進行監聽)
  6. onUnhandledRejection (對未處理的 Promise 拒絕事件監聽函數(2.8.1+))
  7. onPageNotFound (頁面不存在監聽函數)
  8. onThemeChange (監聽系統主題變化)

頁面生命週期

函數名說明
onLoad監聽頁面載入,其引數為上個頁面傳遞的資料,引數型別為Object(用於頁面傳參)
onShow監聽頁面顯示。頁面每次出現在螢幕上都觸發,包括從下級頁面點返回露出當前頁面
onReady監聽頁面初次渲染完成。注意如果渲染速度快,會在頁面進入動畫完成前觸發
onHide監聽頁面隱藏
onUnload監聽頁面解除安裝
onResize監聽視窗尺寸變化
onPullDownRefresh監聽使用者下拉動作,一般用於下拉重新整理
onReachBottom頁面上拉觸底事件的處理常式
onTabItemTap點選 tab 時觸發,引數為Object
onShareAppMessage使用者點選右上角分享
onPageScroll監聽頁面捲動,引數為Object
onNavigationBarButtonTap監聽原生標題列按鈕點選事件,引數為Object
onBackPress監聽頁面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示來源是左上角返回按鈕或 android 返回鍵;navigateBack表示來源是 uni.navigateBack
onNavigationBarSearchInputChanged監聽原生標題列搜尋輸入框輸入內容變化事件
onNavigationBarSearchInputConfirmed監聽原生標題列搜尋輸入框搜尋事件,使用者點選軟鍵盤上的「搜尋」按鈕時觸發。
onNavigationBarSearchInputClicked監聽原生標題列搜尋輸入框點選事件
onShareTimeline監聽使用者點選右上角轉發到朋友圈
onAddToFavorites監聽使用者點選右上角收藏

詳情傳送門