對React16 3版本前後生命週期的理解

2021-08-30 06:45:33 字數 1848 閱讀 9195

react 16.3之前

設定預設的props,也可以用dufaultprops設定元件的預設屬性.

2、getinitialstate()

在使用es6的class語法時是沒有這個鉤子函式的,可以直接在constructor中定義this.state。此時可以訪問this.props

3、componentwillmount()

元件初始化時只呼叫,以後元件更新不呼叫,整個生命週期只呼叫一次,此時可以修改state。

4、 render()

react最重要的步驟,建立虛擬dom,進行diff演算法,更新dom樹都在此進行。此時就不能更改state了。

5、componentdidmount()

元件渲染之後呼叫,只呼叫一次。

更新6、componentwillreceiveprops(nextprops)

元件初始化時不呼叫,元件接受新的props時呼叫。

7、shouldcomponentupdate(nextprops, nextstate)

react效能優化非常重要的一環。元件接受新的state或者props時呼叫,我們可以設定在此對比前後兩個props和state是否相同,如果相同則返回false阻止更新,因為相同的屬性狀態一定會生成相同的dom樹,這樣就不需要創造新的dom樹和舊的dom樹進行diff演算法對比,節省大量效能,尤其是在dom結構複雜的時候

8、componentwillupdata(nextprops, nextstate)

元件初始化時不呼叫,只有在元件將要更新時才呼叫,此時可以修改state,但是不能呼叫this.setstate

9、render()

元件渲染

10、componentdidupdate()

元件初始化時不呼叫,元件更新完成後呼叫,此時可以獲取dom節點。

解除安裝11、componentwillunmount()

元件將要解除安裝時呼叫,一些事件監聽和定時器需要在此時清除。

react16.3之後

最大的變動莫過於生命週期去掉了以下三個

componentwillmount

componentwillreceiveprops

componentwillupdate

同時為了彌補失去上面三個週期的不足又加了兩個

static getderivedstatefromprops

getsnapshotbeforeupdate

當然,這個更替是緩慢的,在整個16版本裡都能無障礙的使用舊的三生命週期,但值得注意的是,舊的生命週期(unsafe)不能和新的生命週期同時出現在乙個元件,否則會報錯「你使用了乙個不安全的生命週期」。

static getderivedstatefromprops

會在初始化和update時觸發,用於替換componentwillreceiveprops,可以用來控制 props 更新 state 的過程;它返回乙個物件表示新的 state;如果不需要更新,返回 null 即可

getsnapshotbeforeupdate

用於替換 componentwillupdate,該函式會在update後 dom 更新前被呼叫,用於讀取最新的 dom 資料,返回值將作為 componentdidupdate 的第三個引數

ReactJS V0 14版本前後的變化

v0.14版本之前 v0.14版本之後 通過react.createclass方式創造元件類 通過class 類名 extends component getdefaultprops function class sample extends react.component sample.defau...

iOS AFN 3 0版本前後區別 01

聯絡人 石虎暱稱 嗡嘛呢叭咪哄 一 afn 版本的概念 在afnetworking 3.0之前,底層是通過封裝nsurlconnection來實現的。在afnetworking 3.0之後,也就是在ios 9.0 之後,nsurlconnection被棄用,蘋果推薦使用nsurlsession來管理...

關於16 6版本的react元件傳參

元件傳參父傳子 父元件import react,from react import three from three export default class two extends component incrime 要保證自身先 1再賦值,所以不可以用 不過 可以放在前面 render this...