react属性state

1、在类里面，可以定义

• 构造函数

• class Demo {
         constructor(name,age){
                this.name=name
                this.age=age
                }

   

• 一般方法（在类的原型对象上）

• class Demo {
       constructor(name,age){
            this.name=name
            this.age=age
  }
  //一般方法
  speak(){
       console.log('my name is wang')
  }
  }

   

• 赋值语句（给实例添加属性，在类的实例上）

• class  Demo {
      constructor(name,age){
              this.name=name
              this.age=age
  }
  
  speak(){
     console.log('I am 19 years old')
  }
  
  //为实例对象添加一个名为weight的属性，值为50
  weight=50

   

• 利用赋值语句创建的函数（在类的实例上）

• class Demo {
      constructor(name,age){
            this.name=name
            this.age=age
     }
  
     speak(){
             console.log('My name is wang')
  }
  
  
  //使用这种方法创建的函数直接在实例对象身上，并且采用的是箭头函数，其中的this指向实例对象
  say = ()=>{
         console.log('我是实例对象上的一个方法')
  }
  }

  2、在类式组件里面使用state属性

   class  Demo extends  React.Component{
          state={
                  name:‘wang’,
                  age:18
                  }



         show=()=>{
            const {name,age}=this.state
            console.log(name,age

}
          render(){
                  return <div>

                           <h1>点击按钮显示姓名和年龄</h1>
                           <button onClick={this.show}>显示</button>
                          </div>
         }
   
}

ReactDOM.render(<Demo/>,document.getElementById('test'))

3,关于解构赋值

只有数组和类可以解构赋值

//类的解构赋值
class prop = {
          name:'computer',
          brand:'lenoveo',
          price:{
                   first:1000,
                   second:2000,
                   third:3000
                   }
                   }

//单层解构赋值
const {name}=prop
//双层解构赋值，first是变量，price不是变量
const {price:{first}}
//双层解构赋值并重命名
const {price:{first:value}}