在学习react的时候,其中在构造函数里面,有一个super(props),具体是什么意思呢。

其中 super语法来自es6,其语法如下:

super([arguments]);
// 调用 父对象/父类 的构造函数 super.functionOnParent([arguments]);
// 调用 父对象/父类 上的方法

我们要理解react中的super(props),,就先看一下,es6的构造函数constructor

看如下js

		class Person{
constructor(props){
console.log("参数:"+props);
console.log("初始化 Person constructor");
this.name = "Person";
}
} class Child extends Person{
getName(){
console.log("名字为:"+this.name);
}
} var child = new Child();
child.getName();

  在js中,类在 new 实例化的时候,系统会默认调用constructor函数,在 Child类中,我们没有定义构造函数,那个系统会默认有一个constructor,并且会在里面调用super();  当我们定义了构造函数之后,就使用我们定义的。所以我们自己定义的构造函数必须要调用super()对父类进行初始化。

在react中,如果不需要在 constructor里面使用 props,是可以不用写 constructor的

这个两种调用和不调用的区别,

1、如果不需要 在 constructor里面使用 this.props ,是可以不用给super传props的

2、如果不要在constructor写逻辑,仅仅是写一个super(props),实际上整个constructor都没有写的必要

3、目前react支持一种新的写法,没有constructor情况下面的初始化数据,非常方便,这种写法,阮一峰老师的es6入门文档里面有提及,详细的自己去看

  

react的super(props)的更多相关文章

  1. React中super(props)和super()以及不写super()的区别

    一.constructor()和super()的基本含义 constructor() -- 构造方法 这是ES6对类的默认方法,通过new命令生成对象实例自动调用的方法.并且,该方法是类中必须要有的, ...

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

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

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

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

  4. React关于constructor与super(props)之间的相爱相杀

    我们先把菜鸟教程的一段代码拿过来分析一下.下面这段代码是用了将生命周期方法添加到类中实现时钟效果. // 将生命周期方法添加到类中 class Clock extends React.Componen ...

  5. react super() and super(props)

    subclass: subclass is a class that extends another class. 即子类. In ES2015, to use 'this' in subclasse ...

  6. 【译】为什么要写super(props)

    译注: 原文地址 https://overreacted.io/why-do-we-write-super-props/ 正文 我听说Hooks是新的热点.好笑的是,我想通过描述一些关于class组件 ...

  7. react native中props的使用

    react native中props的使用 一.props的使用 1:父组件传递的方式 在子组件中可以用this.props访问到父组件传递的值 <View> <Text> { ...

  8. React中render Props模式

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

  9. 为什么react的组件要super(props)

    https://segmentfault.com/q/1010000008340434

随机推荐

  1. 使用 Markdown 写技术博客,踩过的 6个坑

    目录 Markdown 特性 Markdown 简介 常用语法 为什么流行 设计哲学 工具支持 版本演进 标准化之路 踩过了坑 平台帮助文档 语法差异 显示效果 我的最佳实践 摘要:本文记录我在使用 ...

  2. [No000014F]计算机编程语言家族史

    https://www.levenez.com/lang/

  3. [No0000114]远程桌面剪贴板无法同步本机,无法复制粘贴问题解决

    远程桌面无法与桌面共享复制内容(远程桌面复制之后,无法在本地桌面粘贴.反之亦然.),这时候需要杀掉一个进程并重新启动.[重启 rdpclip.exe] 1.在远程桌面中右键点击,选择启动任务管理器: ...

  4. MyBatis时间比较

    <if test="submitTime!=null and submitTime!=''"> AND DATE_FORMAT(sc.submit_time, '%Y- ...

  5. qemu无界面启动,并重定向输出到终端

    qemu-system-x86_64  -kernel bzImage -initrd /mnt/rootfs.cpio.gz  /dev/zero -m 2G -nographic -append ...

  6. Linux之sed、awk

    Linux 之AWK 命令 简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在对数据分析并生成报告时,显得尤为强大. 简单来说awk就是把文件逐行的读入,以空格默认分隔 ...

  7. FW--tomcat bi-laternal https and keytool

    说明:按照本文中以下内容配置https,猫server.xml中clientAuth=false,单向验证的时候,网页中可以访问:当clientAuth=true进行双向验证的时候,网页中不可以访问: ...

  8. [development][profile][dpdk] KK程序性能调优

    KK程序: 1. 两个线程,第一个从DPDK收包,通过一个ring数据传递给第二个线程.第二个线程将数据写入共享内存. 2. 第二个内存在发现共享内存已满时,会直接丢弃数据. 3. 线程二有个选项de ...

  9. 状压dp的另一种形式

    做的那么多都是一些比较怎么说呢,都是在数网格一类的题目之中,这些题目有些有点固定的套路,而一些需要状态压缩的题目呢,则么是真正对状态转移的考验. 这道题呢,被彻底打脸了,以后一定要任性一点一道题做不出 ...

  10. 内部排序->选择排序->简单选择排序

    文字描述 简单排序的基本思想是:每一趟在n-i+1(i=1,2,…,n)个记录中选取关键字最小的记录作为有序列表中的第i个记录. 示意图 略 算法分析 简单排序算法中,所需进行记录移动的操作次数较少, ...