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就改變了組件的狀態，然后通過渲染過程把這種變化體現出來。
