React:state与setState

在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的地方是构造函数。