react生命周期

每次實例化組件的時候都會經歷一下幾個過程;

(1)getDefaultProps ?此方法用于為實例設置默認的props值,此方法只調用一次,若想在渲染前改變props值 則在此方法中修改;

(2)getInitialState 此方法用來初始化狀態值 State;react是不知能用this.state.XXX = 神馬 ;修改狀態值要用setState({XXX:xxx})

(3)componentWillMount ?在渲染前調用一次,是渲染前改變狀態值的最后一次機會

(4)render ?創建一個虛擬DOM ,只能通過this.props和this.state訪問數據,可以返回空,false,或者JSX創建的組件,只能返回一個頂級組件,不能在中間進行DOM操作!!! ?每一次state和props改變都會從新調用render方法 即會重新渲染。

(5)componentDidMount ?在渲染后調用一次,若想與JQ 或者操作DOM對象,寫在里面。

組件存在期間,可以通過事件改變state和props,此時會調用一下的函數:

(1)componentWillReceiveProps 當props改變時,會調用這個函數,從此獲得更新state的機會。

(2)componentWillUpdate ?在收到新的props或者state進行渲染之前使用該方法

(3)componentDidUpdate 在收到新的props或者state后 ?渲染完成之后使用改方法

組件使命完成后,(如路由跳轉新頁面,關閉頁面等),進入組件清理期

componentWillUnmount 在組件銷毀前進行一些清理工作,如變量從新初始化,清空定時器等。 ?

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 組件的生命周期方法分以下三個階段。 Mounting當創建組件的實例并將其插入到DOM中時,將調用這些方法:con...
    _八神光_閱讀 1,109評論 0 0
  • 又是一個老生常談的內容,從ES6起已經開始使用class的方式去創建組件,這種創建方式上的變化也帶來了寫法和方法上...
    殷灬商閱讀 465評論 0 1
  • 在組件的整個生命周期中,隨著該組件的props或者state發生改變,它的DOM表現也將有相應的改變,一個組件就是...
    web蝸牛閱讀 573評論 0 1
  • 上面的這幅圖已經很好地詮釋一個react組件的生命周期,所以認真看圖!認真看圖!認真看圖! 一、getDefaul...
    好大一顆星閱讀 303評論 0 2
  • 有關Day 6 文章的疑問請發表在評論區。
    Freedom_Pursuer閱讀 174評論 0 2