React 把組件看成是一個狀態(tài)機(jī)（State Machines）隆箩。通過與用戶的交互响驴，實(shí)現(xiàn)不同狀態(tài)，然后渲染 UI捶码，讓用戶界面和數(shù)據(jù)保持一致羽氮。
React 里，只需更新組件的 state惫恼，然后根據(jù)新的 state 重新渲染用戶界面（不要操作 DOM）档押。
------以上是菜鳥教程對React State的描述
我的理解就是，不刷新當(dāng)前的頁面的狀態(tài)下，只操作要改變的那一塊內(nèi)容令宿。
var MyReact = React.createClass({
getInitialState:function(){
return {hard:false}
},
oClick:function(){
this.setState({hard:!this.state.hard})
},
render:function(){
var text = this.state.hard?'難':'不難';
return (<p onClick={this.oClick}>學(xué)習(xí)react難嗎?{text}!</p>);
}
});
ReactDOM.render(
<MyReact/>,
document.getElementById('demo')
);
上面的栗子叼耙，其實(shí)也不復(fù)雜，首先創(chuàng)建一個輸出render粒没。然后創(chuàng)建一個組件MyReact（組件首字母大寫）筛婉，并且引入到render里，運(yùn)行看一下癞松，這個組件輸出了爽撒，繼續(xù)下面的步驟，在組件里創(chuàng)建getInitialState默認(rèn)state拦惋，
因?yàn)槭窃O(shè)置布爾值匆浙，所以return的是帶｛｝花括號的函數(shù)。并且在render函數(shù)里var一個text厕妖。并且｛text｝引入∈啄幔現(xiàn)在在輸出還是正常的。現(xiàn)在開始最后的步驟言秸，設(shè)置onClick事件软能，當(dāng)然名字隨便取，比如oClick:function(){}举畸，中間是冒號（：）查排，然后在想觸發(fā)事件的地方，寫上onClick=｛this.oClick｝,這一切就好了〕冢現(xiàn)在點(diǎn)擊一下觸發(fā)事件位置就有狀態(tài)的切換了跋核。
比較復(fù)雜一點(diǎn)的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<title></title>
</head>
<body>
<div id="demo"></div>
<script type="text/babel">
var Name = React.createClass({
render:function(){
return <span style={myStyle}>{this.props.name}</span>;
}
});
var Address = React.createClass({
getInitialState:function(){
return {ad:true}
},
dbClick:function(){
this.setState({ad:!this.state.ad});
},
render:function(){
var address = this.state.ad?'中國':'美國';
return <span style={poin} onClick={this.dbClick}>{address}</span>
}
});
var Info = React.createClass({
render:function(){
return(
<div>
姓名:<Name name={this.props.name}/><br/>
來自:<Address address={this.address} />
</div>
)
}
})
var myStyle = {
fontSize:30,
color:"red"
}
var poin = {
cursor:'pointer'
}
var All = React.createClass({
render:function(){
return(
<div>
<Info name={this.props.name} address= {this.address}/>
國籍:<Address address={this.address}/>
</div>
)
}
})
ReactDOM.render(
<All name='張三'/>,
document.getElementById('demo')
);
</script>
</body>
</html>
