當通過呼叫react.creatclass()
來生成乙個元件類的時候,你需要提供乙個規範物件作為引數傳入,這個物件必須包含render
方法以及包含其他可選的生命週期方法。這些方法介紹如下。
render()
方法是必須的。
當呼叫這個方法的時候,它會檢查this.props
和this.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
靜態方法意味著你可以在任何元件例項被建立之前呼叫這些方法,當然這些方法也因此無法獲取你元件的props
和state
。如果你想要在靜態方法中使用props
或者state
,那麼在呼叫這些方法的時候將props
或state
作為引數傳遞進去。
displayname
字串會在debug中用到,詳情參見
不同的方法會在元件生命週期中不同的時間點執行。
在伺服器端和在客戶端呼叫一次,在初始化render
執行之前。如果在這個方法裡面呼叫setstat
e,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...