React學習筆記2

標籤：

React的屬性和狀態

React資料使用兩種事物進行傳遞：

1.屬性(props)：在組件外部傳入，組件內部通過this.props獲得（與生俱來，不容易被改變的）

2.狀態(state)：在組件內部設定或更改，組件內部通過this.state獲得（狀態是後天獲得的，經常會發生改變的）

屬性專一，狀態多情

 React屬性(Props)

• 屬性是在一個組件被聲明的時候就被（父組件）賦予的，並且不可被修改

• 屬性被傳遞的方式一般在組件被調用時候被傳入

• 屬性可以使字串、數組、對象...

直接把Object傳入組件，用{...Object}的形式(前面加...)

例子:

1 var _prop = {"title":"home page","url":"http://gist.github.com"}2 ReactDOM.render(<Ele{..._prop}/>,document.getElementById("example"));

 

 React狀態(state)

不同於props，state在組件的內部去聲明

用途：主要是檢測當前組件內部資料是否發生改變，一旦組件資料發生改變，state也發生改變

  問題：

1.state如何去聲明和定義？

 

1 getInitialState:function(){2 return({3 value:"default",4 bool:false5 })6 },

 

2.如何去監聽組件內部的資料變化情況？實際上就是不斷給state賦值的過程

完整代碼：

 

 1 var Compo = React.createClass({ 2 getInitialState:function(){ 3 return({ 4 value:"Hello" 5 }) 6 }, 7 handleChange:function(e){ 8 var text = e.target.value; 9 this.setState({value:text});10 },11 render:function(){12 var value = this.state.value;13 return(14 <div>15 <input type="text" onChange={this.handleChange} value={value}/><br />16 <span>value:{value}</span>17 </div>18 )19 }20 })21 ReactDOM.render(<Compo/>,document.getElementById("example"));

 

進入頁面的初始狀態

當進行輸入框輸入，下面同步顯示輸入框的value

 實際開發 開發中props和state進行混搭使用

資料對接，以走秀網商品列表為例：

1.分成兩個組件，外層是父組件，這個商品列表的容器

2.商品列表中每個迴圈子項（渲染模板）是子組件

可以在父組件中儲存變化的資料，放在state中

把state資料作為props傳遞到子組件中，讓子組件自己進行解析

資料介面

React學習筆記2