zoukankan      html  css  js  c++  java
  • React中Class的概念

    Class的概念

      一、简介

            javaScript是面向对象的编程语言,可以说所以的能够被描述的事、物或抽象的东西,都是可以是对象。而我们记录的对象,会有具有同样的属性和行为。

          为了节省重写相同的代码。就产生了class模板。

          举例:

                 这里有一把枪, 枪的种类很多,有步枪,机关枪,阻击枪....。但是无论怎么说,这些都是枪的概念,如果把这种抽象的概念剥离出来,就是我们经常说的“类”。那么枪有什么特点呢? 威力大小,型号,长度,子弹型号,能承载子弹的数量,枪口半径......ok! 这些一切的一切都是为了描素枪,把这些抽象出来,就组成了“枪类”的属性。枪又能干什么呢?  瞄准,开火,....这些描素都是枪的功能-----把这些抽象出来,即组成了一个类的方法。

       二、Class学习

           二 . 1 Class和function的区别;

              二.1.1  class的特点

                使用class关键字创建的组件,有自己的私有数据(this.state)和生命周期函数,有状态;

                class中有默认执行函数  " constructor (){}  " ,并且还有一个静态属性只属于class的"static"静态属性和静态方法;

                class中的super关键字,是用来继承父类的,属性和方法,如果在子类和父类都有constructor的时候,super则是先执行父类的constructor,再执行子类的constructor。

                “this”指向问题,class中的this指向实例时的对象。

                “static"指向class,它是属于class的数据。

              二.1.2 function的特点

                使用function创建的组件,只有props,没有自己的私有数据和生命周期函数,无状态;

              

            小结:组件有没有状态是根据有没有 ‘state’属性,所以class创建的组件为有状态【有状态】,而用构造函数创建的组件没有状态【无状态】。如果一个组件需要有自己的私有数据,则推荐使用 :class创建的有状态组件;如果一个组件不需要私有的数据,则推荐使用,无状态组件;React 官方说:无状态组件,由于没有自己的state和生命周期函数,所以运行效率会比又状态组件稍微高一些;

           二 . 2 组件中的props和state、data之间的区别。

              二.2.1 props是什么?

                 props是从外部传进来的数据,并且props是只读数据,只可以读取不能重新赋值。

              二.2.2 state和data是什么?

                 state和data都属于组件的私有属性,(通过ajax获取回来的数据一般都为私有数据),并且数据是可以重新赋值。

       三、class的使用

    // 创建一个类存放特有的属性和方法,用来实例对象。
    class Student{
        // 静态属性只属于Student的属性
        static p = "静态属性";
        // 静态方法只属于Student的方法
        static m(){
            console.log("静态方法")
        }
    
        // 构造方法
        constructor(props){
            //实例属性
            this.name=props.name;
            this.age=props.age;
            this.sex=props.sex;
        }
    
        // 实例方法
        students(){
            console.log(this.name)
            console.log(this.age)
            console.log(this.sex)
        }
        xue(){
            console.log(this.name,"学习使我进步!")
        }
        wan(){
            console.log(this.name,"你真调皮~")
        }
        xiao(){
            console.log(this.name,"哈哈哈~")
        }
    
    }
    
    Student.m()
    console.log(Student.p)
    // 实例化对象
    var obj={name:"小红",age:20,sex:"女"}
    var S1 = new Student({...obj});
    // 调用方法
    S1.students()
    S1.xue()
    S1.xiao()
    
    //实例化对象 var obj={name:"小明",age:22,sex:"男"} var S2 = new Student({...obj}); S2.students() S2.wan()

      

      

      

  • 相关阅读:
    什么是微服务架构!
    Redis使用总结 (序列三)
    redis centos linux操作系统安装及集群使用(序列二)
    Python操作Redis缓存数据库
    高并发系统的限流实现方式
    如何服务器的操作系统中的型号
    B8 Concurrent JDK中的乐观锁与原子类
    B7. Concurrent 锁的分类
    B6. Concurrent 内存模型与线程
    B5. Concurrent JVM 锁优化
  • 原文地址:https://www.cnblogs.com/xiaobu-wu/p/12058958.html
Copyright © 2011-2022 走看看