在学习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. CRUD的操作,增删改查!

    .注释语法:--,# .后缀是.sql的文件是数据库查询文件 .在创建查询里,那个需要保存的对话框只是,保存查询. .在数据库里面 列有个名字叫字段 行有个名字叫记录 CRUD操作: create 创 ...

  2. Flask----基础

    Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对请求进行预处理,然后 ...

  3. nginx启用TCP反向代理日志配置

    Nginx使用TCP反向代理日志配置不同于http 修改nginx配置文档/usr/local/nginx/conf/nginx.conf 设置日志格式 stream { log_format pro ...

  4. 掌握业界最新工程实践 | 了解AIOps下一代微服务等最新趋势

    近年来,IT应用越来越复杂,一旦出现故障,诊断越来越困难,使用传统技术来管理机器数据的组织会让其运维团队不堪重负.幸好随着大数据.机器学习和AI技术的飞速发展,智能化运维给这一现状带来了改变. 那么就 ...

  5. LITTLE-ENDIAN(小字节序、低字节序) BOM——Byte Order Mark 字节序标记 数据在内存中的存放顺序

    总结: 1. endian 字节存放次序 字节序,顾名思义字节的顺序,再多说两句就是大于一个字节类型的数据在内存中的存放顺序(一个字节的数据当然就无需谈顺序的问题了). 2. LITTLE-ENDIA ...

  6. OWA (Office Web Access)

    exchange的web网页,可以enrich的打开,用起来还行outlook一样. 同事的chrome(under windows) 默认就是i这样的.也没装插件,也没有怎样. 我的chrome(u ...

  7. [httpd] httpd directory list character encoding

    在httpd下放置文件用来直接从浏览器访问的时候,中文文件名有可能产生乱码. 做以下设置,调整字符编码: 1: Add this to your .htaccess: IndexOptions +Ch ...

  8. python fabric实现远程操作和部署示例

    https://www.jb51.net/article/48434.htm 近期接手越来越多的东西,发布和运维的工作相当机械,加上频率还蛮高,导致时间浪费还是优点多.修复bug什么的,测试,提交版本 ...

  9. Appium环境配置(一)

    一:环境准备(Windows 7版本 64位系统) 1.jdk1.6.0 (64位) 2.android-sdk 3.appium 4.Node.js:node-v8.11.1 5.Appium-Py ...

  10. C++ 方阵原地旋转90度

    不额外申请内存(另外的一个二维数组空间),将一个方阵(二维数组)原地旋转90度,主要的思路是,由外向内,一圈圈的进行旋转(就是依次进行交换),如下图所示,当这些圈圈都交换完了之后,就完成了原地旋转了. ...