React中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{
// 静态属性
static p = "静态属性";
// 静态方法
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,"哈哈哈~")
}
}
//子类继承父类
class Child extends Student{
constructor(props){
super(props);
}
}
// 实例化对象
var obj={name:"小红",age:20,sex:"女"}
var S1 = new Student({...obj});
// 调用方法
S1.students()
S1.xue()
S1.xiao()
// Student的属性方法
Student.m()
console.log(Student.p)
// 继承父类
var obj1={
name:"小明",
age:21,
sex:"男"
}
var S2 = new Child({...obj1});
// 调用方法
S2.students()
S2.xue();
S2.xiao()