Taro代碼的編寫是繼承于react的風格的,所以在生命周期鉤子上Taro是繼承了react的生命周期鉤子函數的,在加上需要兼容各種小程序平臺,所以應該還有小程序特點的生命周期鉤子函數,理解的時候分為兩類:react類、小程序類
react類:
我們按照執(zhí)行順序,大體如下:
constructor: 這是組件類的構造方法,在內部可以使用super返回所有的屬性給當前組件,也可以在其中定義當前組件state的初始值。
嚴格來說,這個函數不算是一個鉤子函數,只是一個構造器,只是為了方便理解所以將它列在這里
componentWillMount: 組件渲染前最后執(zhí)行的方法
render: 組件渲染的方法,通常在組件中,該方法會返回一個jsx的模板字符串
componentDidMount: 組件渲染完成后最先執(zhí)行的方法,我們通常在這個方法中進行一些狀態(tài)的設置,比如:this.setState()
setState方法是一個異步的方法,如果我們需要在更新后就獲取state的最新狀態(tài)的話我們需要在setState的回調函數中獲取,即:this.setState({變更狀態(tài)}, () => {在這里獲取最新的狀態(tài)})
到這里的話,一個組件的基本渲染流程就已經結束了,接下來就是組件的更新了。
shouldComponentUpdate: 當state被修改時觸發(fā),接收兩個參數,nextProps,nextState,變化后的屬性和狀態(tài),該方法默認返回true,默認執(zhí)行componentWillUpdate方法,如重寫為返回false則不觸發(fā)該方法,我們可以利用換個函數來提高render函數的性能
componentWillUpdate: 組件即將更新前最后執(zhí)行的函數,state將要改變時觸發(fā)
getSnapshotBeforeUpdate: 最新的渲染輸出提交給DOM前執(zhí)行的鉤子函數,可以獲取prop和state改變前的值,以返回值的形式將值作為參數傳遞給componentDidUpdate
componentDidUpdate:組件state更新完成后最先執(zhí)行的函數
到這里的話組件state更新流程就結束了,這時又會觸犯組件的渲染流程
componentWillReceiveProps: 當父組件中傳遞過來的屬性值發(fā)生變更后觸發(fā),在組件初始化的時候不會觸發(fā),接收一個參數,變更后的屬性對象
這個方法中無法初始化定義組件的屬性值,我們可以通過state defaultProps = {}這樣的方式,來定義屬性的初始值
componentWillUnmount:組件被銷毀前執(zhí)行的鉤子函數,在組件被銷毀前最后觸發(fā)
小程序類:
小程序類的就比較簡單了,為了適配小程序的特點,只增加了兩個鉤子函數
componentDidShow:頁面顯示時觸發(fā)
componentDidHide:頁面隱藏時觸發(fā)