Taro入門(三)——生命周期鉤子函數

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ā)

?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 作為一個合格的開發(fā)者,不要只滿足于編寫了可以運行的代碼。而要了解代碼背后的工作原理;不要只滿足于自己的程序...
    六個周閱讀 8,679評論 1 33
  • React 生命周期 React生命周期主要包括4個階段: 初始化階段 實例化階段 更新階段 銷毀階段 1 設置組...
    Android_馮星閱讀 740評論 0 1
  • 40、React 什么是React?React 是一個用于構建用戶界面的框架(采用的是MVC模式):集中處理VIE...
    萌妹撒閱讀 1,191評論 0 1
  • HTML模版 之后出現的React代碼嵌套入模版中。 1. Hello world 這段代碼將一個一級標題插入到指...
    ryanho84閱讀 6,447評論 0 9
  • 前言 組件中的state具體是什么?怎么更改state的數據? setState函數分別接收對象以及函數有什么區(qū)別...
    itclanCoder閱讀 1,023評論 0 0

友情鏈接更多精彩內容