赋予代码灵魂 , 追求极致性能

Hey guys, Here is Vtrois's Blog !

结合ES6理解react 组件中的constructor和super

react组件中的constructor(props)

我们来看一个例子
import React,{Component} from 'react';
export default class Example extends Component{
   constructor(props){
    super(props);
   }
}
  1. 我们知道super是继承constructor的参数,但是为什么在react里面,有一些组件使用了super(props),而有一些没有写呢?
  2. 还有在es6里就只是写了super(),这些区别在哪呢?
  3. 以及这里的这个constructor(props)…super(props)是起到什么作用呢?
答:
  1. 如果你用到了constructor就必须写super(),是用来初始化this的,可以绑定事件到this上;
  2. 这里的Example是Comonent这个基类的子类,使用extends进行混合继承,而在ES6中,在子类的constructor中必须先调用super才能引用this;
  3. 如果你在constructor中要使用this.props,就必须给super加参数:super(props);
  4. 无论有没有constructor,在render中this.props都是可以使用的,这是React自动附带的;

错误的理解:有些人错误的认为原因是constructor会覆盖父类的constructor,导致你父类构造函数没执行,所以手动执行下super(),这是错误的,来看下面的例子。

ES6中的class, extends, super

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        console.log(this.type + ' says ' + say)
    }
}

let animal = new Animal()
animal.says('hello') //animal says hello

class Cat extends Animal {
    constructor(){
        super()
        this.type = 'cat'
    }
}

let cat = new Cat()
cat.says('hello') //cat says hello
  1. 上面代码首先用class定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。

  2. Class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。上面定义了一个Cat类,该类通过extends关键字,继承了Animal类的所有属性和方法。

  3. super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

  4. ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。

点赞

发表评论

电子邮件地址不会被公开。