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調用之前。

作用:渲染掛載組件。

觸發:1、初始化加載頁面,2、狀態機改變setState,3、接收新的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會比父組件先調用,從而會引起父子組件傳參錯誤。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM