React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
------以上是菜鸟教程对React State的描述
我的理解就是，不刷新当前的页面的状态下，只操作要改变的那一块内容。
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}>学习react难吗?{text}!</p>);
}
});
ReactDOM.render(
<MyReact/>,
document.getElementById('demo')
);
上面的栗子，其实也不复杂，首先创建一个输出render。然后创建一个组件MyReact（组件首字母大写），并且引入到render里，运行看一下，这个组件输出了，继续下面的步骤，在组件里创建getInitialState默认state，
因为是设置布尔值，所以return的是带｛｝花括号的函数。并且在render函数里var一个text。并且｛text｝引入。现在在输出还是正常的。现在开始最后的步骤，设置onClick事件，当然名字随便取，比如oClick:function(){}，中间是冒号（：），然后在想触发事件的地方，写上onClick=｛this.oClick｝,这一切就好了。现在点击一下触发事件位置就有状态的切换了。
比较复杂一点的
<!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>
网友评论