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

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

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

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

看如下js

  1. class Person{
  2. constructor(props){
  3. console.log("参数:"+props);
  4. console.log("初始化 Person constructor");
  5. this.name = "Person";
  6. }
  7. }
  8.  
  9. class Child extends Person{
  10. getName(){
  11. console.log("名字为:"+this.name);
  12. }
  13. }
  14.  
  15. var child = new Child();
  16. 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. How to view assertions in the Verdi waveform viewer

    In the Cadence Simvision waveform viewer, I can see every assertions listed as a hierarchical signal ...

  2. nodejs--get请求数据解析

    ---- 三种方式解析: 1.自动动手切 2.api的querystring模块 3.api的url模块

  3. 蚂蚁金服研发的金融级分布式中间件SOFA背后的故事

    导读:GIAC大会期间,蚂蚁金服杨冰,黄挺等讲师面向华南技术社区做了<数字金融时代的云原生架构转型路径>和<从传统服务化走向Service Mesh>等演讲,就此机会,高可用架 ...

  4. 分布式文件系统HDFS,大数据存储实战(一)

    本文进行了以下工作: OS中建立了两个文件,文件中保存了几组单词. 把这两个文件导入了hadoop自己的文件系统. 介绍删除已导入hadoop的文件和目录的方法,以便万一发生错误时使用. 使用列表命令 ...

  5. MySQL5.6启动报错The server quit without updating PID file

    Mysql启动报错如下: [root@db01 opt]# service mysqld start Starting MySQL.... ERROR! The server quit without ...

  6. C和C指针小记(十二)-函数的可变参数表

    1.可变参数表是通过宏实现的 宏定义于stdarg.h头文件,它是标准库的一部分.这个头文件声明了一个类型var_list和三个宏--va_start.va_arg.va_end. 我们可以声明一个类 ...

  7. c#构造函数对string类型赋初值

    public class Stu { public Stu() { //当成员属性非常多难以一一赋值时,采用本方法.当然写代码逐一成员直接赋值效率更高. AssignEmptyStringMember ...

  8. [daily][archlinux] 本地字符乱码, 无法显示中文

    一: 突然有一天,Konsole里边看见的中文文件名的文件,就变成了乱码.thunderbird存到本地的附件,文件名也变成了乱码. 在X下查看locale,内容如下: 手动设置了之后也不对. 但是在 ...

  9. DBCHART直方图顶端显示数字

    双击DBCHART-->选SERIES选项卡-->选MARKS-->选STYLE值为VALUE

  10. LeetCode 485 Max Consecutive Ones 解题报告

    题目要求 Given a binary array, find the maximum number of consecutive 1s in this array. 题目分析及思路 给定一个01数组 ...