元件規範和生命週期 react文件翻譯

2021-09-18 02:15:23 字數 2790 閱讀 4410

當通過呼叫react.creatclass()來生成乙個元件類的時候,你需要提供乙個規範物件作為引數傳入,這個物件必須包含render方法以及包含其他可選的生命週期方法。這些方法介紹如下。

render()方法是必須的。

當呼叫這個方法的時候,它會檢查this.propsthis.state並且返回乙個子元素( child element )。這個子元素可以是乙個虛擬的原生dom標籤也可以是我們之前定義好的乙個元件。當然也可以返回null或者false值表示不想做任何渲染。

在render方法的背後,react渲染了乙個標籤以及執行diff演算法。當返回null或者false值時,reactdom.finddomnode(this)將返回null

reder()方法需要純淨,即它不能修改元件的state,它每次呼叫所返回的值都需相同,並且它不能讀寫dom或者和瀏覽器有互動操作(例如使用settimeout())。如果你需要和瀏覽器之間進行互動,那麼將這些內容寫入到componentdidmount()或者其他生命週期方法中。

這個方法在元件被掛載前呼叫一次,它的返回值會被用來初始化this.state

這個方法在元件類建立的時候呼叫一次並將值快取(意味著相同的元件重新掛載的時候這個方法不會被呼叫)。 如果元件的prop不是從父元件傳進來,那麼這些值將會用來初始化this.props

這個方法是在任何例項被建立前呼叫。另外,這個方法返回的任何複雜型別值都會在例項之間共享而不是拷貝。

statics物件允許你定義一些靜態方法,這些方法可以在元件類中被呼叫。例如

var mycomponent = react.createclass(

},render: function()

});mycomponent.custommethod('bar'); // true

靜態方法意味著你可以在任何元件例項被建立之前呼叫這些方法,當然這些方法也因此無法獲取你元件的propsstate。如果你想要在靜態方法中使用props或者state,那麼在呼叫這些方法的時候將propsstate作為引數傳遞進去。

displayname字串會在debug中用到,詳情參見

不同的方法會在元件生命週期中不同的時間點執行。

在伺服器端和在客戶端呼叫一次,在初始化render執行之前。如果在這個方法裡面呼叫setstate,render()方法只會執行一次儘管state發生了改變。

僅僅在客戶端呼叫一次,在初始化render發生之後立即被呼叫,在這個方法中你可以獲取到元件中的任何子節點。因為子元件的componentdidmount()方法呼叫是在父元件之前。

如果你想整合其他js框架,例如使用settimeout或者setinterval來設定時間或者傳送ajax請求,那麼都可以在這個方法裡面書寫。

這個方法是在元件接收到新的props的時候呼叫,在元件初始化渲染的時候不會呼叫此方法。

通過this.setstate()來更新狀態可以導致對render()方法的一次呼叫,而componentwillreceiveprops可以讓你在render()呼叫之前來改變prop值。此時,舊的props可以通過this.props訪問到,這個函式裡面呼叫this.setsteate()不會觸發額外的一次渲染。

備註1:常常出現的乙個錯誤用法是認為在這個生命週期方法中props已經改變。

備註2:沒有componentwillreceivestate這個相似的生命週期方法。prop的改變會導致狀態的改變,但反過來講就是不對的。如果你需要在state值改變時進行一些操作,請使用componentwillupdate這個方法。

當元件接收到新的props或者state,在重新渲染之前會呼叫這個方法。 這個方法在首次渲染的時候是不呼叫的或者在forceupdate的時候是不會被呼叫的。

注意:這個方法裡不能呼叫this.setstate()

這個方法在元件更新並且重新重新整理dom之後被呼叫。 在首次渲染的時候是不呼叫的或者在forceupdate的時候是不會被呼叫的。

這個方法提供了元件更新後操作dom節點的機會。

在元件從dom中解除安裝之後被立即呼叫。

你可以在這個方法做一些必要的清除工作,比如一些計時器或者清除一些在componentdidmount方法中新增的一些dom元素。

React元件生命週期

元件的所有狀態結合起來就成了元件的生命週期。即 初始化階段 執行中階段 銷毀階段。不同生命週期內可以自定義的函式 初始化階段 getdefaultprops 獲取預設屬性,只呼叫一次,是在createclass之後呼叫的。例項之間共享引用 getinitialstate 初始化每個例項的特有初始化狀...

React元件生命週期

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

React 元件生命週期

在本章節中我們將討論 react 元件的生命週期。元件的生命週期可分成三個狀態 生命週期的方法有 這些方法的詳細說明,可以參考官方文件。以下例項在 hello 元件載入以後,通過 componentdidmount 方法設定乙個定時器,每隔100毫秒重新設定元件的透明度,並重新渲染 varhello...