react(三)元件內部狀態state使用方式

2021-08-07 22:13:50 字數 503 閱讀 1465

在react中,驅動元件渲染過程的兩種方式:prop和state。

state代表元件的內部狀態,由於react元件不能修改傳入的prop資料,所以需要記錄自身的資料變化,就要使用state。

1、初始化state

通常在元件類的建構函式的最後,定義this.state,這個值必須是個物件。

2、讀取state中某個屬性值

方式一:物件獲取屬性值

this.state.屬性名
方式二: es6的結構賦值

=this.state
3、更新state

this.setstate的作用:先更新this.state中的資料,再驅動元件的重新渲染。

this.setstate(  );
注意:更新state不能直接使用this.state,因為不能驅動元件渲染。

React學習筆記(三)元件

元件 props 元件可以在它的輸出中引用其它元件,這就可以讓我們用同一元件來抽象出任意層次的細節。在react應用中,按鈕 表單 對話方塊 整個螢幕的內容等,這些通常都被表示為元件。react將作為props傳入並呼叫welcome元件。welcome元件將元素作為結果返回。functionwel...

React學習(四)元件

元件 上面 中,變數 hellomessage 就是乙個元件類。模板插入 時,會自動生成 hellomessage 的乙個例項 下文的 元件 都指元件類的例項 所有元件類都必須有自己的 render 方法,用於輸出元件。注意,元件類的第乙個字母必須大寫,否則會報錯,比如hellomessage不能寫...

React(三) 元件的生命週期

react元件的生命週期分為三大部分 1 掛載 mount 我們把元件渲染,並且構造dom元素插入到頁面的過程稱為元件的掛載。元件掛載的過程 元件掛載先關函式,只在元件掛載的時候呼叫,在元件更新時不會執行 import react from react class test extends reac...