本文翻譯自：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的鏈接）