react的super(props)
在学习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)的更多相关文章
- React中super(props)和super()以及不写super()的区别
一.constructor()和super()的基本含义 constructor() -- 构造方法 这是ES6对类的默认方法,通过new命令生成对象实例自动调用的方法.并且,该方法是类中必须要有的, ...
- react中constructor和super()以及super(props)的区别。
react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 const ...
- 如何理解react中的super() super(props)
class WebSite extends React.Component { constructor() { super(); this.state = { name: "菜鸟教程&quo ...
- React关于constructor与super(props)之间的相爱相杀
我们先把菜鸟教程的一段代码拿过来分析一下.下面这段代码是用了将生命周期方法添加到类中实现时钟效果. // 将生命周期方法添加到类中 class Clock extends React.Componen ...
- react super() and super(props)
subclass: subclass is a class that extends another class. 即子类. In ES2015, to use 'this' in subclasse ...
- 【译】为什么要写super(props)
译注: 原文地址 https://overreacted.io/why-do-we-write-super-props/ 正文 我听说Hooks是新的热点.好笑的是,我想通过描述一些关于class组件 ...
- react native中props的使用
react native中props的使用 一.props的使用 1:父组件传递的方式 在子组件中可以用this.props访问到父组件传递的值 <View> <Text> { ...
- React中render Props模式
React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写 ...
- 为什么react的组件要super(props)
https://segmentfault.com/q/1010000008340434
随机推荐
- TOP100summit:【分享实录-华为】微服务场景下的性能提升最佳实践
本篇文章内容来自2016年TOP100summit华为架构部资深架构师王启军的案例分享.编辑:Cynthia 王启军:华为架构部资深架构师.负责华为的云化.微服务架构推进落地,前后参与了华为手机祥云4 ...
- 没有上司的舞会|codevs1380|luoguP1352|树形DP|Elena
没有上司的舞会 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description Ural大学有N个职员,编号为1~N.他们有从属关系 ...
- 更换title上的ico
var rurl = "/static/dashboard/img/favicon.ico"; var a = ''; var links = document.getElemen ...
- 移位运算符:<<,>>,>>>总结
位移总结篇:带demo讲解 https://www.cnblogs.com/yyangblog/archive/2011/01/14/1935656.html
- 各种可再发行组件包Redistributable及framework 下载
安装包名称 版本号 下载地址 Visual C++ 2005 Redistributable Package (x64) 下载 Visual C++ Redistributable Package ...
- [No0000178]改善C#程序的建议1:非用ICloneable不可的理由
好吧,我承认,这是一个反标题,实际的情况是:我找不到一个非用ICloneable不可的理由.事实上,接口ICloneable还会带来误解,因为它只有一个Clone方法. 我们都知道,对象的拷贝分为:浅 ...
- [No0000145]深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing)理解堆与栈2/4
前言 虽然在.Net Framework 中我们不必考虑内在管理和垃圾回收(GC),但是为了优化应用程序性能我们始终需要了解内存管理和垃圾回收(GC).另外,了解内存管理可以帮助我们理解在每一个程 ...
- cinder 和 qt5 vs2015结合
下载编译好的cinder_0.9.1_vc2013, 用vs2015打开 cinder_0.9.1_vc2013\proj\vc2013\cinder.sln 重新编译 由于我用的qt也是vs2015 ...
- 解决GP服务产生的结果无法自动发布为地图服务的问题
在ArcGIS for Javascript API或REST API调用GP服务时,常常会遇到这样一种情况:GP服务运行以后,执行成功,也能够生成结果,然而结果并没有直接产生动态的地图服务供API调 ...
- idea tomcat控制台system.out.println是乱码
配置一下tomcat的信息.然后设置VM options.添加:-Dfile.encoding=UTF-8