react生命周期

react兩種組件定義方式
一種class定義,利用ES6語法


class定義方式

另一種function定義

function定義

他兩個什么卻別呢
class有局部生命周期以及this指向問題
而function是在16.8版本Hooks才加入了useEffect和useState模擬生命周期和局部狀態
生命周期圖.png

我就說下經常用的時候要注意的
分為三個階段
創建階段
更新階段
銷毀階段
在更新階段不能調用this.setstate,因為我們每次改變,render都會重新執行,會造成死循環。


componentWillMount (掛載完成前)
render (渲染)
componentWillMount (掛載完成后)


componentWillReceiveProps (組件接收到屬性時觸發)
shouldComponentUpdate (只有true/false來控制組件是否需要更新)一般我們通過該函數來優化性能
componentWillUpdate (組件即將被更新時觸發)
render (渲染)
componentDidUpdate (組件被更新完成后觸發,頁面中產生了新的DOM的元素,可以進行DOM操作)


componentWillUnmount (組件被銷毀時觸發。這里我們可以進行一些清理操作,例如清理定時器,取消Redux的訂閱事件等等)

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

推薦閱讀更多精彩內容

  • 組件的生命周期 React中組件也有生命周期,也就是說也有很多鉤子函數供我們使用, 組件的生命周期,我們會分為四個...
    解勾股閱讀 762評論 0 0
  • tips:很久沒在簡書更新文章了,歡迎大家逛逛我在github的博客點擊查看 。 React v16.0前的生命周...
    aermin閱讀 218,666評論 13 169
  • 組件的生命周期方法分以下三個階段。 Mounting當創建組件的實例并將其插入到DOM中時,將調用這些方法:con...
    _八神光_閱讀 1,119評論 0 0
  • 參考鏈接1.生命周期參考鏈接12.生命周期參考鏈接2 組件繼承了react Component等相關基類,也就是繼...
    嘻小佳閱讀 457評論 0 0
  • 黑,看不到邊際的黑;靜,似乎連自己的心跳聲都能聽得一清二楚……隨之而來的是那說不清也道不明的恐懼感…… 忽然,咔的...
    shiningwang閱讀 274評論 0 3