React16 新增的生命週期

圖源出處

新增的生命週期getderivedstatefromprops

getsnapshotbeforeupdate

componentdidcatch

getderivedstatefromerror

廢棄的生命週期(react17去除，react16不允許和新的生命週期同時使用)

componentwillmount

componentwillreceiveprops

componentwillupdate

靜態方法

引數：nextprops 新的屬性物件，prevstate 舊的狀態物件

返回：nextstate 新的狀態物件，或null(不需要更新)

說明：在呼叫 render 方法之前呼叫，並且在初始掛載及後續更新時都會被呼叫，可以根據props派生state，由於是static靜態方法，this為null

static

getderivedstatefromprops
(nextprops, prevstate)
}else
}}

引數：prevprops, prevstate

返回：任意內容，將作為componentdidupdate的第三個引數

說明：在最近一次渲染輸出（提交到 dom 節點）之前呼叫。它使得元件能在發生更改之前從 dom 中捕獲一些資訊（例如，滾動位置）。此生命週期的任何返回值將作為引數傳遞給 componentdidupdate。

getsnapshotbeforeupdate

(prevprops, prevstate)
// 元件更新完畢
componentdidupdate
(prevprops, prevstate, prevscrollheight)

靜態方法

引數：錯誤物件error

返回：新的狀態物件state，null則不更新

說明：此生命週期會在後代元件丟擲錯誤後被呼叫。在渲染階段呼叫，dom更新之前，可以用來回退ui

componentdidcatch

引數：錯誤物件error，info帶有 componentstack key 的物件，其中包含有關元件引發錯誤的棧資訊

返回：任意內容

說明：在提交階段呼叫，dom已更新，抓取ui錯誤，不會導致整個應用崩潰，而可以進行錯誤處理，並進行優雅降級，渲染備用的ui

錯誤邊界無法捕獲以下場景中產生的錯誤：

舊的生命週期

新的生命週期

react16.3生命週期

react16.4+生命週期

React16新增生命週期與舊版本生命週期的區別

舊版本生命週期 react16新增生命週期 總結 1.react16新的生命週期棄用了componentwillmount componentwillreceiveporps，componentwillupdate 2.新增了getderivedstatefromprops getsnapshotb...

React16生命週期誤用及改正

react16.3採用非同步更新機制，在頁面元件並不複雜的情況下，我們在螢幕外似乎捕捉到的區別並不明顯，其實框架內部已經發生重大變革，配套新的更新機制，元件的生命週期有所調整，廢棄了三個舊生命週期，同時react官方也對新生命週期的使用做出了指導。下面列舉就我自己專案開發中總結的生命週期中最常見的不...

React 生命週期 生命週期方法

生命週期 掛載 更新 解除安裝 元件被建立 執行初始化 並被掛載到dom中，完成元件的第一次渲染 constructor props getderivedstatefromprops props,state render componentdidmount 元件被建立時會首先呼叫元件的構造方法，接受...