React 進修之路 3

2022-07-26 17:36:11 字數 3785 閱讀 1403

注:本篇文章是在前兩篇基礎上進行編輯的,建議有看本篇文章吃力的童鞋可以先看前兩篇

react對虛擬

dom拓展的屬性,但是這些屬性不是

html

中元素內建的屬性

1 key:為列表元素定義

react-id

2 ref:對虛擬

dom中元素定義乙個引用關係,屬性值會新增在元件的

refs

屬性中繫結

我們可以通過this.refs.語法訪問這個元素(源生

dom元素)

3 dangerouslysetinnerhtml:有時對於虛擬

dom的一些操作是非法的,

例如,使用字串設定行內式的樣式,這種行為是不允許的,還想這麼設定,我們可以通過dangerouslysetinnerhtml設定

屬性值是乙個物件,物件中有乙個__html的屬性,用來設定內容

1  var search =react.createclass(,

10 //

輸出渲染虛擬dom

11 render: function

() 17 return

(18 19 20 this.gosearch}>搜尋

21

22

23)24}

25 })

當乙個表單產生互動的時候,我們往往會操作一些資料(要被提交的),這裡約束性以及非約束性指的就是這些資料儲存在**

指的就是資料儲存在表單元素自身的這類元件,對於這類元件元素來說,獲取資料或者設定資料都要通過這些表單元素

預設資料的設定我們要通過defaultvalue或者

defaultchecked

來設定獲取或者設定資料,要首先獲取這類元素(通常通過ref屬性設定),

然後通過這個元素(this.refs)獲取或者設定內容

指的就是資料儲存在元件的內部(狀態中),對於這類元件元素來說,獲取資料或者設定資料都要通過元件的狀態

設定預設值我們要通過value或者

checked

來設定獲取或者設定資料,

獲取: 首先要通過value繫結狀態資料,獲取

value

就是獲取狀態資料

設定:   首先要通過onchange事件繫結處理方法,當

value

改變的時候,我們去更新狀態,從而更新資料

onchange事件只有乙個引數,就是

react

封裝的事件物件

在約束性元件中,value的繫結以及

onchange

的設定必須同時是使用(在非約束性元件中,任何乙個都不能單獨使用)

在約束性元件中,我們實現的就是資料雙向繫結(在react我們是手動實現的,我們實現的是乙個完整的過程)

資料到檢視 -》 狀態插值實現

檢視到資料 -》

onchange

事件實現的

約束性元件流程

通過value繫結狀態(設定預設值)

-》 與使用者產生互動

-》 觸發

change

事件 -

》 獲取表單元素

-》 通過表單元素獲取值

-》 校驗值

正確 -》 更新狀態

-》 進入存在期

-》 更新檢視

-》 表單元素的值就更新了

不正確 -》 停止更新

獲取值就是獲取狀態

1

//定義搜尋元件

2var search =react.createclass(8},

9//更新內容**函式

10 searchchange: function

(e) )

21 } else

24},

25//

獲取搜尋框的值

26 getsearchvalue: function

() ,

30//

渲染輸出虛擬dom

31 render: function

() onchange= />

35this.getsearchvalue} htmlfor="search">搜尋

3637)38

}39})40

41//

將元件渲染到頁面中

在react中定義下拉框的虛擬

dom,跟在

html

中定義下拉框一樣

都是通過select元素以及

option

來定義預設值我們通過defaultvalue定義

獲取或者設定下拉框的值,我們首先要通過ref屬性訪問這些元素,再獲取或者設定值

預設值我們通過value繫結狀態來定義

獲取或者設定下拉框的值,

設定我們首先要通過onchange繫結事件,在事件中更新狀態來設定

獲取我們通過繫結的狀態直接獲取

1 render: function

() 10 this.state.color} onchange=>

11 orange

12 pink

13 yellow

14

15

16 this.state.web} onchange= multiple>

17 js

18 css

19 html

20

21 this.showresult}>檢視結果

22

23)24 }

選框元素分成兩類,一類是單選框,一類是多選框

他們比較特殊,是否被選中,我們通常通過checked屬性來設定

預設選中態用defaultchecked來設定

獲取或者設定他們的值,我們首先要通過ref屬性獲取這些元素,再獲取或者設定他們的選中態

預設選中態用checked繫結狀態資料

設定或者獲取選中態

設定首先要通過onchange方法繫結事件,當改變的時候,我們獲取元素的

checked

值,然後更新狀態

獲取直接通過狀態即可獲取

1 var demo =react.createclass(,

8 //

定義初始化狀態

9 getinitialstate: function

() 13},

14 changecheckbox: function

(e) )

21},

22 //

渲染虛擬dom

23 render: function

() 28 this.state.ck} onchange= type="checkbox"/>

29 this.showresult}>檢視結果

30

31)32}

33 })

react路由之路

路由 就是讓不同的路徑來渲染不同的元件,兩種實現方式 1 hashrouter 利用hash實現路由切換 2 browserrouter h5 api 實現路由的切換 複製 a 去a b 去b複製 實現原理 兩大元件 hashrouter 和 route。1 hashrouter 在元件掛載後 co...

react小白高階之路

3.cd react demo 4.npm install 5.npm start 執行 react全家桶redux,redux actions,redux sagas,immutable.js,react router 初識react的jsx 1.是js物件,會構建乙個js物件來描述html結構的...

react之路 使用redux immutable

我們在使用redux中的combinereducers用來分離reducer後,如果元件去訪問資料時,需要訪問多一層屬性,為了將訪問這一層屬性的方式變成使用函式進行訪問。這裡就可以使用redux immutable中的combinereducers。1.引入redux immutable中的comb...