react生命週期

2021-09-25 01:07:29 字數 1357 閱讀 4958

一直沒有時間去總結一下vue和剛剛 開始學習的react,接下來的時間會注重這兩個框架總結,如有總結不對 的地方歡迎指正,好了開始進入正題

今天先說說react吧

react的生命週期:

1、mounted階段 載入階段 或者說初始化階段 這個階段元件由jsx(虛擬dom)轉換成真實dom

2、update階段 元件執行中階段 或者更新階段 當元件修改自身狀態,或者父元件修改子元件屬性的時候發生的階段

3、umount階段 元件解除安裝階段 銷毀 這個一般是元件被瀏覽器**的階段

他的每一階段對應的鉤子函式有:

*第一階段

componentwillmount 即將進入dom 將要裝載,在render之前呼叫;(還未裝載就是掛載和vue的鉤子函式是乙個意思一樣)

render 描畫dom

componentdidmount 已經進入dom 載入完成元件已經載入完成

*2、具體的宣告函式週期—執行中階段 資料更新過程

執行中階段只有在父元件修改了子元件的屬性或者說乙個元件修改自身的狀態才會發生的情況

1、元件將要接受新值componentwillreceiveprops(已載入元件收到新的引數時呼叫)

2、元件是否更新 shouldcomponentupdate (影響整個專案的效能,決定檢視的更新)

3、元件即將更新 componentwillupdate

4、必不可少的render

5、元件更新完畢時執行的函式 componentdidupdate

3 銷毀時 componentwillunmount

解除安裝元件:reactdom.unmountcomponentatnode( 節點 )

在網上開了很多文章 發現了乙個很有意思的就是就是具體應該在哪個鉤子函式裡面發起ajax請求

在生命週期中的哪一步你應該發起 ajax 請求?

我們應當將ajax 請求放到 componentdidmount 函式中執行,主要原因有下:

react 可能會多次頻繁呼叫 componentwillmount,如果我們將 ajax 請求放到 componentwillmount 函式中,那麼顯而易見其會被觸發多次,自然也就不是好的選擇。

如果我們將 ajax 請求放置在生命週期的其他函式中,我們並不能保證請求僅在元件掛載完畢後才會要求響應。如果我們的資料請求在元件掛載之前就完成,並且呼叫了setstate函式將資料新增到元件狀態中,對於未掛載的元件則會報錯。而在 componentdidmount 函式中進行 ajax 請求則能有效避免這個問題。

React 生命週期 生命週期方法

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

react 生命週期

首次例項化 例項化完成後的更新 元件已存在時的狀態改變 生命週期共提供了10個不同的api。1.getdefaultprops 作用於元件類,只呼叫一次,返回物件用於設定預設的props,對於引用值,會在例項中共享。2.getinitialstate 作用於元件的例項,在例項建立時呼叫一次,用於初始...

react生命週期

盜圖一張 第一次進入頁面列印結果 1 parent constructor 2 parent conponentwillmount 3 parent render 4 initial render constructor 5 componentwillmount 6 render 7 compone...