Detailed explanation of the difference between super and super (props) in React class components

Inheritance of ES6 class

In ES6, the inheritance of the class is implemented through the extends keyword, as follows:

class sup{
	constructor(name){
		 = name;
	}
	printName(){
		();
	}
}
class sub extends sup{
	constructor(name,age){
		super(name);
		 = age;
	}
	printAge(){
		();
	}
}	
let tom = new sub("tom",20);
(); //tom
(); //20

The super keyword is used to call the parent class. Super replaces the parent class's construction function, which is equivalent to calling (this, name). If the subclass does not apply to the super keyword, it will report an error. The reason for the error is that the subclass does not have its own this object. It only inherits this object of the parent class and then processes it. You cannot use this first and then call super

Inheritance of class components

Class component inheritance, so if constructor is used, you must write super() to initialize this. When calling super, props should generally be passed as a parameter. If it is not passed in, react will also define it in component instance.

// react internalconst instance = new ExampleComponent(props);
 = props;

So whether there is or not there is a constructor, the render can be used. In react, use super(), do not pass in props, and the call is undefined, as follows:

class Button extends {
	constructor(props){
		super(); 
		(); //undefined
	}
}

If you pass in props:

class Button extends {
	constructor(props){
		super(props);
		(); //{}
	}
}

Summarize the difference

Whether it is super() or super(props), React will assign props to the component instance props property. If only super() is called, then before the constructor ends, use undefined

The above is a detailed explanation of the difference between super() and super(props) in React class components. For more information about the difference between React super() and super(props) please pay attention to my other related articles!