React类组件中super()和super(props)有什么区别？-Toy模板网

这篇具有很好参考价值的文章主要介绍了React类组件中super()和super(props)有什么区别？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

回答思路：说说ES6类的继承–>说说类组件的继承–>总结区别

ES6类的继承

在ES6中，通过extends关键字实现类的继承，如下：

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

通过super关键字实现调用父类，super代替父类的构建函数，相当于调用sup.prototype.constructor.call(this,name),如果子类不适用super关键字会报错，报错的原因是子类没有自己的this对象，他只是继承父类的this对象，然后对其加工，也不能先用this，再调用super

类组件的继承

类组件继承React.Component，因此如果用到constructor就必须写super（），才能初始化this，在调用super的时候一般要传入props作为参数，如果不传进去，react内部也会将其定义在组件实例中

// react内部
const instance = new ExampleComponent(props);
instance.props = props;

所以无论有没有constructor，在render中的this.props都是可以使用的，在react中，使用super（），不传入props，调用this.props为undefined，如下：

class Button extends React.Component{
	constructor(props){
		super(); 
		console.log(this.props); //undefined
	}
}

如果传入props：

class Button extends React.Component{
	constructor(props){
		super(props);
		console.log(this.props); //{}
	}
}

总结区别

不管是super（）还是super（props），React内部都会将props赋值给组件实例props属性中，如果只调用super()，那么在构造函数结束之前，使用this.props还是undefined文章来源地址https://www.toymoban.com/news/detail-820583.html

到了这里，关于React类组件中super()和super(props)有什么区别？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！