react 生命週期函數介紹

constructor()：構造函數

執行：組件加載錢最早調用一次，僅調用一次。

做用：定義狀態機變量。

注意：第一個語句必須爲super(), 不然會報錯：'this' is not allowed before super()

constructor(props) {  
    super(props);  
    this.state = {  
      content:null,  
    }  
}     

---

 

 componentWillMount()

執行：組件初始渲染(render()被調用前)前調用，僅調用一次。

做用：若是這個函數調用的setState改變了組件的某些狀態，react會等待setState完成後再渲染組件。

注意：子組件也有componentWillMount函數，在父組件的該函數調用後再調用。

 

---

 render()

執行：componentWillMount調用以後， componentDidMount調用以前。

做用：渲染掛載組件。

觸發：一、初始化加載頁面，二、狀態機改變setState，三、接收新的props（父組件更新）

注意：組件必要函數，不能在函數內使用setState改變狀態機。

 

---

  

componentDidMount()

時間：render以後被調用，僅調用一次。

做用：渲染掛載組件，能夠使用refs(react支持的一個特殊屬性，能夠將它加在render函數返回的組件元素上，起一個標記做用，方便定位。)

注意：子組件也有該函數，在父組件調用前調用；若是該函數內有setState改變狀態機，將會從新渲染組件，若是須要在頁面初始化以後才改變狀態機的，能夠將網絡請求放在該函數內。

 

---

  

componentWillReceiveProps(nextProps)

時間：組件渲染後，當組件接收新的nextProps時被調用。函數接收一個新的nextProps對象，nextProps是父組件傳給子組件的。父組件render以後就會被調用。

做用：渲染掛載組件，能夠使用refs(react支持的一個特殊屬性，能夠將它加在render函數返回的組件元素上，起一個標記做用，方便定位。)

注意：react初次渲染時不會被調用。

 

---

 

 shouldComponentUpdata(nextProps, nextState)

時間：組件執行render函數以後，接收新的props或state時被調用，即每次執行setState都會執行該函數，來判斷是否從新渲染組件，默認返回true，接收兩個參數。

做用：若是有些變化不須要執行渲染組件，可在該函數內阻止。

注意：不能在該函數內使用setState來改變狀態機，如須要，請在componentWillReciveProps中改變。

---

  

componentDidUpdata()

時間：組件從新渲染後調用，在初始化渲染的時候該方法不會被調用。

做用：使用該方法能夠在組件更新以後操做DOM元素。

 

---

  

componentWillUnmount()

時間：組件卸載以前調用。

做用：在該方法中執行必要的清理，好比無效的定時器後者在componentDidMount中建立的DOM元素。

---

  

注意

當一個頁面中存在父子組件的時候，要特別注意componentDidMount的使用，由於子組件的componentDidMount會比父組件先調用，從而會引發父子組件傳參錯誤。