一.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()的区别的更多相关文章

  1. React中render Props模式

    React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写 ...

  2. react中对props.children进行操作

    之前写的更多的时候是直接使用简写 {props.children} 这样就可以了,但是当有时候需要对传入的子组件进行一些操作的时候需要用到React.Children方法 {React.Childre ...

  3. React中this.props的主要属性

    this.props主要包含:history属性.location属性.match属性 ①history属性又包含 ②location属性又包含 ③match属性又包含

  4. React中props

    今天让我们开启新的篇章好吧,来搞一搞React,以下所有操作都是我个人的一些理解,如果有错吴还请指出,想要看更全的可以去React官网可能一下子好吧 昨天按摩没到位,导致今天身体不太行,撸码千万别苦了 ...

  5. 5.React中组件通信问题

    1.父组件传递值给子组件 想必这种大家都是知道的吧!都想到了用我们react中的props,那么我在这简单的写了小demo,请看父组件 class Parent extends Component{ ...

  6. react中constructor和super()以及super(props)的区别。

    react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 const ...

  7. 如何理解react中的super() super(props)

    class WebSite extends React.Component { constructor() { super(); this.state = { name: "菜鸟教程&quo ...

  8. React中构造函数constractor,为什么要用super(props)

    前言 昨天晚上公司组织了前端分享会,在讲到React Class方法的时候,有的同学提出,为什么构造函数一定要super,我记得我之前看的黑马视频里面有讲过,就再翻出来 内容 React官方中文文档里 ...

  9. react super中的props

    有的小伙伴每次写组件都会习惯性在constructor和super中写上props,那么这个是必要的吗?? 首先要明确很重要的一点就是: 可以不写constructor,一旦写了constructor ...

随机推荐

  1. P3375【模板】KMP字符串匹配

    前言: 额……很久以前就写了KMP模板(只是半知不解),话说看完了manacher,再回过头看KMP,是真TM简单啊!字符串专题整体较抽象,所以必须牢记思路并时常复习 题目描述 如题,给出两个字符串s ...

  2. 使用JMeter进行一次简单的带json数据的post请求测试

    使用JMeter进行一次简单的带json数据的post请求测试 原文:https://www.cnblogs.com/summer-mm/p/7717812.html 1.启动jmeter:在bin下 ...

  3. MAVEN 编译打包测试 指定本地jar

    转载自:http://penuel.iteye.com/blog/1766102 maven对于互联网开发,进行版本管理有着不可或缺的作用;  而经常开发的程序猿直接联调或者依赖未上线或deploy的 ...

  4. java消息中间件入门

    消息中间件来解耦服务调用 比如1个登录系统,登录的话需要调用很多系统的其他服务,如果中间调用失败,可能会导致登录信息一致无法返回,同时也增加了系统的耦合度.而用消息中间件的话,则是不发送服务到其他系统 ...

  5. [洛谷P2730] 魔板 Magic Squares

    洛谷题目链接:魔板 题目背景 在成功地发明了魔方之后,鲁比克先生发明了它的二维版本,称作魔板.这是一张有8个大小相同的格子的魔板: 1 2 3 4 8 7 6 5 题目描述 我们知道魔板的每一个方格都 ...

  6. WebComponents001

    Sample1: ShadowDom 隔离style,替换显示内容 <button>Hello, world!</button> <script> var host ...

  7. bzoj 1692: [Usaco2007 Dec]队列变换 ——二分+hash

    Description FJ打算带他的N(1 <= N <= 30,000)头奶牛去参加一年一度的“全美农场主大奖赛”.在这场比赛中,每个参赛者都必须让他的奶牛排成一列,然后领她们从裁判席 ...

  8. <script>中的async与defer属性

    1.script元素中的defer属性 1.1说明 使用该属性可以使脚本延迟到文档完全被解析和显示之后再按照原本的顺序执行,即告诉浏览器立即下载脚本,但延迟执行,该属性只对外部脚本有效 1.2使用方法 ...

  9. HBase表操作

    相对于0.9.X版本,在HBase1.X版本对内部API改动比较大,例如连接部分类库变更,如下: 连接获取:org.apache.hadoop.hbase.HBaseConfiguration.cre ...

  10. 图像转换为二进制文件存入DSP6748

    本文为原创作品,转载请注明出处 欢迎关注我的博客:http://blog.csdn.net/hit2015spring和http://www.cnblogs.com/xujianqing/ 这篇博客主 ...