（八）setState 的使用

// 1. 创建一个类组件
class Mood extends React.Component {
    constructor(props) {
        super(props)
        // 初始化状态
        this.state = {
            isMood: true
        }
        // 改变 this 指向
        this.demo = this.demo.bind(this)
    }

    render() {
        // 结构赋值 读取状态
        const { isMood } = this.state
        return <h1 onCLick={demo}>今天心情很{isMood ? '开心' : '伤心'}</h1>
    }

    demo() {
        // demo 是放在哪里的？ ---- 放在 Mood 的原型对象上
        // 获取原来的 isMood 的值
        const isMood = this.state.isMood

        // 严重注意：状态不可以直接更改，需要借助一个内置的 Api
        this.state.isMood = !isMood
        console.log(this.state.isMood)
    }
}

// 2. 渲染组件到页面
ReactDom.render(<Mood/>, document.getElmentById('test'))

class Mood extends React.Component {
    ...

    demo() {
        const isMood = this.state.isMood
        this.setState({isMood: !isMood})
    }
}

// 2. 渲染组件到页面
ReactDom.render(<Mood/>, document.getElmentById('test'))