React类组件中super()和super(props)有什么区别?

React中super()和super(props)有什么区别?

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

ES6类的继承

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

javascript 复制代码
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内部也会将其定义在组件实例中

javascript 复制代码
// react内部
const instance = new ExampleComponent(props);
instance.props = props;

所以无论有没有constructor,在render中的this.props都是可以使用的,在react中,使用super(),不传入props,调用this.props为undefined,如下:

javascript 复制代码
class Button extends React.Component{
	constructor(props){
		super(); 
		console.log(this.props); //undefined
	}
}

如果传入props:

javascript 复制代码
class Button extends React.Component{
	constructor(props){
		super(props);
		console.log(this.props); //{}
	}
}

总结区别

不管是super()还是super(props),React内部都会将props赋值给组件实例props属性中,如果只调用super(),那么在构造函数结束之前,使用this.props还是undefined

相关推荐
Mr. Cao code9 小时前
探索OpenResty:高性能Web开发利器
linux·运维·服务器·前端·nginx·ubuntu·openresty
li357416 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj17 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel17 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel17 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
^Rocky18 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
西陵18 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld19 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
笑鸿的学习笔记19 小时前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5