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:false
5 })
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传递到子组件中，让子组件自己进行解析
数据接口
查看走秀网效果图