React-数据流详解

在React中，数据流是单向的，即从父组件传递到子组件。因为组件是简单且易于把握的，它们只需从父组件获取props渲染即可。如果顶层组件中的某个props改变了，react会递归的向下遍历整棵组件树，重新渲染所有使用这个属性的组件。

React组件内部还具有自己的状态，这些状态只能在组件内修改。React组件本身很简单，你可以把它们称为一个函数，它接受props和state作为参数，返回一个虚拟的Dom表现。

Props

props是properties的缩写，可以用它将任意类型的数据传递给组件。

var surveys = [
{
title:'Superheroes'
}
];

或者使用调用实例的setProps方法（很少需要这样做）来设置props：

var surveys =[ 
{
title：superheroes
}
];
var listSurveys = React.render(
,
document.querySelector('body');
);
listSurveys.setProps({
surveys:surveys
})

你只能在子组件上或者组件树外（如上例）调用setProps，一定不可以调用this.setProps或者直接修改this.props，如果有需要，可以使用state。可以使用this.props访问props，但是绝对不能通过这种方式修改它，一个组件绝对不可以自己修改自己的props。

Add survey

也可以使用{}语法来设置，注入javascript传递任意类型的变量：

{survey.title}

还可以使用JSX的展开语法吧props设置成一个对象：

var ListSurveys = Reacty.createClass({
render:function(){
var props={
one：‘foo’，
two：‘bar'
}；
return;
}
});

var SaveButton = React.creatClass({
render:fucntion(){
return(
Save
);
},
handleClick:function(){
//事件处理
}
});

这里传递了一个onClick属性，值为handleClick函数，当用户点击链接时，handlelick方法被调用。

PropTypes

通过组建定义一个配置对象，React提供了一种验证props的方式：

var SurveyTableRow =React.creatClass({
propTypes:{
survey:React.Proptypes.shape({
id : React.Proptypes.number.isRequired
}).isRequired,
onClick：react.PropTypes.func
},
});

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

getDefauleProps

可以为组件添加getDefaultProps函数来设置属性的默认值，不过这应该只针对那些非必需属性：

varSurveyTable=React.createClass({
getDefaultProps:function(){
return{
surveys:[]
};
}
//...
});

必须知道的是getDefaultProps并不是在组件实例化时被调用的，而是在React.createClass调用时被调用了，返回值会被缓存起来，也就是说不能再getDefaultProps中使用任何特定的实例数据；

State

每一个State组件都可以拥有自己的state，state与props的区别在于前者只存在于组件的内部。state可以用来确定一个元素的试图状态。我们看一个自定义的组件：

var CountryDropdown=React.createClass({
getInitialState:function(){
        return:{
showOptions:false
};
},

render:function(){
var option;
if(this.state.showOptions){
options =(

• United Stated of America
• newZealand