React生命週期

react生命週期：

在react中，生命週期函式指的是元件在某一時刻會自動執行的函式。

constructor雖然也會自動執行，但不是react所獨有的，可以理解成普通的類的生命週期函式

render當資料發生變化時，render函式會被自動執行，他就是乙個react生命週期函式

initialization: 元件初始化的過程，設定屬性和資料，沒有用到任何生命週期函式

mounting: 依次執行接下來的三個函式

頁面掛載的階段，也就是說你有了資料之後，需要把資料對應的頁面展示到html上面

資料發生變化時，頁面也會跟著變

資料發生變化了，不會重新執行mounting這個過程。react中，只有當你的元件第一次渲染到頁面的時候，才會執行mounting這個過程

updation

當資料發生了變化，react會執行updation更新過程，即props和state更新生命週期

shouldconpomentupdate（元件更新前，必須要返回乙個布林值。當為false時，資料發生變化，頁面不變，後面的生命週期函式不會執行，可以提高元件更新的效能，為true更新）

componentwillupdate（元件更新之前，它會自動執行，但是它在shouldcomponentupdate後；如果shouldcomponentupdate返回true它才執行；如果返回false，這個函式不會被執行）

render

componentdidupdate（元件更新完成之後，他會被自動執行）

unmounting

總結：

首先，生命週期函式是針對元件來說的，不管是子元件還是父元件，都會有自己元件內部的生命函式。

當元件第一次被渲染的時候，這個過程叫做mounting（掛載的過程）會依次執行constructor–>componentwillmount–>render–>componentdidmount

接著，如果你改變了乙個元件的資料，假設改變的是父元件的資料，那麼會依次執行shouldcomponentupdate–>componentwillupdate–>render–>componentdidupdate，假設子元件接收到的外部的props屬性發生了變化，子元件會多執行乙個生命函式componentwillreceiveprops

最後，當乙個元件從頁面中，即將被移除的時候，componentwillunmount會自動執行

父元件：

import react,
from
'react'
;import number from
'./number'
;//在react中，生命週期函式指的是元件在某一時刻會自動執行的函式
//當資料發生變化時，render函式會被自動執行，他就是乙個react生命週期函式
class
counter
extends
component)}
//可以理解成普通的類的生命週期函式
constructor
(props)
}// 掛載前自動執行
componentwillmount()
//渲染時自動執行
//元件更新之前 componentwillupdate後 自動執行
render()
>hello world<
/div>
/>
<
/div>)}
//掛載後自動執行
componentdidmount()
//元件更新前 自動執行
//存在的意義：假設有的時候資料發生變化，頁面不需要改變，設定return為false
//即資料發生變化，頁面不變，，後面的生命週期函式都不會執行可以提高元件更新的效能
shouldcomponentupdate()
//元件更新之前 shouldcomponentupdate之後 自動執行
componentwillupdate()
//元件更新前 render後 自動執行
componentdidupdate()
//元件從頁面中移除前自動執行
componentwillunmount()
}export
default counter;

子元件

import react,
from
'react'
;class
number
extends
component
componentwillmount()
render()
<
/div>
}componentdidmount()
}export
default number;

React生命週期

React 生命週期生命週期方法

react 生命週期

react生命週期

React生命週期

React 生命週期 生命週期方法

react 生命週期

react生命週期

相關推薦

React 生命週期生命週期方法