八.this.state
组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI
<!DOCTYPE html>
<html>
<head>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var LikeButton = React.createClass({
getInitialState:function(){
return {like:false}
},
handleClick:function(){
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(
<LikeButton />,
document.getElementById("example")
)
</script>
</body>
</html>
上面代码是一个LikeButton组件。它的 getInitialState 用于定义初始值。也就是一个对象，这个对象可以通过 当用户点击组件，导致状态变化，this.state 属性读取this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
