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