在 React 构造函数中调用 super() 有啥作用？

Posted 2023-02-22

【中文标题】在 React 构造函数中调用 super() 有啥作用？

【英文标题】：What does calling super() in a React constructor do?在 React 构造函数中调用 super() 有什么作用？

【发布时间】：2017-03-18 22:11:09

【问题描述】：

从docs 学习 React 并遇到了这个例子：

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

根据Mozilla，super允许你在构造函数中使用this。还有其他理由使用独立的super（我知道super 也允许您访问父类的方法）但是使用React 是否还有其他仅调用super() 的用例？

【参考方案1】：

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

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

没有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'))

希望这会有所帮助！

【讨论】：

+1 比接受的答案更清晰的解释。你也可以让你的答案更简短、更中肯。

感谢您的回答，因此它是一种不同于原型链的行为，它将以某种方式深入获取原型函数

为什么在超级例子中去掉了A中的字符串？ jsfiddle.net/vbuoc378/1

我有一种直觉，好像这不是必需的。但如果不是，它只是做了一个巨大的假设（将 props 隐式传递给父类，有效地假设它是相同的）。感谢这个答案非常清楚。 +1

【参考方案2】：

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 class constructors MUST call super if they are subclasses。因此，只要您有构造函数，就必须调用super()。 （但子类不一定要有构造函数。）

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

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

    

我希望我能说清楚。

【讨论】：

那么在组件内部有一个构造函数的主要目的是在组件初始化后立即采取一些行动吗？然后 super 将允许您 1.) 访问 this 和 2.) 如果它以 props 作为参数，访问其父 props？

super允许你访问父组件的props吗？

你将无法使用 super 访问父组件 props

如果是子类，为什么不默认调用super()？没有意义。不必要的线路。

【参考方案3】：

值得补充的是，super() 是超类构造器的缩写，是inheritance 的一个概念。

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

可以通过声明一个新的constructor() 方法来覆盖继承的构造函数。

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

【参考方案4】：

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

【参考方案5】：

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

重要的是，在调用父构造函数之前，你不能在构造函数中使用 this。 JavaScript 不会让你： 但是我们忘记了，如果在 super() 调用有机会设置 this.name 之前调用了一个函数。所以 this.name 甚至还没有定义！如您所见，这样的代码可能很难考虑。 为了避免这样的陷阱，JavaScript 强制要求如果你想在构造函数中使用 this，你必须先调用 super。让家长自己做吧！而且这个限制也适用于定义为类的 React 组件：

【参考方案6】：

超级(); react 不需要，但是 ES6 子类强制要求

【参考方案7】：

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

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