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

本文翻译自：What's the difference between “super()” and “super(props)” in React when using es6 classes?

When is it important to pass props to super() , and why? 什么时候将props传递给super()很重要，为什么？

class MyComponent extends React.Component {
  constructor(props) {
    super(); // or super(props) ?
  }
}

---

#1楼

参考：https://stackoom.com/question/24H8l/使用es-类时-React中的-super-和-super-props-有什么区别

---

#2楼

As per source code 根据源代码

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

you must pass props every time you have props and you don't put them into this.props manually. 您每次拥有道具时都必须传递props并且不要手动将它们放入this.props 。

---

#3楼

Here is the fiddle I've made: jsfiddle.net . 这是我制作的小提琴： jsfiddle.net 。 It shows that props are assigned not in the constructor by default. 它显示道具默认情况下不在构造器中分配。 As I understand they are assinged in the method React.createElement . 据我了解，它们在方法React.createElement中得到了React.createElement 。 Hence super(props) should be called only when the superclass's constructor manually assings props to this.props . 因此，仅当超类的构造函数将props手动分配给this.props时，才应调用super(props) 。 If you just extend the React.Component calling super(props) will do nothing with props. 如果仅扩展React.Component调用super(props)对React.Component 。 Maybe It will be changed in the next versions of React. 也许它将在React的下一版本中进行更改。

---

#4楼

super() is used to call the parent constructor. super()用于调用父构造函数。

super(props) would pass props to the parent constructor. super(props)会将props传递给父构造函数。

From your example, super(props) would call the React.Component constructor passing in props as the argument. 从您的示例中， super(props)将调用React.Component构造函数，并传入props作为参数。

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

---

#5楼

In this example, you are extending the React.Component class, and per the ES2015 spec, a child class constructor cannot make use of this until super() has been called; 在此示例中，您正在扩展React.Component类，并且根据ES2015规范，子类构造函数在调用super()之前不能使用this子类。 also, ES2015 class constructors have to call super() if they are subclasses. 同样，如果ES2015类构造函数是子类，则必须调用super() 。

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

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

By contrast: 相比之下：

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

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

More detail as per this excellent stack overflow answer 根据这个出色的堆栈溢出答案的更多细节

You may see examples of components created by extending the React.Component class that do not call super() but you'll notice these don't have a constructor , hence why it is not necessary. 您可能会看到通过扩展React.Component类而创建的组件示例，这些React.Component没有调用super()但是您会注意到它们没有constructor ，因此为什么没有必要。

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

One point of confusion I've seen from some developers I've spoken to is that the components that have no constructor and therefore do not call super() anywhere, still have this.props available in the render() method. 我从与我交谈过的一些开发人员那里看到的一个混乱点是，没有constructor的组件因此没有在任何地方调用super() ，这些this.props仍然在render()方法中具有this.props 。 Remember that this rule and this need to create a this binding for the constructor only applies to the constructor . 请记住，此规则以及为constructor创建this绑定的需要仅适用于constructor 。

---

#6楼

There is only one reason when one needs to pass props to super() : 只有一个原因需要将props传递给super() ：

When you want to access this.props in constructor. 当您要在构造函数中访问this.props时。

Passing: 通过：

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

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

Not passing: 未通过：

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', … }
    }
}

Note that passing or not passing props to super has no effect on later uses of this.props outside constructor . 请注意，将props传递或不传递给super都不会影响 constructor this.props之外this.props后续使用。 That is render , shouldComponentUpdate , or event handlers always have access to it. 那就是render ， shouldComponentUpdate或事件处理程序始终可以访问它。

This is explicitly said in one Sophie Alpert's answer to a similar question. 这是索菲·阿尔珀（Sophie Alpert）对类似问题的回答中明确指出的。

---

The documentation— State and Lifecycle, Adding Local State to a Class, point 2 —recommends: 建议文档- 状态和生命周期，将局部状态添加到类中，第2点-建议：

Class components should always call the base constructor with props . 类组件应始终使用props调用基本构造函数。

However, no reason is provided. 但是，没有提供任何理由。 We can speculate it is either because of subclassing or for future compatibility. 我们可以推测这是由于子类化还是出于将来的兼容性。

(Thanks @MattBrowne for the link) （感谢@MattBrowne的链接）