为什么 super() 要放在构造函数 contructor 最上面执行 ?
ES6 语法中,super 指代父类的构造函数,React 里面就是指代 React.Component 的构造函数。
在你调用 super() 之前,你无法在构造函数中使用 this,JS 不允许这么做。为什么要不允许呢?
看一下下面这个例子:
class Person {
constructor(name) {
this.name = name;
}
}
class PolitePerson extends Person {
constructor(name) {
this.greetColleagues(); //这是不允许的
super(name);
}
greetColleagues() {
alert('Good morning folks!');
alert('My name is ' + this.name + ', nice to meet you!');
}
}
如果允许的话,在 super() 之前执行了一个 greetColleagues 函数,greetColleagues 函数里用到了 this.name,这时还没执行 super(name),greetColleagues 函数里就获取不到 super 传入的 name 了,此时的 this.name 是 undefined。
super() 里为什么要传 props?
执行 super(props) 可以使基类 React.Component 初始化 this.props。
// React 内部
class Component {
constructor(props) {
this.props = props;
// ...
}
}
有时候我们不传 props,只执行 super(),或者没有设置 constructor 的情况下,依然可以在组件内使用 this.props,为什么呢?
其实 React 在组件实例化的时候,马上又给实例设置了一遍 props:
// React 内部
const instance = new YourComponent(props);
instance.props = props;
那是否意味着我们可以只写 super() 而不用 super(props) 呢?
不是的。虽然 React 会在组件实例化的时候设置一遍 props,但在 super 调用一直到构造函数结束之前,this.props 依然是未定义的。
class Button extends React.Component {
constructor(props) {
super(); // ? 我们忘了传入 props
console.log(props); // ✅ {}
console.log(this.props); // ? undefined
}
// ...
}
如果这时在构造函数中调用了函数,函数中有 this.props.xxx 这种写法,直接就报错了。
而用 super(props),则不会报错。
class Button extends React.Component {
constructor(props) {
super(props); // ✅ 我们传了 props
console.log(props); // ✅ {}
console.log(this.props); // ✅ {}
}
// ...
}
所以我们总是推荐使用 super(props) 的写法,即便这是非必要的。
参考:https://overreacted.io/why-do-we-write-super-props/