八.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
是会随着用户互动而产生变化的特性。