React组件的数据分为2种，prop和state。prop是组件的对外接口，组件不应该修改props的值。state是组件的内部状态，必须是一个js对象，存在的意义角色被修改。
prop:
1.prop支持多种数据类型。当prop的类型不是字符串类型时，在JSX中必须使用花括号把prop值包住。
2.在父组件中给prop赋值
class ControlPanel extends Component{
render(){
console.log('enter ControlPanel render');
return(
<div style={style}>
<Counter caption='First'/>
<Counter caption='Second' initValue={10}/>
<Counter caption='Third' initValue={20}/>
<button onClick={()=>this.forceUpdate()}>Click me to re-render!</button>
</div>
);
}
}
在每个Counter实例中，都使用了caption和initValue两个prop。通过名为caption的prop，ControlPanel传递给Counter组件实例说明文字。通过名为initValue的prop传递给Counter组件一个初始的计数值。
3. 在子组件中读取prop值
1）
constructor(props){
super(props);//调用父类的构造函数，必须写在第一行
}
如果在构造函数中没有调用super(props);那么组件实例被构造之后，类实例的所有成员函数就无法通过this.props访问到父组件传递过来的props值。
2）在构造函数中通过参数props获得传入的props值。在其他函数中通过this.props访问传入的prop值。
4. 设置props默认值
Counter.defaultProps={
initValue:0
};
5. propTypes检查
在es6方法定义的组件类中，可以通过增加类的propTypes属性来定义prop规格。
问题：从react15.5.0版本开始，protypes属性被拆分出来了，需要单独安装。
方法：$ npm install prop-types
import PropTypes from 'prop-types';
state：
1.初始化state
通常在组件类构造函数结尾处初始化state
constructor(props){
...
this.state = {
count: props.initValue
}
}
2. 读取和更新state
onClickIncrementButton(){
this.setState({count:this.state.count+1});
}
this.state可以读取到组件的当前state
this.setState();可以改变组件的state
prop和state的对比
prop用于定义外部接口，state用于记录内部状态。
prop的赋值在外部使用组件时，state的赋值在组件内部。
组件不应该改变prop的值，而state存在的目的就是让组件来改变的。
UI=render(data)
React组件就是render函数的角色。