React——为什么我们要写super(props)

本文总结自Dan Abramov的博客。

在编写react类组件的过程中，下面constructor中的代码我们应该已经见过无数次，但是却没有思考过为何必须这么去写：

class Example extends Component {
constructor(props) {
super(props);
this.state = {};
}
}

在出现类属性的提案后，我们还可以这样去声明我们的state：

class Example extends Component {
state = {
isSwitchOn: false
}
}

在解释为何要编写super(props)的时候，先回顾一下ES6中类的语法以及super的语义。在构造器constructor中，super()会执行父类的构造方法，在React类组件中就是Component类。而且在constructor构造器中有一个规定，那就是在super()调用前是不能够使用this的。

class Example extends Component {
constructor(props) {
console.log('You cannot use this here');
super(props);
console.log('You can use this now');
}
}

这样规定的原因是父类构造器中可能会初始化一些属性，如果不调用super()，那么初始化的代码就不会执行，此时如果使用this获取父类中未初始化的属性就会是undefined。为了避免这种情况的发生，所以ES6规范强制要求我们在super()调用后使用this。

class Person {
constructor(name) {
this.name = name;
}
}
class Child extends Person {
constructor() {
console.log(this.name);
// undefined
super('childName');
}
}

回到我们的React类组件中，super(props)显然是调用了父类Component的构造器，而传入props的作用就是初始化props实例。

/**
* Base class helpers for the updating state of a component.
*/
function Component(props, context, updater) {
this.props = props;
this.context = context;
// If a component has string refs, we will assign a different object later.
this.refs = emptyObject;
// We initialize the default updater but the real one gets injected by the
// renderer.
this.updater = updater || ReactNoopUpdateQueue;
}

上面代码摘自：React官方库

那么如果我们调用super()，但是不传入props。是不是意味着在整个类组件中都无法通过this获取props？也就是说this.props一直都是undefined？实际上并不是这样的。React会在调用构造函数后立即将props赋值到this上：

// React 内部
const instance = new YourComponent(props);
instance.props = props;

所以，在这种情况下，我们在constructor构造其中是无法通过this获取到props，但是在类的其他地方完全可以。

class Example extends Component {
constructor(props) {
super();
console.log(this.props);
// undefined
console.log(props);
// {}
}
}

当然，如果使用react hook语法，也就不需要再关注这些了。

最后

以上就是清秀铃铛为你收集整理的React——为什么我们要写super(props)的全部内容，希望文章能够帮你解决React——为什么我们要写super(props)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。