首先 super() 是在 es6的class(类)的方法创建组件出现

下面是分别是构造函数创建组件和class(类)创建组件

构造函数方法创建组件

在构造函数方法中,在组件接收参数的时候,props作为函数的形参,在 function 构造函数中不存在this的指向问题

function Hello(props) {
const { userinfo } = props;
return <p>组件和组件传值 ----------- {userinfo.name}</p>;
} const userinfo = {
name: "组件传递的数据",
age: 18,
}; ReactDOM.render(
<div>
react组件和组件传值<Hello userinfo={userinfo}></Hello>
</div>,
document.getElementById("app")
);

es6 class(类) 方法创建组件

这里需要掌握原型链,对原型链不熟悉的先去看下js中对象的原型,前面随笔中也有两次讲到js原型

1 // 构造函数 会 默认生成 一个原型对象
2 function Person(name,) {
3 this.name = name;
4 }
5 console.log(Person); // 构造函数本身
6 console.log(Person.prototype) // 指向原型对象
7 console.log(Person.prototype.constructor); // 指向 构造函数本身
8 Person("范顺");

在class(类) 方法中,同理可得 constructor(props),

子类继承父类的属性:需要使用super()继续父类的属性,同时创建this(子类本身没有this);

所以super(props)的作用就是在父类的构造函数中给props赋值一个对象this.props=props这样就能在它的下面定义你要用到的属性了,然而其他的由于没有传参就直接赋值为undefind

class Hello extends React.Component {
constructor(props) {
super(props) // 子类继承父类,this
console.log(props)
}
render() {
return null;
}
}

拓展部分:理解 super( ) ——继承

在class方法中,继承是使用 extends 关键字来实现的

 1     class People{
2 constructor(name,age){
3 this.name = name;
4 this.age = age;
5 }
6 sayName(){
7 return '我的名字是:'+this.name;
8 }
9 }
10
11 class har extends People{
12 constructor(name,age,sex){
13 super(name,age);//调用父类的constructor(name,age)
14 this.sex = sex;
15 }
16 haha(){
17 return this.sex + ' ' + super.sayName();//调用父类的sayName()
18 }
19 }

上面的例子中,出现了 super( ),子类 必须constructor( )调用 super( )方法,否则新建实例时会报错。(不要问为什么!)

报错的原因是:子类是没有自己的 this 对象的,它只能继承自父类的 this 对象,然后对其进行加工,而super( )就是将父类中的this对象继承给子类的。没有 super,子类就得不到 this 对象,没有 this 对象而要对 this 进行处理,能不报错吗?

1     class Ha{/*某些代码*/}
2
3 class haha extends Ha{
4 constructor(){}
5 }
6
7 let haha1 = new haha();ReferenceError报错

出现上面情况的总原因是,ES5的继承机制与ES6完全不同。

复习一个重要知识点——ES5中new到底做了些啥?

当一个构造函数前加上new的时候,背地里来做了四件事:

1.生成一个空的对象并将其作为 this;

2.将空对象的 __proto__ 指向构造函数的 prototype

3.运行该构造函数;

4.如果构造函数没有 return 或者 return 一个返回 this 值是基本类型,则返回this;如果 return 一个引用类型,则返回这个引用类型。

