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

合集 - React学习记录(23)

1.React学习笔记01-React的基本认识2023-10-162.React学习笔记02-创建React项目2023-10-163.React学习笔记03-编写第一个react应用程序2023-10-164.React学习笔记04-JSX语法2023-10-175.React学习笔记05-类组件2023-10-196.React学习笔记06-函数式组件2023-10-197.React学习笔记07-组件嵌套2023-10-198.React学习笔记08- 组件的样式2023-10-199.React学习笔记09- 事件处理2023-10-2010.React学习笔记10- Ref的应用2023-10-20

11.React学习笔记11-状态(state)2023-10-20

12.React学习笔记12-循环渲染2023-10-2013.React学习笔记13-小案例toList(状态,状态维护,条件渲染渲染)2023-10-2114.React学习笔记14-dangerousSetinnerHtml指令2023-10-2115.React学习笔记15-setState同步异步问题2023-10-3116.React学习笔记16-属性props2023-11-0317.React学习笔记17-属性VS状态2023-11-0318.React学习笔记18-非受控组件2023-11-0419.React学习笔记19-受控组件2023-11-0420.React学习笔记20-父子通信(子传父)2023-11-0821.React学习笔记21-非父子通信(状态提升)2023-11-0822.React学习笔记22-订阅发布模式2023-11-0823.React学习笔记23-非父子通信(订阅发布模式)2023-11-08

收起

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

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

 定义状态的方法

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

/* 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>
        )
    }
}