组件的状态(this.state)：
组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI
getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取
<script type="text/babel">
var Myfirst = React.createClass({
getInitialState : function(){
return {
color : "red",
title : "哈哈，这是我的第一个状态"
}
},
render : function(){
var styleObj = {
color : this.state.color
}
return (
<div>
<div style={styleObj}>{this.state.title}</div>
</div>
);
}
})
var myComponent = ReactDOM.render(
<Myfirst />,
document.getElementById('example'),
function(){
console.log("我已经渲染完了");
}
);
console.log(myComponent);
myComponent.setState({title:});
</script>
我们可以通过setState来修改状态的值。
<script type="text/babel">
var Myfirst = React.createClass({
getInitialState : function(){
return {
clickCount : ,
}
},
myClicks : function(){
this.setState({
clickCount :
})
},
render : function(){
return (
<div>
<p>点击下面的按钮</p>
<button onClick = {this.myClicks}>点击我</button>
<p>{this.state.clickCount}</p>
</div>
);
}
})
var myComponent = ReactDOM.render(
<Myfirst />,
document.getElementById('example'),
function(){
console.log("我已经渲染完了");
}
);
</script>
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。