使用es6类时，React中的“ super（）”和“ super（props）”有什么区别？

这里我们不会在构造函数中得到它，所以它将返回未定义，但是我们将能够在构造函数之外获取它

class MyComponent extends React.Component {
  constructor() {
    console.log(this); // Reference Error i.e return undefined
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

如果我们使用super（），那么我们也可以在构造函数中获取“ this”变量

class MyComponent extends React.Component {
  constructor() {
    super();
    console.log(this); // this logged to console
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

因此，当我们使用super（）时；我们将能够获取它，但是this.props将在构造函数中未定义。但是除构造函数外，this.props不会返回undefined。

如果我们使用super（props），那么我们也可以在构造函数中使用this.props值

索菲·阿尔珀特的答案

如果要在构造函数中使用this.props，则需要将props传递给super。否则没关系，因为React在调用构造函数后立即从外部在实例上设置.props。

对于React版本16.6.3，我们使用super（props）初始化状态元素名称：this.props.name

constructor(props){
    super(props);        
}
state = {
  name:this.props.name 
    //otherwise not defined
};

这是我制作的小提琴：jsfiddle.net。它显示默认情况下，道具未分配在构造函数中。据我了解，它们是在方法中使用的React.createElement。因此，super(props)仅当超类的构造函数手动分配props给时才应调用this.props。如果您只是扩展React.Component通话，super(props)则对道具不会有任何作用。也许它将在React的下一版本中进行更改。

super() 用于调用父构造函数。

super(props)将传递props给父构造函数。

从您的示例中，super(props)将调用React.Component传入的构造函数props作为参数。

有关更多信息super：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super

Dan Abramov撰写了有关此主题的文章：

为什么我们要编写超级道具？

其要点是养成通过它避免这种情况的习惯，这很有帮助，说实话，我认为这种情况不太可能发生：

// Inside React
class Component {
  constructor(props) {
    this.props = props;
    // ...
  }
}

// Inside your code
class Button extends React.Component {
  constructor(props) {
    super(); // 😬 We forgot to pass props
    console.log(props);      // ✅ {}
    console.log(this.props); // 😬 undefined 
  }
  // ...
}

根据源代码

function ReactComponent(props, context) {
  this.props = props;
  this.context = context;
}

您props每次有道具时都必须通过，并且不要this.props手动将其放入。

When implementing the constructor() function inside a React component, super() is a requirement. Keep in mind that your MyComponent component is extending or borrowing functionality from the React.Component base class.

This base class has a constructor() function of its own that has some code inside of it, to setup our React component for us.

When we define a constructor() function inside our MyComponent class, we are essentially, overriding or replacing the constructor() function that is inside the React.Component class, but we still need to ensure that all the setup code inside of this constructor() function still gets called.

So to ensure that the React.Component’s constructor() function gets called, we call super(props). super(props) is a reference to the parents constructor() function, that’s all it is.

We have to add super(props) every single time we define a constructor() function inside a class-based component.

If we don’t we will see an error saying that we have to call super(props).

The entire reason for defining this constructor() funciton is to initialize our state object.

因此，为了初始化我们的状态对象，在超级调用下面，我要编写：

class App extends React.Component {
  constructor(props) {
      super(props);

      this.state = {};
   }

  // React says we have to define render()
  render() {
    return <div>Hello world</div>;
  }
};

因此，我们定义了constructor()方法，通过创建JavaScript对象，将属性或键/值对分配给它，将结果分配给来初始化状态对象this.state。当然，现在这只是这里的一个示例，因此我并没有真正为状态对象分配键/值对，它只是一个空对象。

在此示例中，您正在扩展React.Component类，并且根据ES2015规范，子类构造函数无法使用，this直到super()被调用为止。同样，如果ES2015类构造函数super()是子类，则必须调用它们。

class MyComponent extends React.Component {
  constructor() {
    console.log(this); // Reference Error
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

相比之下：

class MyComponent extends React.Component {
  constructor() {
    super();
    console.log(this); // this logged to console
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

根据这个出色的堆栈溢出答案的更多细节

您可能会看到通过扩展React.Component未调用的类而创建的组件示例，super()但是您会注意到这些示例没有constructor，因此为什么没有必要。

class MyOtherComponent extends React.Component {
  render() {
    return <div>Hi {this.props.name}</div>;
  }
}

从与我交谈过的一些开发人员那里我看到的一个混乱点是，没有任何组件，constructor因此无法super()在任何地方调用的组件，仍然this.props在该render()方法中可用。请记住，此规则以及为此创建this绑定的需求constructor仅适用于constructor。

传递props给时super，道具将分配给this。看一下以下情况：

constructor(props) {
    super();
    console.log(this.props) //undefined
}

但是，无论何时做：

constructor(props) {
    super(props);
    console.log(this.props) //props will get logged.
}