React中super(props)和super()以及不写super()的区别
一.constructor()和super()的基本含义
constructor() —— 构造方法
这是ES6对类的默认方法,通过new命令生成对象实例自动调用的方法。并且,该方法是类中必须要有的,如果没有显示定义,则会默认添加空的constructor()方法。
super() —— 继承
在class方法中,继承是使用extends关键字来实现继承的。子类必须在constructor()中调用super()方法,否则新建实例时会报错。
报错的原因是,子类是没有自己的this对象的,它只能继承父类的this对象,然后对其进行加工,而super()就是将父类中的this对象继承给子类的。没有super,子类就得不到this对象。
ES5和ES6关于继承的实现不同之处
在ES5中,当一个构造函数前面加上new的时候,其实一共做了四件事:
1.生成一个空的对象并将其作为this
2.将空对象的__proto__指向构造函数的prototype
3.运行该构造函数
4.如果构造函数没有return或者return一个返回this值是基本类型,则返回this,如果return一个引用类型,则返回这个引用类型
简单解释,就是在ES5的继承中,先创建子类的实例对象this,然后再将父类的方法添加到this上,而ES6采用的是先创建父类的实例this(故要先调用super()方法),然后再用子类的构造函数修改this
3.super(props) —— super() —— 以及不写super()的区别
如果你用到了constructor就必须写super(),是用来初始化this的,可以绑定事件到this上
如果你在constructor中要使用this.props,就必须给super加参数,super(props)
###(注意:无论有没有constructor,在render中this.props都是可以使用的,这是react自动附带的)
如果没用到constructor,是可以不写的,react会默认添加一个空的constructor
React中super(props)和super()以及不写super()的区别的更多相关文章
- React中render Props模式
React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写 ...
- react中对props.children进行操作
之前写的更多的时候是直接使用简写 {props.children} 这样就可以了,但是当有时候需要对传入的子组件进行一些操作的时候需要用到React.Children方法 {React.Childre ...
- React中this.props的主要属性
this.props主要包含:history属性.location属性.match属性 ①history属性又包含 ②location属性又包含 ③match属性又包含
- React中props
今天让我们开启新的篇章好吧,来搞一搞React,以下所有操作都是我个人的一些理解,如果有错吴还请指出,想要看更全的可以去React官网可能一下子好吧 昨天按摩没到位,导致今天身体不太行,撸码千万别苦了 ...
- 5.React中组件通信问题
1.父组件传递值给子组件 想必这种大家都是知道的吧!都想到了用我们react中的props,那么我在这简单的写了小demo,请看父组件 class Parent extends Component{ ...
- react中constructor和super()以及super(props)的区别。
react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 const ...
- 如何理解react中的super() super(props)
class WebSite extends React.Component { constructor() { super(); this.state = { name: "菜鸟教程&quo ...
- React中构造函数constractor,为什么要用super(props)
前言 昨天晚上公司组织了前端分享会,在讲到React Class方法的时候,有的同学提出,为什么构造函数一定要super,我记得我之前看的黑马视频里面有讲过,就再翻出来 内容 React官方中文文档里 ...
- react super中的props
有的小伙伴每次写组件都会习惯性在constructor和super中写上props,那么这个是必要的吗?? 首先要明确很重要的一点就是: 可以不写constructor,一旦写了constructor ...
随机推荐
- P1886 滑动窗口
题目描述 现在有一堆数字共N个数字(N<=10^6),以及一个大小为k的窗口.现在这个从左边开始向右滑动,每次滑动一个单位,求出每次滑动后窗口中的最大值和最小值. 例如: The array i ...
- Powershell快速入门
Powershell快速入门 来源: https://blog.csdn.net/u011054333/article/details/72567590 https://blog.csdn.net/u ...
- 【题解】HNOI2018寻宝游戏
太厉害啦……感觉看到了正解之后整个人都惊呆了一样.真的很强%%% 首先要注意到一个性质.位运算列与列之间是不会相互影响的,那么我们先观察使一列满足条件的操作序列需要满足什么条件.&0时,不论之 ...
- [ZJOI2008]骑士 DP dfs
---题解--- 题解: 观察题面可以很快发现这是一棵基环内向树(然而并没有什么用...) 再稍微思考一下,假设将这个环中的任意一点设为root,然后去掉root到下面的特殊边(即构成环的那条边),那 ...
- BZOJ5323 [Jxoi2018]游戏 【数论/数学】
题目链接 BZOJ5323 题解 有一些数是不能被别的数筛掉的 这些数出现最晚的位置就是该排列的\(t(p)\) 所以我们只需找出所有这些数,线性筛一下即可,设有\(m\)个 然后枚举最后的位置 \[ ...
- 分享一些JavaScript简易小技巧
特性检测而非浏览器检测 因为某某特性某浏览器不支持,我们经常的做法是在代码中直接先做浏览器判断如: 1 if(Broswer.isFirfox){ 2 //do something 3 } 其 ...
- [SDOI2016] 排列计数 (组合数学)
[SDOI2016]排列计数 题目描述 求有多少种长度为 n 的序列 A,满足以下条件: 1 ~ n 这 n 个数在序列中各出现了一次 若第 i 个数 A[i] 的值为 i,则称 i 是稳定的.序列恰 ...
- java摘要
**idea 注册 Licensed to ilanyu License Server: http://idea.iteblog.com/key.php 1.文件上传下载 http://blog.cs ...
- org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type [com.oskyhang.gbd.service.UserService] found for dependency: expected at least 1 bean which qualifies as aut
spring中一个符号的错误居然让我浪费了四五个小时才找出来,不得不给自己了两个耳光.. 由于新建项目与原来项目的目录结构有所不同,copy过来的配置文件,有些地方修改的不彻底,导致spring扫描注 ...
- php windows rename 中文出错
php windows rename 中文出错 rename()函数可以重命名文件.目录等,但是要注意目的地和起始地址的编码. 比如:我的PHP文件编码是UTF-8,但是在WINDOW系统中中文默认编 ...