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

1.組件實例化階段

defaultProps:

設置組件的初始屬性值，好比設置默認Color,width等，能夠在經過this.props獲取相應的值

constructor(props):

這裏經過this.props能夠獲取defaultProps設置的默認屬性值，同時這裏用於初始化控件的可變化的變量，經過this.state設置變量的初始值，經過this.setState()函數修改變量的值，調用render()函數從新渲染頁面，獲得新的頁面

componentWillMount：

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

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

componentDidMount：

在調用了render方法，組件加載完成並被成功渲染出來以後，所要執行的後續操做，通常都會在這個函數中進行，好比常常要面對的網絡請求等加載數據操做，由於UI渲染是異步的，因此在這個函數裏面進行網絡請求，可以避免出現UI錯誤。

2.組件運行時階段

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

componentWillReceiveProps:

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

shouldComponentUpdate

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

componentWillUpdate:

組件刷新前調用

componentDidUpdate：更新後

3.頁面卸載頁面：

componentWillUnmount

通常用於清理工做，好比移除事件監聽，取消定時器等

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

特別提示：

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

參考文檔：https://react.docschina.org/docs/react-component.html

我的網站：https://wayne214.github.io