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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/643682.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【操作系统】实验三 编译 Linux 内核

🕺作者: 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux 😘欢迎关注:👍点赞🙌收藏✍️留言 🏇码字不易,你的👍点赞🙌收藏❤️关注对我真的很重要&…

基于springboot+vue的在线商城系统(前后端分离)

博主主页:猫头鹰源码 博主简介:Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容:毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

git的使用(idea中)

文章目录 Git分布式版本控制工具1、目标2、概述2.1、开发中的实际场景2.2、版本控制器的方式2.3、SVM2.4、Git2.5、Git工作流程 3、Git安装与常用命令3.1、Git环境配置3.1.1 下载与安装3.1.2基本配置3.1.3为常用指令配置别名(可选)3.1.4解决GitBash乱码问题 3.2、获取本地仓库3…

Ubuntu20.04安装cuda12.11

显卡驱动 首先就是安装显卡驱动,我是双3090,不知道为什么,官网死活安不上,最后从软件更新那里直接安装上了,绷不住了 cuda 首先从官网下载runfile文件 安装的时候记得驱动和Kernel Objects 和 nvidia-fs不选 然后…

第11次修改了可删除可持久保存的前端html备忘录:将样式分离,可以自由秒添加秒删除样式

第11次修改了可删除可持久保存的前端html备忘录&#xff1a;将样式分离&#xff0c;可以自由秒添加秒删除样式 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"…

蜜雪冰城、古茗组团上市,打响新一轮供应链攻防战

2024年首个工作日&#xff0c;新式茶饮品牌古茗、蜜雪冰城不约而同地向港交所提交上市申请书&#xff0c;“上市”替代“万店”成为新式茶饮行业的热词。 1月2日&#xff0c;古茗控股有限公司向港交所提交上市申请书&#xff0c;联席保荐人为高盛和瑞银集团&#xff0c;计划部…

达梦数据库Windows安装教程:从准备到完成

目录 博客前言&#xff1a; 一.达梦数据库安装前准备 1.下载 2.进行解压 装载 二.正式安装 选择语言与时区 安装向导 许可证协议 验证 Key 文件 选择安装组件 选择安装目录 安装前小结 数据库安装 数据库安装完成 三.配置实例 选择操作方式 创建数据库模板 选…

理德外汇:日本央行下调2024财年通胀预期,日本股汇上演“过山车”

2024年首次货币政策会议&#xff0c;日本央行依旧“按兵不动”&#xff0c;维持收益率曲线控制&#xff08;YCC&#xff09;及负利率政策不变&#xff0c;基本符合市场预期。与此同时&#xff0c;日本央行下调了2024财年核心CPI预期&#xff0c;以及2023年GDP预期。日本股汇上演…

Mysql插入带有引号的字符串数据

在MySQL中处理带有引号的字符串数据&#xff1a;深入探讨与最佳实践 在MySQL数据库操作中&#xff0c;插入带有引号的字符串数据是一个常见任务。然而&#xff0c;由于引号在SQL中的特殊作用&#xff0c;处理不当可能导致数据插入失败或产生非预期结果。本文将深入探讨如何在M…

【操作系统】实验四 增加Linux系统调用

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的很重要&…

低噪声放大器LNA 之 噪声系数

​ 一、噪声系数的定义 在定义噪声系数之前&#xff0c;先看一个放大器输入输出端信噪比&#xff08;信号功率与噪声功率之比&#xff0c;写作SNR&#xff09; 对比图&#xff1a; ​​从上图可用看出&#xff0c;从输入端到输出端&#xff0c;信号和噪声功率都得到了放大&…

【每日一题】2865. 美丽塔 I-2024.1.24

题目: 2865. 美丽塔 I 给你一个长度为 n 下标从 0 开始的整数数组 maxHeights 。 你的任务是在坐标轴上建 n 座塔。第 i 座塔的下标为 i ,高度为 heights[i] 。 如果以下条件满足,我们称这些塔是 美丽 的: 1 <= heights[i] <= maxHeights[i]heights 是一个 山脉 …

#Uniapp:onPullDownRefresh下拉刷新 和阻止stopPullDownRefresh

页面下拉刷新周期 局部配置页面下拉刷新 "pages": [ //pages数组中第一项表示应用启动页&#xff0c;参考&#xff1a;https://uniapp.dcloud.io/collocation/pages{"path": "pages/message/message","style": {"navigationBar…

解析 linux 进程 pid 0, pid 1, pid 2 关系及启动过程

三个进程的关系 Linux 中有pid 0, pid 1 和 pid 2 三个特殊的进程。 pid 0&#xff0c;即 “swapper” 进程&#xff0c;是 pid 1 和 pid 2 的父进程。 pid 1&#xff0c;即 “init” 进程&#xff0c;所有用户空间的进程均派生自该进程。 pid 2&#xff0c;即 “kthreadd” 进…

使用 vLLM 部署本地 LLM 指南

目录 vLLM 安装与模型下载离线批量推理OpenAI 兼容服务器 参考资料&#xff1a; vLLM GitHub首页 vLLM 官方文档 vLLM 安装与模型下载 vLLM 安装&#xff1a;直接 pip install 即可 我选取了 OpenChat-3.5-0106 模型&#xff0c;这个模型是由 mistralai/Mistral-7B-v0.1 微…

docker设置代理解决内网pull外网镜像

目录 Docker 配置代理的缘由 通过dockerd配置实现代理 通过container配置实现代理 参考文献 Docker 配置代理的缘由 如何在内网环境内环境内Pull外网registry&#xff0c;或者反过来想要Pull公司Registry镜像&#xff1f;存在上述需求的朋友可以尝试以下方法进行docker代理…

java访问mdb文件隐藏表报错解决办法:user lacks privilege or object not found: MSYSOBJECTS

java访问mdb文件隐藏表报错解决办法&#xff1a; UCAExc:::5.0.1 user lacks privilege or object not found: MSYSOBJECTS 在地址url中添加;sysSchematrue 在sql语句中添加sys.MSysObjects 写法 在地址url中添加;sysSchematrue 在sql语句中添加sys.MSysObjects 写法数据库访…

高校实验室智能管理

运行环境&#xff1a; jdk7tomcat7mysqleclipse 技术&#xff1a; springhibernatestruts2jspjquery 功能介绍&#xff1a; 一套完整的实验室管理系统&#xff0c;系统支持用户的注册登陆&#xff0c;系统分为学生&#xff0c;教师&#xff0c;管理员三个角色&#xff0c;…

[BUG] Authentication Error

前言 给服务器安装了一个todesk&#xff0c;但是远程一直就是&#xff0c;点击用户&#xff0c;进入输入密码界面&#xff0c;还没等输入就自动返回了 解决 服务器是无桌面版本&#xff0c;或者桌面程序死掉了&#xff0c;重新安装就好 sudo apt install xorg sudo apt inst…

数据结构<1>——树状数组

树状数组&#xff0c;也叫Fenwick Tree和BIT(Binary Indexed Tree)&#xff0c;是一种支持单点修改和区间查询的&#xff0c;代码量小的数据结构。 那神马是单点修改和区间查询&#xff1f;我们来看一道题。 洛谷P3374(模板): 在本题中&#xff0c;单点修改就是将某一个数加上…