用React开发class组件时，constructor中一定要调用 super(props)。
下面通过两个问题逐步分析。第一：为什么要调用super？第二：为什么要传入props，不传会发生什么？
首先解释第一个问题：
在 JavaScript 子类的构造函数中 super 指的是父类（即超类）的构造函数。子类中显式定义了constructor的方法中必须在其最顶层调用super，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。所以必须先调用super才可以使用this。如果子类没有定义constructor方法，这个方法会被默认添加。
如下：
class A {}
class B extends A {
constructor() {
super()
}
}
new B().constructor === B // true
以上结论证明super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B的实例，因此super()相当于A.prototype.constructor.call(this)。
再通过 new.target 验证：
class A {
constructor() {
console.log(new.target.name);
}
}
class B extends A {
constructor() {
super()
}
}
new B() // B
new.target指向new命令作用的构造函数，以上 new.target.name 为 B，由此可知在super()执行时，它指向的是子类B的构造函数，而不是父类A的构造函数。也就是说，super()内部的this指向的是B。
在React中，super指向了 React.Component，所以在调用父类的构造函数之前，是不能在 constructor 中使用 this 关键字的。
class Button extends React.Component {
constructor() {
// 还不能访问 `this`
super();
// 可以访问
this.state = { show: true }
}
// ...
}
第二个问题，为什么要传props？
为了让 React.Component 构造函数初始化 this.props。React源码是这样的：
function Component(props, context) {
this.props = props;
this.context = context;
// ...
}
但是有些时候在调用 super() 的时即使没有传入 props，依然能够在 render 函数或其他方法中访问到 this.props。那这是怎么做到的呢？事实证明，React 在调用构造函数后也立即将 props 赋值到了实例上：
// React 内部
const instance = new YourComponent(props);
instance.props = props;
所以即便忘记了将 props 传给 super()，React 也仍然会在之后将它定义到实例上。这样做是有原因的：
当 React 增加了对类的支持时，不仅增加了对ES6类的支持。其目标是尽可能广泛的支持类抽象。当时尚不清楚 ClojureScript，CoffeeScript，ES6，Fable，Scala.js，TypeScript 或其他解决方案在类组件方面是否成功。因此 React 刻意地没有显式要求调用 super()。
那是不是意味着能够用 super() 代替 super(props) 吗？
最好不要这样做，这样写在逻辑上并不能确定没问题，因为React 会在构造函数执行完毕之后才给 this.props 赋值。但这样做会使得 this.props 在 super 调用一直到构造函数结束期间值为 undefined。
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 的时候，context会作为第二个参数传入constructor，那么为什么我们不写成 super(props, context) 呢？可以，但 context 的使用频率较低，因而没有必要。
而且 class fields proposal 出来后，在没有显示定义构造函数的情况下，以上属性都会被自动地初始化。使得像 state = {} 这类表达式能够在需要的情况下引用 this.props 和 this.context 的内容：
class Button extends React.Component {
state = {
age: this.props.age,
name: this.context.name
}
// ...
}
当然，有了 Hooks 以后，几乎就不需要 super 和 this 了，但那就是另一个概念了。
网友评论