React-----学习笔记-----组件的 state 和 setState(七)

• 一个组件的显示形态是可以由它数据状态和配置参数决定的。一个组件可以拥有自己的状态，React.js 的state 用来存储这种可变化的状态

import React, {Component} from 'react'
export default class LikeButton extends Component{
    constructor () {
        super()
        this.state = {isLiked: false}
    }
    handleClick = () => {
        this.setState({
            isLiked: !this.state.isLiked
        })
    }
    render () {
        return (
            <div>
                <button onClick={this.handleClick}>
                    {this.state.isLiked ? '取消' : '点赞'}
                </button>
            </div>
        )
    }
}

• isLiked存放在实例的state对象当中，这个对象在构造函数里面初始化。这个组件的 render函数内，会根据组件的 state 的中的isLiked不同显示“取消”或“点赞”内容,并且给 button 加上了点击的事件监听

setState

• 在 handleClick事件监听函数里面调用了 setState 函数，每次点击会更新 isLiked属性为!isLiked，这样就可以做到点赞和取消功能
• setState 方法由父类Component所提供。当我们调用这个函数的时候，React.js 会更新组件的状态state ，并且重新调用 render方法，然后再把 render 方法所渲染的最新的内容显示到页面上,React.js 提供的setState方法，它接受一个对象或者函数作为参数

setState 接受函数参数

• setState 可以接受一个函数作为参数。React.js 会把上一个 setState 的结果传入这个函数，就可以使用该结果进行运算、操作，然后返回一个对象作为更新 state 的对象：

this.setState((prevState) => {
    return { count: 0 }
})
this.setState((prevState) => {
    return { count: prevState.count + 1 }
})
this.setState((prevState) => {
    return { count: prevState.count + 2 }
})