React中调用super(props) 的目的是什么？

在React官方文档中，指出除了使用外部数据（通过 this.props 访问）以外，组件还可以维护其内部的状态数据（通过 this.state 访问）。当组件的状态数据改变时，组件会再次调用 render() 方法重新渲染对应的标记。

举例如下：

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

root.render(<Timer />);

不熟悉JavaScript的同学可能会问，为什么会有super(props)这一句？它的作用是什么？

首先明确，用React开发class组件时，constructor中一定要调用 super(props)，也可以只写super()。那么，什么时候用super(props)？什么时候用super()？

super()函数是什么？

在 JavaScript 子类的构造函数中 super()指的是父类的构造函数。子类在构造过程中，必须调用其父类的构造函数，才能完整的复制父类实例的属性和方法，然后在此基础上再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。

如果子类没有定义constructor，super()会被默认添加。

super(props)的作用

super(props)的作用是在执行父类构造函数的时候，将props传入。

事实上，如果忘记写入props，直接用super()，React 在调用构造函数后也会立即将 props 赋值到了实例上。

但是，这并不意味着可以使用super()来代替super(props) 。一旦您这么做了，React 会在构造函数执行完毕之后才给 this.props 赋值，使得 this.props 在 super 调用一直到构造函数结束期间值为 undefined。

当然，有了 Hooks 以后，几乎就不需要 super 和 this 了，但那就是另一个概念了。