State與元件生命週期

2021-10-01 07:45:20 字數 1163 閱讀 6696

顧名思義,state用於表示元件的狀態。相當於元件的私有變數,只可以在元件內部修改,完全受控於當前元件。

是由類定義的元件所特有的。

狀態的宣告

class clock extends react.component;//對state進行初始化

}render()

}

如果想要實現實時更新的時鐘,那就需要與生命週期的鉤子函式結合。

1.初始化

constructor()

2.掛載

static getderivedstatefromprops()

元件例項化後和屬性更新後

render()

componentdidmount()

元件掛載後立即呼叫

3.更新

static getderivedstatefromprops()

shouldcomponentupdate()

接收到新屬性和狀態時,渲染前呼叫,返回布林值,決定是否更新

render()

getsnapshotbeforeupdate()

渲染提交給dom之前呼叫,返回值傳給componentdidupdate(),可以返回null

componentdidupdate()

4.解除安裝

componentwillunmount()

5.錯誤處理

componentdidcatch()

在掛載後新建乙個定時器,在解除安裝時清除定時器,利用this.setstate()就可以實現實時時鐘。

class clock extends react.component;//對state進行初始化

}tick())

}//掛載

componentdidmount()

//解除安裝

componentwillunmount()

render()

}reactdom.render(,document.getelementbyid('root'));

用this.setstate({})來更新state,constructor()中初始化state

State 生命週期

class clock extends react.component componentdidmount componentwillunmount tick render h2 div reactdom.render document.getelementbyid root 當被傳給reactdo...

元件生命週期

三大階段 失效階段,提交階段,度量階段 失效階段 對元件屬性setter函式中,若有發生改變,則標記屬性失效,為了防止多次呼叫setter而導致頻繁更改屬性,所以呼叫屬性失效函式,當當前ui存放進 layoutmannger的失效佇列中,並新增layoutmannger的延遲偵聽,在下一幀才進行相應...

元件生命週期

元件生命週期指的是元件從建立到銷毀的過程,在這個過程中的一些不同的階段,vue會呼叫指定的一些元件方法 基本生命週期函式有下面幾個階段 每乙個階段都對應著 之前 和 之後 兩個函式 beforecreate 初始化階段,應用不多 created 在例項建立完成後被立即呼叫,該階段完成了對data中的...