帶你讀懂React生命週期

React相似VueJs同樣具備本身的生命週期，它們的生命週期都會經歷三個階段：掛載、更新、卸載，而每個階段都有其對應的不一樣的鉤子函數，只有充分了解其生命週期，在進行編碼的過程當中才能在不一樣的鉤子函數中作咱們本身想作的事情

圖片來源：https://github.com/wojtekmaj/...
使用類組件而不是常規函數的一個優勢是可以使用特殊的React方法或鉤子來容許咱們更新UI和應用程序狀態。瞭解什麼時候使用每種方法對於按照咱們所但願的方式加載應用程序很是重要。
咱們將針對React生命週期的三個階段進行討論：

• 掛載時(Mounting)
• 更新時(Updating)
• 卸載時(UnMounting)

掛載時

當建立一個組建的時候，它會掛載到DOM上。

constructor()

• 當頁面加載的時候，最初也是惟一一次被調用
• 用於作一些初始化狀態的操做
• 惟一能夠修改state的地方(由於react通常想要修改state，通常會調用setState方法)

static getDerivedStateFromProps(nextProps, prevState)

• 當state須要從props初始化時使用
• 每次render或者rerender的時候都會調用
• 儘可能不要使用：維護二者一致性會增長複雜度
• 典型場景：表單控件獲取默認值

render()

• 這是類組件中惟一必需的方法
• 每次React更新並提交到DOM的時候調用
• 用於爲組件編寫JSX

componentDidMount()

• 在構造組件並將其添加到DOM上(渲染後)只執行一次
• 可用於獲取數據並在渲染完成後當即顯示
• 典型場景：獲取外部資源

Demo運行結果圖:

https://github.com/huangche00...

https://github.com/huangche00...

更新時

每當一個組件的state和props改變的時候，將在頁面上從新進行渲染

static getDerivedStateFromProps(nextProps, prevState)

• 每次頁面render以前調用，state已更新
• 典型場景：獲取render以前的DOM狀態
• 不多使用：將props複製到state

shouldComponentUpdate(nextProps, nextState)

• 返回一個布爾類型的值，默認返回true
• 在渲染(render)以前或組件接受到新的state和props的時候立刻執行
• 在每次從新渲染以前調用，但不是初始化操做時調用
• 決定Virtual Dom是否要重繪
• 對於性能優化，能夠作一些沒必要從新渲染的操做

render()

• 對於一個類組件，這是惟一必需的方法
• 對於更新，若是shouldComponentUpdate（）返回false，則不會調用render（）。

getSnapshotBeforeUpdate(prevProps, prevState)

• 此方法容許咱們捕獲在呈現該組件以前未存儲在該狀態中的某些屬性。（即，若是用戶滾動到頁面上的特定位置，而且咱們想要存儲該位置並在之後使用它）
• 在React更新並提交新的內容到DOM以前調用
• 不多使用但能夠捕獲可能快速變化的數據

componentDidUpdate(previousProps, previousState, snapshot)

• 在組件已經從新渲染以後調用
• 用於渲染後的任何DOM更新

Demo運行結果圖:

https://github.com/huangche00...

https://github.com/huangche00...

卸載時

在此階段，組件將被刪除並從DOM中清除

componentWillUnmount

• 在從DOM卸載組件以前調用它，作一些回收類的操做，如清除定時器等

https://github.com/huangche00...

https://github.com/huangche00...