这里我们不会在构造函数中获取这个，所以它将返回undefined，但是我们可以在构造函数外获取这个

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();我们可以得到这个，但是这个。Props在构造函数中没有定义。除了构造函数，还有这个。Props不会返回undefined。

如果我们使用super(道具)，那么我们可以使用这个。Props在构造函数中的值

苏菲·阿尔珀特的回答

如果你想用这个。构造函数中的道具，需要传递 为超级喝彩。否则，没关系，因为React会设置.props 调用后立即从外部调用实例 构造函数。

只有一个原因需要将props传递给super():

当你想访问这个的时候。构造函数中的道具。

传递:

class MyComponent extends React.Component {    
    constructor(props) {
        super(props)

        console.log(this.props)
        // -> { icon: 'home', … }
    }
}

不通过:

class MyComponent extends React.Component {    
    constructor(props) {
        super()

        console.log(this.props)
        // -> undefined

        // Props parameter is still available
        console.log(props)
        // -> { icon: 'home', … }
    }

    render() {
        // No difference outside constructor
        console.log(this.props)
        // -> { icon: 'home', … }
    }
}

注意，传递或不传递道具给super对以后的使用没有影响。构造函数外的道具。也就是说，渲染、shouldComponentUpdate或事件处理程序总是可以访问它。

这一点在Sophie Alpert对一个类似问题的回答中得到了明确的表达。

文档-状态和生命周期，向类添加本地状态，第2点建议:

类组件应该总是使用props调用基构造函数。

但是，没有提供理由。我们可以推测，这要么是因为子类化，要么是为了未来的兼容性。

(感谢@MattBrowne提供的链接)

在React组件中实现constructor()函数时，super()是必需的。请记住，你的MyComponent组件正在扩展或借用React的功能。组件基类。

这个基类有一个自己的constructor()函数，里面有一些代码，用来为我们设置React组件。

当我们在MyComponent类中定义constructor()函数时，实际上是在重写或替换React中的constructor()函数。组件类，但我们仍然需要确保这个constructor()函数中的所有设置代码仍然被调用。

为了确保React。组件的constructor()函数被调用时，我们调用super(props)。Super (props)是父构造函数()函数的引用，仅此而已。

每次在基于类的组件中定义constructor()函数时，都必须添加super(props)。

如果我们不这样做，我们将看到一个错误，说我们必须调用super(props)。

定义这个constructor()函数的全部原因是初始化状态对象。

所以为了初始化我们的state对象，在super调用下面我将写:

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。当然这只是一个例子，所以我并没有给state对象分配一个键/值对，它只是一个空对象。

当你把道具传递给super时，道具被分配给this。看看下面的场景:

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

当你这样做的时候:

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

在本例中，您正在扩展React。组件类，并且根据ES2015规范，子类构造函数在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创建的组件的例子。不调用super()的组件类，但你会注意到它们没有构造函数，这就是为什么没有必要。

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

我从与我交谈过的一些开发人员那里看到的一个困惑是，那些没有构造函数，因此在任何地方都不调用super()的组件仍然有这个。render()方法中可用的道具。记住，这个规则和这个需要为构造函数创建一个this绑定，只适用于构造函数。

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

Super (props)将把道具传递给父构造函数。

从你的例子中，super(props)会调用React。组件构造函数将props作为参数传入。

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