super()和super(props)的区别以及为什么要写super(props)
一般,我们在写自定义类组件的时候会写上构造函数如下:
class Checkbox extends React.Component {constructor(props) {super(props);this.state = { isOn: true };}// ...
}
当然,也可以像下面这样写:
class Checkbox extends React.Component {state = { isOn: true };// ...
}
当React 0.13在2015年增加对普通类的支持时,计划使用这样的语法。定义构造函数和调用super(props)成为临时解决方案,直到类字段提供符合人体工程学的替代方案。
但是,让我们回到这个例子,只使用ES2015功能:
class Checkbox extends React.Component {constructor(props) {super(props);this.state = { isOn: true };}// ...
}
**我们为什么调用super?我们可以不调用它吗?如果我们必须调用它,如果我们不传递props会发生什么?**还有其他论点吗?让我们来看看。
为什么要调用super(props)?
在JavaScript中,super指的是父类构造函数。(在我们的示例中,它指向React.Component实现。)
重要的是,在调用父构造函数之前,不能在构造函数中使用this。 JavaScript不会让你:
class Checkbox extends React.Component {constructor(props) {// ? Can’t use `this` yetsuper(props);// ✅ Now it’s okay thoughthis.state = { isOn: true };}// ...
}
有一个很好的理由说明为什么JavaScript在你触摸它之前强制执行父构造函数。考虑一个类层次结构:
class Person {constructor(name) {this.name = name;}
}class PolitePerson extends Person {constructor(name) {this.greetColleagues(); // ? This is disallowed, read below whysuper(name);}greetColleagues() {alert('Good morning folks!');}
}
想象一下,在允许调用super之前使用this。一个月后,我们可能会更改greetColleagues以在邮件中包含此人的姓名:
greetColleagues() {alert('Good morning folks!');alert('My name is ' + this.name + ', nice to meet you!');
}
在super调用之前,也就是父类的构造函数执行之前,调用greetColleagues去访问父类的name属性,这时候会出错。
为了避免这些陷阱,JavaScript强制要求:如果你想在构造函数中使用this,你必须首先调用super。让父级做自己的事!此限制也适用于定义为类的React组件:
constructor(props) {super(props);// ✅ Okay to use `this` nowthis.state = { isOn: true };}
为什么要传递props?
你可能认为将props传递给super是必要的,以便基本的React.Component构造函数可以初始化this.props:
// Inside React
class Component {constructor(props) {this.props = props;// ...}
}
这与事实并不遥远 - 事实上,这就是它的作用。
但不知何故,即使你没有使用props参数调用super,你仍然可以在render和其他方法中访问this.props。 (如果你不相信我,请亲自试试!)
这是如何运作的?事实证明,在调用构造函数后,React也会在实例上分配props:
// Inside React
const instance = new YourComponent(props);
instance.props = props;
因此,即使你忘记将props传递给super,React仍会在之后设置它们。这是有原因的。
当React添加对类的支持时,它不仅仅增加了对ES6类的支持。目标是尽可能支持广泛的类抽象。目前尚不清楚ClojureScript,CoffeeScript,ES6,Fable,Scala.js,TypeScript或其他解决方案在定义组件方面的成功程度。所以React故意不关心是否需要调用super - 即使是ES6类。
那么这是否意味着你可以只写super()而不是super(props)?
尽可能不要这样,否则会使人困惑。
当然,React稍后会在你的构造函数运行后分配this.props。但是this.props在调用super和构造函数结束之间仍然是未定义的:
// Inside React
class Component {constructor(props) {this.props = props;// ...}
}// Inside your code
class Button extends React.Component {constructor(props) {super(); // ? We forgot to pass propsconsole.log(props); // ✅ {}console.log(this.props); // ? undefined }// ...
}
如果在从构造函数调用的某个方法中发生这种情况,则调试可能更具挑战性。 这就是为什么我建议总是传递super(props),即使它不是绝对必要的:
class Button extends React.Component {constructor(props) {super(props); // ✅ We passed propsconsole.log(props); // ✅ {}console.log(this.props); // ✅ {}}// ...
}
这样可以确保在构造函数退出之前设置this.props。
为什么可以不写构造函数?
最后一点React用户可能会对此感到好奇。
您可能已经注意到,当您在类中使用Context API时(使用遗留的contextTypes或React 16.6中添加的现代contextType API),上下文将作为第二个参数传递给构造函数。
那么为什么我们不写super(props, context)呢?我们可以,但上下文的使用频率较低,所以这个陷阱并没有那么多。
随着类字段的提议,这整个陷阱大多数都会消失。如果没有显式构造函数,则会自动传递所有参数。这允许像state = {}这样的表达式包含对this.props或this.context的引用(如果需要)。
下面的例子中,依然会看到提示框显示name:
class Person {constructor(name) {this.name = name;alert(this.name);}
}class PolitePerson extends Person {// constructor(name) {// super(name);// }
}new App('zs');
有了Hooks,我们甚至没有super或this。但那是另一天的话题。
super()和super(props)的区别以及为什么要写super(props)相关推荐
- 【译】为什么要写super(props)
译注: 原文地址 https://overreacted.io/why-do-we-write-super-props/ 正文 我听说Hooks是新的热点.好笑的是,我想通过描述一些关于class组件 ...
- 【译】为何我们要写super(props)?
我听说现在Hooks是新的热点.讽刺地是,我想描述类的相关事实作为这片博客的开始.那是怎么样的呢? 这些坑对于有效地使用React并不重要.但如果你想更深入地了解事物的工作原理,你可能会发现它们很有趣 ...
- 一文搞懂List 、ListObject、List?的区别以及? extends T与? super T的区别
前段时间看<Java编程思想>泛型时对 <? extends T>与<? super T>很懵逼,接着看到泛型与集合的更蒙蔽,随后又翻开<码出高效>时, ...
- rtx2060什么水平_RTX2060与Super有什么区别?RTX2060和RTX2060 Super性能对比评测
于2019年7月2日,NVIDIA正式解禁了全新一代的RTX 2060 Super.RTX 2070 Super,我们知道Super的含义是超级的意思,我们也可以理解为性能跳级版,相比此前发布的RTX ...
- React构造函数中为什么要写 super(props)
为什么 super() 要放在构造函数 contructor 最上面执行 ? ES6 语法中,super 指代父类的构造函数,React 里面就是指代 React.Component 的构造函数. 在 ...
- (兔C残篇)Java 面向对象的三个基本特征:继承,Super关键字的使用,this关键字的使用,super和this的区别,方法重写
如文章标题,今天兔C残篇阐述的话题如下: 文章目录 1.什么是继承 1.1 democode 1.2 关于继承的理论知识概念 2. Super 关键字 3.this 关键字 4.this 和 supe ...
- python 多继承与super使用详解_继承中的MRO与super详解
Python进阶-继承中的MRO与super 写在前面如非特别说明,下文均基于Python3 摘要 本文讲述Python继承关系中如何通过super()调用"父类"方法,super ...
- 【Kotlin】Kotlin 类的继承 三 ( super 关键字使用 | super@ 外部调用父类方法 | 子类选择性调用 父类 / 接口 方法 super )
文章目录 I . 子类调用父类总结 II . 子类调用父类方法 ( super ) III . 子类内部类调用父类方法 ( super@ ) IV . 子类选择调用不同的 父类 / 接口方法 ( su ...
- Java复习题1(1.写出抽象类和接口的区别。2.This和Super关键字的区别有哪些?3.常见的类集子类有哪些,各有什么特点?4.什么是多态,多态实现的前提是什么?)
1.写出抽象类和接口的区别. 答: 抽象类中的方法不全是抽象方法,可以在抽象类中声明并实现其他方法. 接口不允许方法的实现,定义的方法无方法体. 抽象类中的成员变量可以使用不同修饰符修饰,如publi ...
最新文章
- 2020牛客多校第一场B虚树+质数筛+换根dp
- 使用Word宏替换Header、Footer等中的文本
- 小议Oracle外键约束修改行为
- C++读取txt数据为二维数组 将数据保存到txt文本中
- IOS基础之绘图函数的使用
- AutoCompleteExtender智能扩展实例
- 虚拟主机是设置在httpd-vhosts.conf还是vhosts.conf还是httpd.conf
- 架构设计工作笔记001---智慧城市项目架构设计中应该注意的问题
- mysql —— 分表分区(1)
- 分享一款在线less转css的神器
- ai 文案_AI是UX文案的未来吗?
- 哔哩哔哩---P2 WPF基础入门视频(布局)
- 微信小程序如何使用阿里矢量库
- [WPF] 读取ini中中文字符乱码的解决
- 网页调起支付宝付款和微信付款
- Tacotron2 NVIDIA版本优化停顿问题之Biao-Bei数据PhonePrssCrystal
- 使用latex撰写Elsevier双栏论文,表格标题caption左对齐问题
- SQL字符串首字母大写
- 使用浏览器访问服务器shell(ssh方式)
- 【C++学习笔记】函数基础和参数传递