谈谈JavaScript中super(props)的重要性
96 浏览量
2020-12-12
09:45:30
上传
评论
收藏 76KB PDF 举报
谈谈谈谈JavaScript中中super(props)的重要性的重要性
我听说 Hooks 最近很火。讽刺的是，我想用一些关于 class 组件的有趣故事来开始这篇文章。你觉得如何？
本文中这些坑对于你正常使用 React 并不是很重要。 但是假如你想更深入的了解它的运作方式，就会发现实际上它们很有
趣。
开始第一个。
首先在我的职业生涯中写过的super(props) 自己都记不清：
class Checkbox extends React.Component {
constructor(props) {
super(props);
this.state = { isOn: true };
}
// ...
}
当然，在类字段提案 （class fields proposal） 中建议让我们跳过这个开头：
class Checkbox extends React.Component {
state = { isOn: true };
// ...
}
在2015年 React 0.13 增加对普通类的支持时，曾经打算用这样的语法。定义constructor和调用super(props) 始终是一个临时的解
决方案，可能要等到类字段能够提供在工程学上不那么反人类的替代方案。
不过还是让我们回到前面这个例子，这次只用ES2015的特性：
class Checkbox extends React.Component {
constructor(props) {
super(props);
this.state = { isOn: true };
}
// ...
}
为什么我们要调用super？ 可以调用它吗？ 如果必须要调用，不传递prop参数会发生什么？ 还有其他参数吗？ 接下来我们试一
试：
在 JavaScript 中，super 指的是父类的构造函数。（在我们的示例中，它指向React.Component 的实现。）
重要的是，在调用父类构造函数之前，你不能在构造函数中使用this。 JavaScript 是不会让你这样做的：
class Checkbox extends React.Component {
constructor(props) {
// 这里还不能用 `this`
super(props);
// 现在可以用了
this.state = { isOn: true };
}
// ...
}
为什么 JavaScript 在使用this之前要先强制执行父构造函数，有一个很好的理由能够解释。 先看下面这个类的结构：
class Person {
constructor(name) {
this.name = name;
}
}
class PolitePerson extends Person {
constructor(name) {
this.greetColleagues(); //这行代码是无效的，后面告诉你为什么
super(name);
}
greetColleagues() {
alert('Good morning folks!');
}
}
weixin_38705699
- 粉丝: 3
- 资源: 962
最新资源
- 电子万年历软件仿真（经过多次修改，保证正确性）
- Unity XR 手势射击控制脚本（适用于任何可手势识别的设备）
- 机械设计全自动电表（NB和IC卡表）控制和上壳装配线sw16可编辑非常好的设计图纸100%好用.zip
- 基于matlab的EAN-13条形码识别系统GUI界面.zip代码53
- matlab基于bp神经网络交通信号标志识别GUI界面13个标志.zip代码54
- 电子万年历答辩实物展示视频mp4格式
- 基于python实现的程序，包括哈希感知算法cvHash，图像切割cvsplit，固定目标检测cvRec（附文档ppt）等
- 计算0-10000之间所有偶数的和
- multiled.zip
- 基于php实现的哈希算法的人脸检索
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0