React的生命週期鉤子函式

一、react的生命週期鉤子函式舊版

掛載時，初始化階段

1）constructor(): 如果不初始化state或不進行方法繫結，則不需要為react元件實現建構函式

2）componentwillmount(): 以前在這裡進行請求資料，現在即將被廢棄

3）render(): 初次渲染元件的內容

4）componentdidmount(): 元件掛載完畢以後，可以進行請求資料，可以操作dom，例項化請求

更新時，執行時階段

1）componentwillreceiveprops(nextprops)：可以依據nextprops 達到類似vue中監聽屬性的目的，現在即將被廢棄

2）shouldcomponentupdate(): 元件需不需要更新，預設的值為true，預設是更新的，這個要不不寫，要寫必須要返回值，提公升react效能的關鍵

3）componentwillupdate(): 元件即將更新，現在即將被廢棄

4）render(): 元件更新

5）componentdidupdate(): 元件更新完畢，dom操作

解除安裝時，銷毀階段

1）componentwillunmount(): 元件銷毀，移出定時器、計時器、銷毀物件

錯誤處理

1）componentdidcatch(): react元件樹出現錯誤時執行

二、react的生命週期鉤子函式新版

掛載時，初始化階段

1）constructor(): 如果不初始化state或不進行方法繫結，那麼不需要為react元件實現建構函式

2）static getderivedstatefromprops(): 呼叫render() 方法之前呼叫，並且在初始掛載及後續更新時都會被呼叫，它應該返回乙個物件來更新state，如果返回null則不更新任何內容，一般不會用到，新增加的，要不不寫，要寫就必須寫返回值

3）render(): 初次渲染元件內容

4）componentdidmount(): 元件掛載完畢，可以去請求資料，可以操作dom

更新時，執行時階段

1）static getderivedstatefromprops(): 呼叫render() 方法之前呼叫，並且在初始掛載和後續更新時都會被呼叫，它應該返回乙個物件來更新state，如果返回null，則不更新任何內容，一般不會用到

2）shouldcomponentupdate(): 元件要不要被更新，預設的值為true，預設是更新的，要不不寫，要寫就必須要有返回值，提公升react效能的關鍵

3）render(): 元件更新

4）getsnapshotbeforeupdate(): 在最後一次渲染輸出，提交到dom節點之前呼叫，它使得元件在發生更改之前從dom中捕獲一些資訊，它的任何返回值都將作為引數傳遞給componentdidupdate()

一般很少會被使用

5）componentdidupdate(): 元件更新完畢，dom操作

解除安裝時，銷毀階段

1）componentwillunmount(): 元件銷毀，移出定時器、計時器、銷毀物件

錯誤處理

1）static getderivedstatefromerror(): 在後代元件丟擲錯誤後被呼叫，它將丟擲的錯誤作為引數，並返回乙個值以更新state

2）componentdidcatch(): react元件樹出現錯誤時執行