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

news/2024/7/15 19:05:15 标签: javascript, react.js, 前端

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

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

回答思路:说说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


http://www.niftyadmin.cn/n/5343610.html

相关文章

【Vue3】readonly 与 shallowReadonly

readonly 作用:用于创建一个对象的深只读副本。 用法: const original reactive({ ... }); const readOnlyCopy readonly(original);特点: 对象的所有嵌套属性都将变为只读。任何尝试修改这个对象的操作都会被阻止(在开发模式下…

代码随想录刷题

数组篇 704. 二分查找 class Solution:def search(self, nums: List[int], target: int) -> int:left 0right len(nums) - 1while(left < right):mid (left right) // 2if nums[mid] target:return midelif nums[mid] > target:right mid - 1elif nums[mid] &l…

linux创建临时大文件

以下几种方法在Linux系统上创建一个1GB大小的大文件&#xff1a; 1、使用dd命令 dd if/dev/zero of/path/to/your/file bs1M count1024这个命令会从/dev/zero设备读取数据&#xff08;即空数据&#xff09;&#xff0c;并将其写入指定的文件中。bs参数指定了每次写入的块大小…

怎么移除WordPress后台工具栏“新建”菜单?如何添加“新建文章”菜单?

默认情况下&#xff0c;WordPress后台顶部管理工具栏有左侧有一个“新建”菜单&#xff0c;而且还有下拉菜单文章、媒体、链接、页面和用户等&#xff0c;不过我们平时用得最多的就是“新建文章”&#xff0c;虽然可以直接点击“新建”&#xff0c;或点击“新建 – 文章”&…

天天酷跑-C语言搭建童年游戏(easyx)

游戏索引 游戏名称&#xff1a;天天酷跑 游戏介绍&#xff1a; 本游戏是在B站博主<程序员Rock>的视频指导下完成 想学的更详细的小伙伴可以移步到<程序员Rock>视频 【程序员Rock】C语言项目&#xff1a;手写天天酷跑丨大一课程设计首选项目&#xff0c;手把手带你用…

中国大模型迎来“95后” 百度奖学金发掘百位“未来AI技术领袖”

在人工智能掀起的科技革命和产业变革浪潮下&#xff0c;大模型成为最受关注的研究领域。1月22日&#xff0c;第十一届百度奖学金颁奖典礼在北京举行&#xff0c;来自全球顶尖高校及科研机构的10位“未来AI技术领袖”脱颖而出&#xff0c;他们平均年龄仅27岁&#xff0c;其中8人…

Socket实现服务器和客户端

Socket 编程是一种用于在网络上进行通信的编程方法&#xff0c;以下代码可以实现在不同主机之间传输数据。 Socket 编程中服务器端和客户端的基本步骤&#xff1a;服务器端步骤&#xff1a; 1.创建 Socket&#xff1a; int serverSocket socket(AF_INET, SOCK_STREAM, 0);…

RC滤波电路的原理

RC滤波电路分为低通滤波和高通滤波 低通滤波通过低频信号 看上面这两个电路 先分析低通滤波 由于电容C具有隔直通交的特性&#xff0c;所以输入的高频分量相当于经过电阻R后直接对地短接&#xff0c;并没有输出到后端负载上&#xff0c;只有低频的输入分量才会输出到后端。 电…