在react中，state用来设置状态，setState用来改变状态。
看如下代码：
class Like extends Component {
constructor() {
super()
this.state = {isLike:false}
}
ClickChangeLike() {
this.setState({
isLike:!this.state.isLike
})
}
render() {
return(
<button onClick={this.ClickChangeLike.bind(this)}>
{this.state.isLike?'取消收藏':'收藏'}
</button>
)
}
}
在这里我做了一个简单的收藏按钮，点击这个按钮就可以实现收藏与取消收藏的功能。一开始我将state设置为false，如何才能让每次点击都改变按钮的功能呢？答案很简单，那就是把改变state。setState就刚好可以实现这个功能：this.setState({!this.state.isLike})。
好了，问题来了，我直接把原来的this.state = isLike:false改为this.state = isLike:true不就可以了吗？真的可以吗？我们来试一下：
class Like extends Component {
constructor() {
super()
this.state = {isLike:false}
}
ClickChangeLike() {
this.setState({
isLike:true
})
}
render() {
return(
<button onClick={this.ClickChangeLike.bind(this)}>
{this.state.isLike?'取消收藏':'收藏'}
</button>
)
}
}
图片.png
图片.png
图片.png
结果并不是如我们预期的那样，收藏之后我们再次点击就无法改变取消收藏的状态了。
图片.png
为什么？这是因为我们把改变后的状态给定死了，所以无法达到我们的预期。
关于state，我们还应该注意下面这些内容：
不要直接修改状态，例如，这不会重新渲染组件！！！
this.state.comment = 'Hello'
上面的做法是错误的，我们应该使用setState来改变组件的状态。
this.setState({comment:'Hello'})
记住！唯一可以指定this,state的地方是构造函数。
