谈谈JavaScript中super(props)的重要性


Posted in Javascript onFebruary 12, 2019

我听说 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!');
 }
}

如果允许在调用super之前使用this的话。一段时间后,我们可能会修改greetColleagues,并在提示消息中添加Personname

greetColleagues() {
  alert('Good morning folks!');
  alert('My name is ' + this.name + ', nice to meet you!');
 }

但是我们忘记了super()在设置this.name之前先调用了this.greetColleagues()。 所以此时this.name还没有定义! 如你所见,像这样的代码很难想到问题出在哪里。

为了避免这类陷阱,JavaScript 强制要求:如果想在构造函数中使用this,你必须首先调用super。 先让父类做完自己的事! 这种限制同样也适用于被定义为类的 React 组件:

constructor(props) {
  super(props);
  // 在这里可以用 `this`
  this.state = { isOn: true };
 }

这里又给我们留下了另一个问题:为什么要传props参数?

你可能认为将props传给super是必要的,这可以使React.Component的构造函数可以初始化this.props

// Inside React
class Component {
 constructor(props) {
  this.props = props;
  // ...
 }
}

这与正确答案很接近了 —— 实际上它就是这么做的。

但是不知道为什么,即便是你调用super时没有传递props参数,仍然可以在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, 但是在调用super() 之后和构造函数结束前这段区间内this.props仍然是未定义的:

// Inside React
class Component {
 constructor(props) {
  this.props = props;
  // ...
 }
}
// Inside your code
class Button extends React.Component {
 constructor(props) {
  super(); //我们忘记了传递 props 参数
  console.log(props);   // {}
  console.log(this.props); // undefined 
 }
 // ...
}

如果这种情况发生在从构造函数调用的某个方法中,可能会给调试工作带来很大的麻烦。 这就是为什么我建议总是调用super(props) ,即使在没有必要的情况之下:

class Button extends React.Component {
 constructor(props) {
  super(props); // 传递了 props 参数
  console.log(props);   // {}
  console.log(this.props); // {}
 }
 // ...
}

这样就确保了能够在构造函数退出之前设置好this.props

最后一点是长期以来 React 用户总是感到好奇的。

你可能已经注意到,当你在类中使用Context API时(无论是旧版的contextTypes或在 React 16.6中新添加的 contextType API),context 会作为第二个参数传递给构造函数。

那么为什么我们不写成super(props, context) 呢? 我们可以这样做,但是使用context的频率较低,所以这个坑并没有那么多影响。

根据类字段提案的说明,这些坑大部分都会消失。 如果没有显式构造函数,则会自动传递所有参数。 这允许在像state = {} 这样的表达式中包含对this.propsthis.context的引用(如果有必要的话)。

而有了 Hooks 之后,我们甚至不再有superthis。不过这是另外一个的话题了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
js编写的treeview使用方法
Nov 11 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
js里面的变量范围分享
Jul 18 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 #Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 #Javascript
实例分析编写vue组件方法
Feb 12 #Javascript
详解vue引入子组件方法
Feb 12 #Javascript
vue组件之间数据传递的方法实例分析
Feb 12 #Javascript
vue添加class样式实例讲解
Feb 12 #Javascript
Vue中使用canvas方法总结
Feb 12 #Javascript
You might like
php5 pdo新改动加载注意事项
2008/09/11 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
php检测文本的编码
2015/07/26 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
js中split()方法得到的数组长度问题
2018/07/19 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
深入理解Python 代码优化详解
2014/10/27 Python
python去除字符串中的换行符
2017/10/11 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
柏林通行证:Berlin Pass
2018/04/11 全球购物
幼儿园亲子活动方案
2014/01/29 职场文书
汇源肾宝广告词
2014/03/20 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
学校节能减排方案
2014/06/13 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android