功能1: 负责数据管理
3个基础操作:
①初始化
getInitialState:function(){
return {count:0,price:100}
}
②读
this.state.count
③写
this.setState({count:2})
this.setState({count:2},()=>{
//状态在写操作成功之后,会执行的处理函数
})
注意事项:
如果一个组件中 有多个状态,在处理状态的写操作时,需要更新哪个状态直接设置,其它的默认保持不变
功能2: 状态的数据具有绑定的效果
一旦将状态的数据给视图使用,当状态发生变化时,视图也会跟着自动更新
<script type='text/babel'>
var MyComponent = React.createClass({
// 组件内部数据的初始化
getInitialState:function(){
return {count:0,price:50}
},
handleClick:function(){
//修改状态的值
var nowCount = this.state.count;
var priceNum = this.state.price;
nowCount++;
priceNum--;
this.setState({count:nowCount,price:priceNum},()=>{
console.log(this.state.count);
});
},
render:function(){
return <div>
<p>{this.state.count}</p>
<p>{this.state.price}</p>
<button onClick={this.handleClick}>clickMe</button>
</div>
}
})
ReactDOM.render(
<MyComponent></MyComponent>,
document.getElementById('example')
)
</script>