读书笔记
原文链接
super
在 JavaScript 中，super 指的是父类（即超类）的构造函数。在下面的例子中，它指向了 React.Component 的实现。super只能用在子类的构造函数之中。
class Checkbox extends React.Component {
constructor(props) {
super(props);
this.state = { isOn: true };
}
// ...
}值得注意的是，在调用父类的构造函数之前，你是不能在 constructor 中使用 this 关键字的。JavaScript 不允许这个行为。这是一种成功陷阱机制。
class Checkbox extends React.Component {
constructor(props) {
// 🔴 还不能使用 `this`
super(props);
// ✅ 现在可以了
this.state = { isOn: true };
}
// ...
}为什么要传入props👇
为了让 React.Component 构造函数能够初始化 this.props，将 props 传入 super 是必须的。
看 React 源码 :
/**
* 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;
}
Component.prototype.isReactComponent = {};为什么不传props，依然能访问到 this.props👇
这当然不是javascript内置的默认逻辑，而是 React 内部做的手脚，在调用构造函数后也立即将 props 赋值到了实例上：
const instance = new YourComponent(props);
instance.props = props;super() 能代替 super(props) ？ 👇
最好不要，虽然 React 会在构造函数执行完毕之后给 this.props 赋值。但在构造函数中 this.props 一直是 undefined。
// React 內部
class Component {
constructor(props) {
this.props = props;
// ...
}
}
// 你的程式碼內部
class Button extends React.Component {
constructor(props) {
super(); // 😬 我们忘了传入 props
console.log(props); // ✅ {}
console.log(this.props); // 😬 未定义
}
// ...
}如果在构造函数中调用了其他的内部方法，方法链中用到了this.props，就麻烦了。这是 React 作者建议开发者一定执行 super(props) 的原因。 所以，我们还是乖乖的秉承规范：
class Button extends React.Component {
constructor(props) {
super(props); // ✅ 传入 props
console.log(props); // ✅ {}
console.log(this.props); // ✅ {}
}
// ...
}