react学习笔记1–class的用法和继承

之前或者多或者少的看过少量react的代码，也自己写了少量demo，会用少量简单的语法，最近疫情闲在家中，打算系统的学习一下，在此记录少量学习笔记。

关于class写法

相比于ES5中通过构造函数生成实例对象，ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

在此之前，我们通常的构造函数的写法

function Person(name, age){  this.name = name  this.age = age}Person.staticAttribute = '构造函数的【静态属性/静态方法】，不可被new的对象访问'Person.prototype = {  say: function(){    console.log('通过new出来的对象可以访问到的属性叫做【实例属性/实例方法】', this.name, this.age)  }}var xiaoming = new Person('小明', 18)console.log(xiaoming)console.log(xiaoming.staticAttribute)xiaoming.say()

打印出来的结果

在写构造函数的时候，通常会涉及到【构造函数】、【静态属性】、【实例属性/实例方法】、【实例对象】这些东西。

这里用class语法来实现一次上面的功能。

class Person {  constructor (name, age) { // 当我们不写constructor时会有一个默认的constructor空函数    this.name = name    this.age = gae  }  // 公告静态属性用static  static staticAttribute = '构造函数的【静态属性/静态方法】，不可被new的对象访问'  static staticFunction = function () {    console.log('我是静态方法')    }  // 这里公告【实例属性/实例方法】就简单了很多  say() {    console.log('通过new出来的对象可以访问到的属性叫做【实例属性/实例方法】', this.name, this.age)  }}

这里打印出Person和他的prototype

打印结果

再来new出class定义的构造函数

var xiaoming = new Person('小明', 18)console.log(xiaoming)console.log(xiaoming.staticAttribute)xiaoming.say()

打印结果

class被称作语法糖，其原理还是使用构造函数来实现的

关于extends继承

写react使用最多的一个方法就是class xxx extends xxx{}
这里涉及到了继承的写法

class Person {  constructor(name, age){    this.name = name    this.age = age  }}class Man extends Person {  manFun() {    console.log('Man独有的【实例方法】')  }}var he = new Man('辣个男人', 777)console.log(he)

打印的结果

总结：class ... extends ...语句是ES6的语法糖，简化了构造函数的生成，也简化了继承父类的流程，同时对于代码的可读性也有了提升。

其实我们在写react组件时就是在写一个构造函数，面向对象的优势在react里表现的很显著，比较适合业务的设计模式也会在react中发挥的很好。