0 条评论

为什么react的组件要super(props)

摘自 https://segmentfault.com/q/1010000008340434 （非原创）

如图，我知道supert是继承constructor的参数，但是为什么在react里面，有一些组件使用了super(props)，而有一些没有写，还有在es6里就只是写了supert()，这些区别在哪呢？以及这里的这个constructor(props)...super(props)是起到什么作用呢

这个是全代码：

 

已采纳

1. 调用super的原因：在ES6中，在子类的constructor中必须先调用super才能引用this

2. super(props)的目的：在constructor中可以使用this.props

3. 最后，可以看下React文档，里面有一段

Class components should always call the base constructor with props.

zhangfe 1k 声望

 

原来如此，谢谢了。

 

— any · 2月14日

1 

根本原因是constructor会覆盖父类的constructor，导致你父类构造函数没执行，所以手动执行下。

— brook · 2月18日

 

 

假设在es5要实现继承,首先定义一个父类:

//父类
function sup(name) { this.name = name } //定义父类原型上的方法 sup.prototype.printName = function (){ console.log(this.name) }

现在再定义他sup的子类，继承sup的属性和方法:

function sub(name,age){
    sup.call(this,name) //调用call方法,继承sup超类属性 this.age = age } sub.prototype = new sup //把子类sub的原型对象指向父类的实例化对象，这样即可以继承父类sup原型对象上的属性和方法 sub.prototype.constructor = sub //这时会有个问题子类的constructor属性会指向sup，手动把constructor属性指向子类sub //这时就可以在父类的基础上添加属性和方法了 sub.prototype.printAge = function (){ console.log(this.age) }

这时调用父类生成一个实例化对象:

    let jack = new sub('jack',20)
    jack.printName()    //输出 : jack jack.printAge() //输出 : 20

这就是es5中实现继承的方法。
而在es6中实现继承:

    class sup {
        constructor(name) {
            this.name = name } printName() { console.log(this.name) } } class sub extends sup{ constructor(name,age) { super(name) this.age = age } printAge() { console.log(this.age) } } let jack = new sub('jack',20) jack.printName() //输出 : jack jack.printAge() //输出 : 20

对比es5和es6可以发现在es5实现继承，在es5中实现继承:

1. 首先得先调用函数的call方法把父类的属性给继承过来

2. 通过new关键字继承父类原型的对象上的方法和属性

3. 最后再通过手动指定constructor属性指向子类对象

而在es6中实现继承，直接调用super(name)，就可以直接继承父类的属性和方法，所以super作用就相当于上述的实现继承的步骤，不过es6提供了super语法糖，简单化了继承的实现

 

 

 

— yuchav · 7月29日

 

为什么最后再通过手动指定constructor属性指向子类对象

 

— happyhuizai · 1 天前

 

 

如果你用到了constructor就必须写super(),是用来初始化this的，可以绑定事件到this上;
如果你在constructor中要使用this.props,就必须给super加参数：super(props)；
（无论有没有constructor，在render中this.props都是可以使用的，这是React自动附带的；）
如果没用到constructor,是可以不写的,直接：

class HelloMessage extends React.Component{ render (){ return ( <div>nice to meet you! {this.props.name}</div> ); } } //不过这种只是用render的情况，使用一般的ES6函数写会更简便： const HelloMessage = (props)=>( <div>nice to meet you! {this.props.name}</div> )