constructor、super()、super(props)的区别

对于初学react的人来说，constructor好像在每一个组件里面都是有写的，但是大部分人也都不知道他的作用的什么，更不用说里面的super了，本篇文章就带大家缕一缕这三者的关系。

1：constructor与super()

众所周知，react的组件大部分采用的都是es6的class语法糖写法，而constructor就是class里面的默认方法，是必须的，如果我们没有定义，那么系统会默认生成一个constructor方法。
而super()，是在constructor里面，用于继承父类的，因为子类是没有自己的this的，需要从父类继承，而super就是子类继承父类的方法。
简单一点来说，就是你写class类的时候可以不写constructor，系统会默认帮你生成一个。但是你写constructor的时候，就必须要写super()，否则就用不了this。

export default class Test extends Component {
    state = {
        name: "Jack"
    }
    render() {
        return (
            <div>
                {this.state.name}
            </div>
        )
    }
}

如上面的代码，没有定义constructor，此时代码还是可以正常运行，因为系统默认就帮你定义了一个constructor，它相当于下面的代码

export default class Test extends Component {
    constructor(){
        super()
    }
    state = {
        name: "123"
    }
    render() {
        return (
            <div>
                {this.state.name}
            </div>
        )
    }
}

但是，如果如果不写super的话，下面的代码就会报错

export default class Test extends Component {
    constructor(){
        
    }
    state = {
        name: "123"
    }
    render() {
        return (
            <div>
                {this.state.name}
            </div>
        )
    }
}

此时会因为找不到this而报错，因为子类没有自己的this。

2：super()与super(props)

super()与super(props)，区别就是，有没有传入props参数。
我们都知道，props是父类传递给子类的值，那这是不是意味着要用父类传递给子类的值的时候，就需要传参props呢？答案是不用的，我们来看一下下面的例子。

// 父类
export default class App extends Component {
  return (
    <div className="App">
      <Test name="faName"></Test>
    </div>
  );
}

// 子类
export default class Test extends Component {
    componentDidMount() {
        console.log(this.props)
    }
    render() {
        return (
            <div>
                <div>{this.props.name}</div>
            </div>
        )
    }
}

此时代码能够顺利运行，页面上也能显示出 faName，而且componentDidMount生命周期，也能够打印出props的值，那么，super(props)的作用的什么呢？
答案是：在 constructor 函数里面，需要用到props的值的时候，就需要调用 super(props)

export default class Test extends Component {
    constructor(props) {
    	super()
        this.state = {
            name: this.props.name
        }
    }
}

如上面的代码会报错找不到name，因为如果在constructor里，没有调用super(props)，是获取不到props的值的。但是这个也仅仅局限于，constructor函数，其他生命周期函数，是受影响的。

总结

1. class语法糖默认会帮你定义一个constructor，所以当你不需要使用constructor的时候，是可以不用自己定义的
2. 当你自己定义一个constructor的时候，就一定要写super()，否则拿不到this
3. 当你在constructor里面想要使用props的值，就需要传入props这个参数给super，调用super(props)，否则只需要写super()