React学习笔记11-状态(state)

状态就是组件的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态

的目的就是为了在不同的状态下使组件的显示不同(自己管理)

 定义状态的方法

 可以在构造函数中定义也可以直接在类中通过变量的形式来定义

/* eslint-disable eqeqeq */
import React, { Component } from 'react'

export default class App extends Component {
    /* 
      写法一
      state = {
          myshow: false,
      }
    */
    //写法二
    constructor() {
        super()
        this.state = {
            myshow: false,
            myname: 'zzz',

        }
    }
}

将状态和视图绑定的方法

通过{this.state.xxx}即可访问到对应的状态

/* eslint-disable eqeqeq */
import React, { Component } from 'react'

export default class App extends Component {
    /* 
      写法一
      state = {
          myshow: false,
      }
    */
    //写法二
    constructor() {
        super()
        this.state = {
            myshow: false,
            myname: 'zzz',

        }
    }
    render() {

        return (
            <div>
                <h1>欢迎来到React开发</h1>
                <div>{this.state.myname}</div>
            </div>
        )
    }
}

修改状态的方法

this.state 是纯js对象,在vue中，data属性是利用 Object.defineProperty 处理过的，更改data的数据的时候会触发数据的 getter 和 setter从而触发对应的回调来更新视图 ，

但是React中没有做这样的处理，如果直接更改的话，react是无法得知的，所以，需要使用特殊的更改状态的方法 setState 。

/* eslint-disable eqeqeq */
import React, { Component } from 'react'

export default class App extends Component {
    /* 
      写法一
      state = {
          myshow: false,
      }
    */
    //写法二
    constructor() {
        super()
        this.state = {
            myshow: false,
            myname: 'zzz',

        }
    }
    render() {

        return (
            <div>
                <h1>欢迎来到React开发</h1>
                <div>{this.state.myname}</div>
                <button onClick={
                    () => {
                        this.setState({
                            myshow: !this.state.myshow,
                            myname: '小明'
                        })
                    }
                }>{this.state.myshow ? '取消收藏' : '收藏'}</button>
            </div>
        )
    }
}