在React构造函数中调用super()的作用是什么？

Question

从文档学习React，遇到了这个例子：

class Square extends React.Component {
  constructor() {
    super();
    this.state = {
      value: null,
    };
  }
  ...
}

根据Mozilla的说法，super允许您在构造函数中使用this。除了可以访问父类方法之外，是否还有其他原因要使用独立的super？但在React中，仅调用super()本身是否还有其他用途？

根据Mozilla，super关键字在构造函数中用于访问父类属性和方法。在React中，如果需要在constructor中访问this.props或this.state，那么必须在任何其他语句之前调用super。这是因为在constructor内部使用this之前，必须先调用super。因此，即使没有访问父类方法的需求，也必须调用super()。

- stackjlei

Answer 1

super() 会调用其 parent 类的 constructor。当您需要从父类访问某些变量时，这是必需的。

在 React 中，当您使用 props 调用 super 时，React 会通过 this.props 在整个组件中使 props 可用。请参见下面的示例 2。

without super()

class A {
  constructor() {
    this.a = 'hello'
  }
}

class B extends A {
  constructor(){
    console.log(this.a) //throws an error
  }
}

console.log(new B())

使用 super()

class A {
  constructor(props) {
    this.props = props
  }
}

class B extends A {
  constructor(props) {
    super(props)
    console.log(this.props)
  }
}

console.log(new B({title: 'hello world'}))

- Pranesh Ravi

---

比起被采纳的答案，你提供了更清晰的解释。你可以把你的回答变得更简短、更直白。 - a20

谢谢你的回答，所以它与原型链的行为不同，后者会以某种方式深入获取原型函数。 - Webwoman

你为什么在super示例中删除了A中的字符串？https://jsfiddle.net/vbuoc378/1/ - Ian Smith

我有一种直觉，好像这不是必要的。但如果不这样做，那就只是在做一个巨大的假设（隐式地将props传递到父类中，实际上假设它将是相同的）。非常感谢您的答案，解释得非常清楚。+1 - Mario Matos

Answer 2

只有在React组件中存在构造函数时，才会调用super()。例如，下面的代码不需要super：

class App extends React.component {
    render(){
        return <div>Hello { this.props.world }</div>;
    }
}

然而，如果我们有一个构造函数，那么super()是必需的：

class App extends React.component {
    constructor(){
        console.log(this) //Error: 'this' is not allowed before super()

    }
}

this 不能在super()之前使用的原因是，如果没有调用super()，那么this将未初始化。然而，即使我们不使用this，在构造函数中仍需要一个super()，因为ES6类构造函数必须调用super()，如果它们是子类。因此，只要有构造函数，您就必须调用super()。（但是，子类不一定要有构造函数。）

如果我们需要使用this.props，则在构造函数中调用super(props)，例如：

class App extends React.component{
    constructor(props){
        super(props);
        console.log(this.props); // prints out whatever is inside props

    }
}

我希望我能够让它更加清晰易懂。

- Shubham Khatri

---

那么在组件内部拥有构造函数的主要目的是在组件初始化后立即执行某些操作吗？super将允许您1.) 访问this和2.) 如果它以props作为参数，则访问其父级props？ - stackjlei

super关键字允许您访问父组件的props吗？ - stackjlei

你将无法使用super访问父组件的props。 - Shubham Khatri

为什么子类不默认调用super()呢？这毫无意义，是一行不必要的代码。 - Philip Rego

Answer 3

值得一提的是，super()是一个来自继承概念的超类构造函数的简写。

默认情况下，类Square继承其超类React.Component的构造函数。

通过声明一个新的constructor()方法，可以重写继承的构造函数。

如果意图是扩展而不是覆盖超类构造函数，则必须使用super()显示地调用它。

- rnbrady

Answer 4

在实现 React.Component子类 的构造函数时，应该在任何其他语句之前调用 super(props)。否则，在构造函数中，this.props 将是 undefined，这可能会导致错误。"最初的回答"

- sg28

---

Source - aeyalcinoglu

Answer 5

在JavaScript中，super指的是父类构造函数。

重要的是，在调用父构造函数之前，你不能在构造函数中使用this。JavaScript不会让你这样做： 但我们忘了一个函数在super()调用之前被调用，没有机会设置this.name。所以this.name甚至还没有定义！正如你所看到的，这样的代码可能非常难以理解。 为了避免这样的陷阱，JavaScript强制要求如果你想在构造函数中使用this，你必须先调用super。让父级完成它的工作！这个限制也适用于作为类定义的React组件：

- gaya3_96

Answer 6

在React中，super()不是必需的，但在ES6子类中是强制性的。

- Raviprajna

Answer 7

使用this关键字之前，我们应该使用super关键字。为什么？因为super用于调用父类的constructor。

现在为什么我们需要调用父级的constructor？答案是为了初始化我们通过this关键字引用的属性值。

- Naveen Raju