关于react组件中的constructor和super

Posted 2021-02-11 nicholaswang

正片

export default class Child extends React.Component {
  constructor(props) {
    super(props);
    // ...
  }
  // ...
}

简单来说，react 中通过继承的方式定义 class 组件时，可以缺省 constructor 构造函数，由 ES6 的继承规则得知，不管子类写不写 constructor，在 new 实例的过程都会给补上 constructor。

但是如果需要定义实例的 state 状态时，则需要在 constructor 中定义，并且需要手动调用 super() 来先继承父组件的 this，然后加上自己身的实力属性和方法，才得到了自己的 this。

那么 super() 中必须传入来自 constructor() 中传入的 props 形参吗？
如果需要急着在 constructor 钩子函数中就要使用组件的 this.props 属性，那么则需要像图中那样，传入 props，此时可以使用 props，也可以使用 this.props，前者可以是任意参数，后者是固定写法。否则不需要传入 props。
react 在除了 constructor 之外的生命周期中已经传入了 this.props 了，正常使用即可。

PS：
如果不需要 state 状态，推荐用函数式组件，而且 react 16.7.0-alpha 已经开始有了 Hooks API，使得函数式组件也可以有 state 状态了。

---

番外

ES7 新的提案有另一种写法，舍去 constructor 方法，直接将实例属性（比如 state）写在 class 里面，通过 babel 转义后，有同样功效（搜索下 class 实例属性 关键字了解更多）。

class MyStatement extends React.Component {
  state = {
    text: 'ok'
  }
  doSomething = () => {
  // ...
  }
  render() {
    return <div>{this.state.text}<div> 
  }
}

---

参考

react组件中的constructor和super小知识
ES6 javascript中class静态方法、属性与实例属性用法示例