constructor笔记01

官网描述：如果不初始化state或不进行方法绑定，则不需要为React组件实现构造函数。

如此只有两种情况需要写constructor

1.初始化state

class Demo extends React.Component {
    constructor() {
        super()
        this.state = {name:'dayDreamer'}
    }
    render() {
        return (
            <div>
                111
            </div>
        );
    }
}

2.进行方法绑定

class Demo extends React.Component {
    constructor() {
        super()
        this.state = {name:'dayDreamer'}
        this.log = this.log.bind(this)
    }
    render() {
        <div>
            <button onClick={this.log}>按钮</button>
        </div>
    };
    log() {
        console.log('被点击')
    }
}

若不存在以上情况，constructor构造器可以省略不写

name在构造器里和super里传与不传props有什么影响呢？

有以下几种情况：

1. 都传props

constructor(props) {
    super(props),
    console.log(this.props) //此处输出props对象
}

2. 都不传props

 constructor() {
    super(),
    console.log(this.props) //此处输出undefined
 }

3. 构造器传但是super不传props

constructor(props) {
    super()
    console.log(this.props) //此处输出undefined
}

4. 构造器不传但是super传props

constructor() {
    super(props)
    console.log(this.props) //报错
}

且ES6规定，子类必须在constructor()方法中调用super()，否则就会报错。这是因为子类自己的this，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法。如果不调用super()方法，子类就得不到自己的this对象。

为什么子类的构造函数，一定要调用super()？原因就在于ES6的继承机制，与ES5完全不同。ES5的继承机制，是先创造一个独立的子类的实例对象，然后再将父类的方法添加到这个对象上面，即"实例在前，继承在后"。ES6的继承机制，则是先将父类的属性和方法，加到一个空的对象上面，然后再将该对象作为子类的实例，即"继承在前，实例在后"。这就是为什么ES6的继承必须先调用super()方法，因为这一步会生成一个继承父类的this对象，没有这一步就无法继承父类。