React-数据流详解

在React中，数据的流向是单向的——从父节点传递到子节点，因为组件是简单而且易于把握的，他们只需从父节点获取props渲染即可，如果顶层组件的某个prop改变饿了，React会递归的向下便利整棵组件树，重新渲染所有使用这个属性的组件。
React组建内部还具有自己的状态，这些状态只能在组件内修改。React组件本身很简单，你可以把他们堪称是一个函数，它接受props和state作为参数，返回一个虚拟的Dom表现。

一、Props
props就是properties的缩写，可以用它将任意类型的数据传递给组件。
1、可以在挂载组件的时候设置它的props：
var surveys = [{title:'Superheroes'];
<ListSurveyssurveys={surveys}/>
或者使用调用实例的setProps方法（很少需要这样做）来设置props：
var surveys =[ {title：‘superheroes}];
varlistSurveys = Reacrt.render(
<ListSurveys/>
document.querySelector('body');
);
listSurveys.setProps({surveys:surveys})

你只能在子组件上或者组件树外（如上例）调用setProps,一定不可以调用this.setProps或者直接修改this.props,如果有需要，可以使用state。可以使用this.props访问props，但是绝对不能通过这种方式修改它，一个组件绝对不可以自己修改自己的props。
2、在JSX中可以把props设置成字符串：
<ahref='/surveys/add'>Add survey </a>
也可以使用{}语法来设置，注入javaScript传递任意类型的变量：
<ahref={'/surveys/'+survey.id}>{survey.title}</a>
还可以使用JSX的展开语法吧props设置成一个对象：
varListSurveys =Reacty.createClass({
render:function(){
var props={
one：‘foo’，
two：‘bar'
}；
return<SurveyTable {...props}/>;
}
});

3、props还可以用来添加事件处理器：
var SaveButton =React.creatClass({
render:fucntion(){
return(
<a className ='button save' onclick={this.handleClick}>Save</a>
);
},
handleClick:function(){
//事件处理
}
});
这里传递了一个onClick属性，值为handleClick函数，当用户点击链接时，handlelick方法被调用。

二、PropTypes
通过组建定义一个配置对象，React提供了一种验证props的方式：
varSurveyTableRow =React.creatClass({
propTypes:{
survey:React.Proptypes.shape({
id : React.Proptypes.number.isRequired
}).isRequired,
onClick：react.PropTypes.func
},
//.........
});

组件初始化时，如果传递的属性和propTypes不匹配，则会打印一个console.warn日志。如果是可选的配置，则额可以去掉.isRequired。
在应用中使用propTypes并不是强制的。但这提供了一个记号的方式描述组件的API。

三、getDefauleProps
可以为组件添加getDefaultProps函数来设置属性的默认值，不过这应该只针对那些非必需属性：
varSurveyTable=React.createClass({
getDefaultProps:function(){
return{
surveys:[]
};
}
//...
});
必须知道的是getDefaultProps并不是在组件实例化时被调用的，而是在React.createClass调用时被调用了，返回值会被缓存起来，也就是说不能再getDefaultProps中使用任何特定的实例数据；

四、State
每一个State组件都可以拥有自己的state，state与props的区别在于前者只存在于组件的内部。state可以用来确定一个元素的试图状态。我们看一个自定义的<Dropdown/>组件：
var CountryDropdown=React.createClass({
getInitialState:function(){

return:{
showOptions:false
};
},

render:function(){
var option;
if(this.state.showOptions){
options =(
<ul clasName ='options'>
<li>United Stated of America</li>
<li>newZealand</li>
</ul>
);
}

return(
<divclassName ='dropdown' onClick={this.handClick}>
</div>
);
},

handleClick:function(){
this.setState({
showOptions:true
});
}
});
在上面例子中，state用来记录是否在下拉框中显示可选项。
state可以通过setState来修改，可以使用getInitalState方法提供一组默认值。只要setState被调用，render就会被调用。如果render函数返回值有变化，虚拟DOM就会更新，真实的DOM就会被更新。
注意：一定不可以直接修改this.state，永远要通过this.setState方法修改。

五、放在state和props的各是那些部分
不要再state中保存计算出的值，而应该保存最简单的数据，即组件正常工作时的必要的数据。比如用来表示下拉框是否显示的布尔值，又比如输入框的值，等等。
不要尝试将props复制到state中，要尽可能的把props当作数据源。

总结：
1、使用props在整个组建树种传递数据和配置。
2、避免在组件内部修改this.props或者调用this.setProps,把props当作是只读的。
使用props来做时间处理器，与子组件通信。
使用state存储简单的试图状态，比如说下拉框是否可见这样的状态。
使用this.setState来设置状态，不要使用this.state直接修改状态