react - construstor使用整理

一、constructor中super的作用

super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。
总结1：在constructor中需要用到this时就必须写super()
总结2（已证实）：只要存在constructor就要调用super()

1. 不写super()

constructor() {
        // super();
        console.log('[][]', this); 
}

有constructor必须写super() 无super()禁止在constructor中使用this

2. 写super()

constructor() {
       super();
       console.log('[][]', this); 
}

结果：

返回该类所有的实例

二、constructor中传不传props的区别

super()------为了能使用this
super(props)------为了能使用this.props

// 两者当然都拿不到
constructor() {
       super();
       console.log('[][]', this.props);   // undefined
}

// 仅能使用props
constructor(props) {
        super();
        console.log('[][]', this.props);   // undefined
        console.log('[][]', props);   // 所有props
}

// 两者都可拿到值
constructor(props) {
        super(props);
        console.log('[][]', this.props);   // 所有props
        console.log('[][]', props);   // 所有props
}