React 學習之元件及生命鉤子函式

元件的生命週期鉤子函式

用來實現區域性功能效果的**和資源的集合(html/css/js/image等等) react有兩種元件

函式式元件

let com=()

=>
(aaaaaaaaa<
/span>
<
/div>
);

class com extends react.component

}

<
/com> 或者 >

2、元件使用的時候、如果沒有內容可以使用單標籤

生命週期      	狀態state     	 	this             屬性

函式元件               基礎的沒有     		基礎的內有      	注意可能會亂    		  有
class元件的區別         有的           	 有           		例項              有

之前基本上大部分用的是class元件

但是新版本hock給函式元件加了東西，現在用函式式元件的比較多

定義屬性

"我是函式式元件" name=

"元件1"
/>

props props.***x

class類式

this.props.***

每個元件物件都會有props(properties的簡寫)屬性

元件標籤的所有屬性都儲存在props中

通過標籤屬性從元件外向元件內傳遞變化的資料

注意: 元件內部不要修改props資料

屬性是唯讀的，不能修改

state是元件物件最重要的屬性, 值是物件(可以包含多個key-value的組合)

元件被稱為"狀態機", 通過更新元件的state來更新對應的頁面顯示(重新渲染元件)

狀態資料，不能直接修改或更新

元件中render方法中的this為元件例項物件

calss com extends react.component

}}

a) 繫結this: 通過函式物件的bind()

b) 箭頭函式

onclick=

this有問題
1、this.show.
bind
(this)
2、show=()
=>
傳參this.show.
bind
(this,***,***)
事件物件
this.show.
bind
(this,***,ev)

1. 初始化階段: 由reactdom.

render
()觸發--
-初次渲染
1.constructor()
2.	getderivedstatefromprops 
3.render()
4.componentdidmount()
2. 更新階段: 由元件內部this.
setsate
()或父元件重新render觸發
1.	getderivedstatefromprops
2.shouldcomponentupdate()
3.render()
4.	getsnapshotbeforeupdate
5.componentdidupdate()
3. 銷毀元件: 由reactdom.
unmountcomponentatnode
()觸發
1.componentwillunmount
()

componentwillunmount：例如: 清理定時器這樣的收尾工作

即將廢除的鉤子componentwillmountcomponentwillreceivepropscomponentwillupdateuseeffect

//相當於合併componentdidmount 元件掛載 和 componentdidupdate 元件更新

return在元件銷毀的時候也會更新

useeffect鉤子裡面是非同步的

每一次執行都是新的函式

useeffect((

)=>
return()
=>
)

真實dom構建以後才會執行

而componentdidmount和componentdidupdate在dom構建之前的鉤子

componentdidmount或componentdidupdate會阻塞瀏覽器更新螢幕 而useeffect不會

dom構建之前用uselayouteffect

React 生命週期鉤子

es6 class構造方法，接收乙個props屬性物件，props由父元件傳入，如果父元件未傳入，則指向自身。通常用於初始化state,以及繫結事件處理方法等工作 元件被掛載到dom前，只會呼叫1次,一般用用更靠前的constructor代替，在其中呼叫this.setstate 不會引起元件重新渲...

React生命週期鉤子

我一直覺得這張圖描述的真是太好了，首先，先看圖。初始化階段 constructor props props的初始設定是在元件的外面 或者在內部使用 靜態屬性 static class home extends react.component home.defaultprops 或者在內部 stati...

react生命週期鉤子

大家先看一張關於元件掛載的經典的 下面一一說一下這幾個生命週期的意義 object getdefaultprops 執行過一次後，被建立的類會有快取，對映的值會存在this.props,前提是這個prop不是父元件指定的 這個方法在物件被建立之前執行，因此不能在方法內呼叫this.props，另外，...