react中super()的理解
首先 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()的理解的更多相关文章
- React中JSX的理解
React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ...children)的语法糖,同时JSX也是J ...
- Java 泛型 <? super T> 中 super 怎么 理解?与 < ? extends T>有何不同?
Java 泛型 <? super T> 中 super 怎么 理解?与 extends 有何不同? 简介 前两篇文章介绍了泛型的基本用法.类型擦除以及泛型数组.在泛型的使用中,还有个重要的 ...
- react中redux的理解
定义 redux可以看作是flux的进阶版,主要用于react中公共状态(数据)的管理 redux底层原理 redux有一个createStore方法,这个方法用户创建公共存储空间,createSto ...
- python中super的理解(转)
原文地址:https://www.zhihu.com/question/20040039 针对你的问题,答案是可以,并没有区别.但是这题下的回答我感觉都不够好. 要谈论 super,首先我们应该无视 ...
- React中super(props)和super()以及不写super()的区别
一.constructor()和super()的基本含义 constructor() -- 构造方法 这是ES6对类的默认方法,通过new命令生成对象实例自动调用的方法.并且,该方法是类中必须要有的, ...
- 对于react中rredux的理解
1.什么是redux? redux是一个应用数据流框架,主要作用是对于应用状态的管理 2.reducer特点 : (1)默认的state (2)state是只可读不可修改 (3)必须返回一个纯函数 3 ...
- Java 泛型 <? super T> 中 super 怎么 理解?与 extends 有何不同?
看知乎:https://www.zhihu.com/question/20400700 了解的越多,就会发现,越多不了解.
- react中的setState的使用和深入理解
前端框架从MVC过渡到MVVM.从DOM操作到数据驱动,一直在不断的进步着,提升着, angular中用的是watcher对象,vue是观察者模式,react就是state了,他们各有各的特点,没有好 ...
- 理解React中es6方法创建组件的this
首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...
- 深入理解react中的虚拟DOM、diff算法
文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么? ...
随机推荐
- DHCP分配IP的流程
1.DHCP客户端以广播的形式发送DHCP Discover报文 2.所有的DHCP服务端都可以接收到这个DHCP Discover报文,所有的DHCP服务端都会给出响应,向DCHP客户端发送一个DH ...
- Cmake 把 CGAL的demo 编译生成 .sln文件 遇到的一些问题
尝试了N个版本后,选择了CGAL5.02 为啥去官网或者github下载的CGAl只是一个库,没有窗口,而这个却有呢 链接:https://pan.baidu.com/s/1TvrWQRc9yYD ...
- Java学习笔记(二)环境
卸载JDK 1.删除java的安装目录 2.删除JAVA_HOME 3.删除path下关于java的目录 4.java -version 配置环境变量 1.我的电脑-->右键-->属性 ...
- 标题Ubuntu将默认的python3改为默认的python
ryzen@cp7:~$ python Command 'python' not found, did you mean: command 'python3' from deb python3 roo ...
- Pytorch基础复习
项目推进中期,重新到头来学Pytorch.five落泪了.(╬▔皿▔)凸 笑死,憋不住了,边更边学. 整篇博客整体采用总分总形式.首先将介绍内容(加黑部分)之间关系进行概括,后拆解,最后以图总结. 全 ...
- discuz论坛或门户下载的图片无法显示?
discuz论坛或门户下载的图片无法显示? 使用某些插件或者软件(例如火车头采集器,简数采集工具等)的图片下载功能,发现下载成功了后台也有但是前台无法显示,捣鼓了一轮最终才发现是路径的问题. disc ...
- Android错误之--Error retrieving parent for item: No resource found that matches the given name 'Theme.A
改正错误 (虽然内容较少,但是还是选择单独占用一篇) 这个错误,可以说是困扰了我好久,然后就看到可以改变一下使用的Android版本,改成Android 4.0,然后就去试了试,发现真的就好了耶! 就 ...
- 在golang中如何正确判断接口是否为nil
本文主要来分析一下在golang中,如何判断interface是否为nil,以及相关注意事项. 正常情况下,我们声明一个interface类型的变量,默认值将会返回nil,以golang自带的io.W ...
- java多线程--5 同步方法和同步块synchronized
java多线程--5 同步方法和同步块synchronized 同步方法和同步块 同步方法:关键字synchronized,包括synchronized方法和synchronized块 public ...
- 网页静态化技术 Freemarker
网页静态化解决方案在实际运用中比较多,例如新闻网站,门户网站中的新闻频道或者是文章类的频道.对于电商网站的商品详细页(几百万的商品,同样的页面模板格局)来说,每个商品又有大量的信息,这样的情况同样也适 ...