为什么react的组件要super(props)
摘自 https://segmentfault.com/q/1010000008340434 (非原创)
如图,我知道supert是继承constructor的参数,但是为什么在react里面,有一些组件使用了super(props),而有一些没有写,还有在es6里就只是写了supert(),这些区别在哪呢?以及这里的这个constructor(props)...super(props)是起到什么作用呢
这个是全代码:
已采纳
- 调用super的原因:在ES6中,在子类的
constructor
中必须先调用super
才能引用this
super(props)
的目的:在constructor
中可以使用this.props
- 最后,可以看下React文档,里面有一段
Class components should always call the base constructor with props.
zhangfe1k 声望
原来如此,谢谢了。
— 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中实现继承:
- 首先得先调用函数的call方法把父类的属性给继承过来
- 通过new关键字继承父类原型的对象上的方法和属性
- 最后再通过手动指定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>
)