react中super()的理解的更多相关文章

  1. React中JSX的理解

    React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ...children)的语法糖,同时JSX也是J ...

  2. Java 泛型 <? super T> 中 super 怎么 理解?与 < ? extends T>有何不同?

    Java 泛型 <? super T> 中 super 怎么 理解?与 extends 有何不同? 简介 前两篇文章介绍了泛型的基本用法.类型擦除以及泛型数组.在泛型的使用中,还有个重要的 ...

  3. react中redux的理解

    定义 redux可以看作是flux的进阶版,主要用于react中公共状态(数据)的管理 redux底层原理 redux有一个createStore方法,这个方法用户创建公共存储空间,createSto ...

  4. python中super的理解(转)

    原文地址:https://www.zhihu.com/question/20040039 针对你的问题,答案是可以,并没有区别.但是这题下的回答我感觉都不够好. 要谈论 super,首先我们应该无视 ...

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

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

  6. 对于react中rredux的理解

    1.什么是redux? redux是一个应用数据流框架,主要作用是对于应用状态的管理 2.reducer特点 : (1)默认的state (2)state是只可读不可修改 (3)必须返回一个纯函数 3 ...

  7. Java 泛型 <? super T> 中 super 怎么 理解?与 extends 有何不同?

    看知乎:https://www.zhihu.com/question/20400700 了解的越多,就会发现,越多不了解.

  8. react中的setState的使用和深入理解

    前端框架从MVC过渡到MVVM.从DOM操作到数据驱动,一直在不断的进步着,提升着, angular中用的是watcher对象,vue是观察者模式,react就是state了,他们各有各的特点,没有好 ...

  9. 理解React中es6方法创建组件的this

    首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...

  10. 深入理解react中的虚拟DOM、diff算法

    文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   ...

随机推荐

  1. DHCP分配IP的流程

    1.DHCP客户端以广播的形式发送DHCP Discover报文 2.所有的DHCP服务端都可以接收到这个DHCP Discover报文,所有的DHCP服务端都会给出响应,向DCHP客户端发送一个DH ...

  2. Cmake 把 CGAL的demo 编译生成 .sln文件 遇到的一些问题

    尝试了N个版本后,选择了CGAL5.02 为啥去官网或者github下载的CGAl只是一个库,没有窗口,而这个却有呢   链接:https://pan.baidu.com/s/1TvrWQRc9yYD ...

  3. Java学习笔记(二)环境

     卸载JDK 1.删除java的安装目录 2.删除JAVA_HOME 3.删除path下关于java的目录 4.java -version 配置环境变量 1.我的电脑-->右键-->属性 ...

  4. 标题Ubuntu将默认的python3改为默认的python

    ryzen@cp7:~$ python Command 'python' not found, did you mean: command 'python3' from deb python3 roo ...

  5. Pytorch基础复习

    项目推进中期,重新到头来学Pytorch.five落泪了.(╬▔皿▔)凸 笑死,憋不住了,边更边学. 整篇博客整体采用总分总形式.首先将介绍内容(加黑部分)之间关系进行概括,后拆解,最后以图总结. 全 ...

  6. discuz论坛或门户下载的图片无法显示?

    discuz论坛或门户下载的图片无法显示? 使用某些插件或者软件(例如火车头采集器,简数采集工具等)的图片下载功能,发现下载成功了后台也有但是前台无法显示,捣鼓了一轮最终才发现是路径的问题. disc ...

  7. Android错误之--Error retrieving parent for item: No resource found that matches the given name 'Theme.A

    改正错误 (虽然内容较少,但是还是选择单独占用一篇) 这个错误,可以说是困扰了我好久,然后就看到可以改变一下使用的Android版本,改成Android 4.0,然后就去试了试,发现真的就好了耶! 就 ...

  8. 在golang中如何正确判断接口是否为nil

    本文主要来分析一下在golang中,如何判断interface是否为nil,以及相关注意事项. 正常情况下,我们声明一个interface类型的变量,默认值将会返回nil,以golang自带的io.W ...

  9. java多线程--5 同步方法和同步块synchronized

    java多线程--5 同步方法和同步块synchronized 同步方法和同步块 同步方法:关键字synchronized,包括synchronized方法和synchronized块 public ...

  10. 网页静态化技术 Freemarker

    网页静态化解决方案在实际运用中比较多,例如新闻网站,门户网站中的新闻频道或者是文章类的频道.对于电商网站的商品详细页(几百万的商品,同样的页面模板格局)来说,每个商品又有大量的信息,这样的情况同样也适 ...