React生命週期鉤子

最近的工做都很忙，因此不多完整的時間能夠用來總結和回顧知識點，今天就趁着是週末，我準備在這裏複習和回顧一下React的基礎。工做中主要用的vue比較多，在工做中使用React也已是一年前了，當時用的螞蟻金服的antd框架，相比vue，我我的仍是比較喜歡寫React的，其實vue跟React之間除了寫法上的差別，也很是類似的，學會了其中一個，要學另外一個的話都是很容易的。

用過React的同窗都知道，React的特性之一就是組件化，組件都有一個生命週期，這個生命週期包括組件的實例化、更新與銷燬階段，在組件的不一樣生命週期鉤子函數裏咱們能夠對組件進行相應的操做，如更新或者銷燬等。說到React組件，它的寫法也有三種兩大類，一類是無狀態組件，也就是函數式組件，它們也存在實例化、更新、銷燬期，可是沒有對外暴露相應的生命週期鉤子，另外一類就是有狀態組件，這一類組件有兩種寫法，第一種寫法就是ES5的React.createClass，第二種寫法則是ES6的React.Component，可是在這篇博客裏咱們不討論React組件的寫法，要了解相關知識的同窗請自行百度或者查閱React官方文檔，這篇博客咱們主要討論一下有狀態組件的不一樣生命週期的鉤子函數。

關於React的生命週期，前面也說到了，主要有三個階段：實例化、更新和銷燬。

第一次被建立時，也就是實例化時，如下方法依次被調用：

一、getDefaultProps
二、getInitialState
三、componentWillMount
四、render
五、componentDidMount

當組件已經渲染好後，組件也就進入更新期，在更新期會執行如下函數：

一、componentWillReceiveProps
二、shouldComponentUpdate
三、componentWillUpdate
四、render
五、componentDidUpdate

最後，每當React使用完一個組件，這個組件必須從 DOM 中卸載後被銷燬，此時 componentWillUnmout 會被執行，完成全部的清理和銷燬工做，在 componentDidMount 中添加的任務都須要再該方法中撤銷，如建立的定時器或事件監聽器。

來源地址：https://www.f2ecoder.net/879.html