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

最新推荐文章于 2024-01-02 15:35:39 发布

weixin_30710457

最新推荐文章于 2024-01-02 15:35:39 发布

阅读量214

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhansu/p/6907342.html

本文解释了在React中为何需要在组件构造函数中调用super(props)。通过ES5和ES6两种不同继承方式的对比，阐述了super(props)在React组件中确保正确初始化this.props的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　对这个问题纠结了好几天，一直没时间深入研究。在segmentfault看到有人提出了同样的问题，下面这篇SF给出了解释。为什么react的组件要super(props)

解释一：

调用super的原因：在ES6中，在子类的constructor中必须先调用super才能引用this
super(props)的目的：在constructor中可以使用this.props
最后，可以看下React文档，里面有一段

Class components should always call the base constructor with 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) this.age = age } printAge() { console.log(this.age) } } let jack = new sub('jack',20) jack.printName() //输出 : jack jack.printAge() //输出 : 20