ReactNative入門教程-組件生命週期函數

ReactNative生命週期

1.組件實例化階段

defaultProps:

設置組件的初始屬性值,比如設置默認Color,width等,可以在通過this.props獲取相應的值

constructor(props):

這裏通過this.props可以獲取defaultProps設置的默認屬性值,同時這裏用於初始化控件的可變化的變量,通過this.state設置變量的初始值,通過this.setState()函數修改變量的值,調用render()函數重新渲染頁面,得到新的頁面
image.png

componentWillMount:

組件將要被加載到視圖之前調用

render(): 第一次被調用,用於渲染頁面

componentDidMount:

在調用了render方法,組件加載完成並被成功渲染出來之後,所要執行的後續操作,一般都會在這個函數中進行,比如經常要面對的網絡請求等加載數據操作,因爲UI渲染是異步的,所以在這個函數裏面進行網絡請求,能夠避免出現UI錯誤。

2.組件運行時階段

組件的屬性prop和狀態state任何一個改變都可能會觸發render()函數渲染頁面

componentWillReceiveProps:

指父元素對組件的props進行了修改

shouldComponentUpdate

一般用於優化性能,通過業務邏輯判斷返回true或false,來決定頁面是否進行重新繪製,默認返回true,執行後面兩個周期函數

componentWillUpdate:

組件刷新前調用

componentDidUpdate:更新後

image.png

3.頁面卸載頁面:

componentWillUnmount

一般用於清理工作,比如移除事件監聽,取消定時器等
image.png

4.生命週期函數調用次數

image.png

特別提示:

更新state必須使用setState()函數,setState是一個異步的函數:setState(update,[callback])
setState()不是立刻更新組件。其可能是批處理或推遲更新。這使得在調用setState()後立刻讀取this.state的一個潛在陷阱。代替地,使用componentDidUpdate或一個setState回調(setState(updater, callback)),當中的每個方法都會保證在更新被應用之後觸發。

參考文檔:https://react.docschina.org/d...

個人網站:https://wayne214.github.io

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章