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}}

 

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://www.cnblogs.com/oumannrinn/p/15881252.html