【Web前端问题】为什么react的组件要super(props)

图片描述

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

这个是全代码:

图片描述

回答:

假设在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) // super代表的事父类的构造函数

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是代替的是父类的构造函数,super(name)相当于sup.prototype.constructor.call(this, name).

回答:

如果你用到了constructor就必须写super(),是用来初始化this的,可以绑定事件到this上;
如果你在constructor中要使用this.props,就必须给super加参数:super(props)
(无论有没有constructor,在renderthis.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>

)

回答:

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

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

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

Class components should always call the base constructor with props.

以上是 【Web前端问题】为什么react的组件要super(props) 的全部内容, 来源链接: utcz.com/a/144234.html

回到顶部