ReactNative 生命週期

2022-04-03 18:27:51 字數 1053 閱讀 8124

1、建立階段

getdefaultprops:處理props的預設值 在react.createclass呼叫

//在建立類的時候被呼叫  this.props該元件的預設屬性

2、例項化階段

reactdom.render(《自定義元件 啟動後開始例項化

getinitialstate:初始化元件的state值,其返回值會賦值給元件的this.state屬性;

componentwillmount:在render之前呼叫此方法,業務邏輯的處理都應該放在這裡,如對state的操作等;

render:根據state值,渲染並返回乙個虛擬dom;

componentdidmount:該方法發生在render方法之後;在該方法中,reactjs會使用render方法返回的虛擬dom物件來建立真實的dom結構,元件內部可以通過this.getdomnode()來獲取當前元件的節點;

state:元件的屬性,主要是用來儲存元件自身需要的資料,每次資料的更新都是通過修改state屬性的值,reactjs內部會監聽state屬性的變化,一旦發生變化的話,就會主動觸發元件的render方法來更新虛擬dom結構。

虛擬dom:將真實的dom結構對映成乙個json資料結構

3、更新階段

主要發生在使用者操作之後或父元件有更新的時候,此時會根據使用者的操作行為進行相應的頁面結構的調整

componentwillreceiveprops:該方法發生在this.props被修改或父元件呼叫setprops()方法之後;呼叫this.setstate()方法來完成對state的修改;

shouldcomponentupdate:用來攔截新的props或state,根據邏輯來判斷是否需要更新;

componentwillupdate:shouldcomponentupdate返回true的時候執行,元件將更新;

componentdidupdate:元件更新完畢後在此做一些dom操作。

4、銷毀階段

componentwillunmount:銷毀時被呼叫,通常做一些取消事件繫結、移除虛擬dom中對應的元件資料結構、銷毀一些無效的定時器等工作。

React Native生命週期

一 前言 react的使用者頁面的構建只要思想是通過構建可復用的元件來實現。那麼什麼叫元件?所謂的元件就是有限狀態機,通過狀態渲染對應的介面了,和ios一樣,react的每個元件也有對應的生命週期,它規定了元件的狀態和方法需要在什麼階段進行改變和執行。當呼叫react.createclass 建立乙...

React Native 元件生命週期

1.元件生命週期 元件的生命週期包含三個主要部分 掛載 元件被插入到dom中。更新 元件被重新渲染,查明dom是否應該重新整理。移除 元件從dom中移除。react提供生命週期方法,你可以在這些方法中放入自己的 我們提供will方法,會在某些行為發生之前呼叫,和did方法,會在某些行為發生之後呼叫。...

React Native元件生命週期

getdefaultprops 該函式用於初始化一些預設的屬性,通常會將固定的內容放在這個函式 中進行初始化和賦值 在元件建立之前,會先呼叫 getdefaultprops 初始化一些屬性,由於元件初始化後,再次使用該元件不會呼叫getdefaultprops 所以元件自己不可以自己修改props。...