React学习笔记2

React的属性和状态

React数据使用两种事物进行传递：

1.属性(props)：在组件外部传入，组件内部通过this.props获得（与生俱来，不容易被改变的）

2.状态(state)：在组件内部设置或更改，组件内部通过this.state获得（状态是后天获得的，经常会发生改变的）

属性专一，状态多情

---

 

React属性(Props)

• 属性是在一个组件被声明的时候就被（父组件）赋予的，并且不可被修改

• 属性被传递的方式一般在组件被调用时候被传入

• 属性可以使字符串、数组、对象...

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

例子:

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

 

---

 

React状态(state)

不同于props，state在组件的内部去声明

用途：主要是检测当前组件内部数据是否发生改变，一旦组件数据发生改变，state也发生改变

 

问题：

1.state如何去声明和定义？

 

getInitialState:function(){
return({
value:"default",
bool:false
})
},

 

2.如何去监听组件内部的数据变化情况？实际上就是不断给state赋值的过程

完整代码：

 

var Compo = React.createClass({
getInitialState:function(){
return({
value:"Hello"
})
},
handleChange:function(e){
var text = e.target.value;
this.setState({value:text});
},
render:function(){
var value = this.state.value;
return(
<div>
<input type="text" onChange={this.handleChange} value={value}/><br />
<span>value:{value}</span>
</div>
)
}
})
ReactDOM.render(<Compo/>,document.getElementById("example"));

 

进入页面的初始状态

当进行输入框输入，下面同步显示输入框的value

---

 

实际开发

 

开发中props和state进行混搭使用

数据对接，以走秀网商品列表为例：

1.分成两个组件，外层是父组件，这个商品列表的容器

2.商品列表中每个循环子项（渲染模板）是子组件

可以在父组件中存储变化的数据，放在state中

把state数据作为props传递到子组件中，让子组件自己进行解析

数据接口

查看走秀网效果图