React中的constructor和super+生命周期

Posted 2023-05-15

参考技术A 参考： 有关React的生命周期

有constructor的子类：类里面会多一个constructor方法。有constructor的this实例：可以定义自己的state的初始状态，如果不需要，建议使用无状态组件即函数组件。

如果写constructor的话，一定要在函数中协商super(),这样的话组件才有自己的this，在组建全局中可以使用this关键字。
官方文档中说：子类自己的this对象，必须通过父类的构造函数完成，得到与父类同样的实例属性和方法，再对其加工，加上子类自己的，如果不调用super方法的haunted，就得不到this对象。

可以认为，初次渲染时候执行：constructor，componentWillMount，render。完成时执行componentDidMount。更新时：从上而下执行componentWillReceiveProps ，componentWillUpdate，render。从下而上执行componentDidUpdate。

关于react组件中的constructor和super

正片

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静态方法、属性与实例属性用法示例