React组件的数据分为两种，prop和state，无论prop或者state的改变，都可能引发组件的重新渲染，那么，设计一个组件的时候，什么时候选择用prop什么时候用state呢？原则很简单，prop是组件的对外接口，state是组件的内部状态，对外用prop，对内用state。
React的prop
prop是property的简写，是从外部传递给组件的数据，一个React组件通过定义自己能够接受的prop就定义了自己的对外公共接口。
每个React组件都是独立存在的模块，组件之外的一切都是外部世界，外部世界就是通过prop来和组件对话的。
读取prop
class Children1 extends React.Component {
render() {
return (
<div>{this.props.a1}</div> //这里props.a1就是Children1相对于父组件的接口
)
}
}
给prop赋值，并接受父组件传的参数
class Rongqi extends React.Component {
render() {
return (
<div>
<h1>{this.state.h1}</h1>
<Children1 a1={'任何数据'} /> //Children1组件调用，a1接受父亲传的参数
</div>
)
}
}
React的state
驱动组件渲染的过程除了prop，还有state，state代表组件的内部状态。由于React不能修改传入的prop，所以需要记录自身数据的变化，就要使用state。
初始化state
constructor(props) {
super(props);
this.state = {
h1: '父亲数据111',
a1: '儿子数据111',
a2: '儿子数据222'
}
}
读取和更新state
改变组件state必须使用this.setState函数，不能直接去修改this.state。
class Rongqi extends React.Component {
constructor(props) {
super(props);
this.state = {
h1: '父亲数据111',
a1: '儿子数据111',
a2: '儿子数据222'
}
}
render() {
return (
<div>
<h1>{this.state.h1}</h1> //子组件Children2向父组件传数据
<Children1 a1={this.state.a1} /> //父组件向子组件Children1传数据
<Children2 a2={this.state.a2} setstate={this.setState.bind(this)} />
</div>
)
}
}
class Children1 extends React.Component {
render() {
return (
<div>{this.props.a1}</div>
)
}
}
class Children2 extends React.Component {
constructor(props) {
super(props);
this.state = {
a2: '2222儿子的数据'
}
}
render() {
return (
<div onClick={() => {
this.props.setstate({ h1: '我是儿子的数据' })
}}>{this.props.a2}</div>
)
}
}
prop和state的对比
- prop用于定义外部接口，state用于记录内部状态；
- prop的赋值在外部世界使用组件时，state的赋值在组件内部；
- 组件不应该改变prop的值，state存在的目的就是让组件来改变的。
组件的state就相当于组件的记忆，其存在意义就是被修改，每一次通过this.setState就改变了组件的状态，然后通过渲染过程把这种变化体现出来。
