React 進修之路 3

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

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...