簡介
React的組件簡單理解起來其實(shí)就是一個(gè)函數(shù)尸昧，這個(gè)函數(shù)會接收props和state作為參數(shù)，然后進(jìn)行相應(yīng)的邏輯處理爆侣，最終返回該組件的虛擬DOM展現(xiàn)幢妄。在React中數(shù)據(jù)流向是單向的，由父節(jié)點(diǎn)流向子節(jié)點(diǎn)乎赴，如果父節(jié)點(diǎn)的props發(fā)生了改變置吓，那么React會遞歸遍歷整個(gè)組件樹，重新渲染所有使用該屬性的子組件友题。那么props和state究竟是什么戴质？它們在組件中起到了什么作用？它們之間又有什么區(qū)別和聯(lián)系呢戈抄？接下來我們詳細(xì)看一下后专。
Props
props其實(shí)就是properties的縮寫，可以理解為組件的屬性裸诽，你可以使用props給組件傳遞任意類型的數(shù)據(jù)（操作起來就像我們在HTML標(biāo)簽內(nèi)部定義某些自定義屬性一樣）型凳，也可以添加事件處理器甘畅，例：
//定義屬性變量和事件處理方法
var myDefineProps = [{ name : "first prop" }];
var clickHandler = function(){
...
}
// 直接設(shè)置props
<MyComponent myDefineProps = { myDefineProps } onClick = { clickHandler } />
這里還允許我們使用組件的一個(gè)實(shí)例方法setProps來設(shè)置組件的props往弓，但是需要注意的是蓄氧，必須在子組件上或者組件樹外調(diào)用setProps，切勿在組件內(nèi)部調(diào)用this.setProps缴淋，例：
var myDefineProps = [{ name : "first prop" }];
var myComponent = React.render({
<MyComponent />,
document.querySelector("body")
});
// 外部調(diào)用setProps設(shè)置props
myComponent .setProps({ myDefineProps : myDefineProps });
我們可以通過this.props來訪問props泄朴，但絕對不可以通過這種方式去修改props（理解為this.prop是只讀的即可）祖灰，一個(gè)組件絕對不可以自己修改自己的props。我們還可以通過propType去約束規(guī)范prop的類型局扶，可以通過getDefaultProps方法設(shè)置prop的默認(rèn)值三妈。（可參見我的上一篇筆記）
State
state是用來描述組件視圖狀態(tài)的。其與props的區(qū)別在于畴蒲，state是隨著用戶交互而產(chǎn)生變化的狀態(tài)模燥，props一旦定義就不再發(fā)生改變，例：
var SecondComponent= React.createClass({
getInitialState : function() {
return {liked : false};
},
handleClick : function(event) {
this.setState({liked : !this.state.liked});
},
render : function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return ( <p onClick = {this.handleClick}> You {text} this. Click to toggle. </p> );
}
});
ReactDOM.render( <SecondComponent />, document.querySelector("body"));
上例中 getInitialState 方法用于定義初始狀態(tài)么翰，也就是一個(gè)對象辽旋，這個(gè)對象可以通過 this.state 屬性讀取。當(dāng)用戶點(diǎn)擊組件固该，導(dǎo)致狀態(tài)變化糖儡，this.setState 方法就修改狀態(tài)值怔匣，this.setState的每次調(diào)用都會觸發(fā) this.render 方法桦沉，進(jìn)而再次渲染組件纯露。
注意：不可直接修改 this.state代芜，要通過 this.setState 去修改。
參考
【1】《React引領(lǐng)未來的用戶界面開發(fā)框架》
【2】 React 入門實(shí)例教程
