constructor（）

constructor里的this.state和直接写this.state区别?
答案：没有区别

在React中constructor表示父类的构造方法，用来新建父类的this对象，这是ES6对类的默认方法，该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor( )方法。

class Point {
}

// 相当于
class Point {
  constructor() {}
}

super( )

在class方法中，继承使用 extends 关键字来实现。子类 必须 在 constructor( )调用 super( )方法，否则新建实例时会报错，因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工，如果不调用super方法；子类就得不到this对象。

super or super(props)

先看个例子：

class Main extends React.Component {
    constructor() {
        super();
        this.state = {count: 1};
    }

    render() {
        return (
            <div>
                {this.state.count}
                <App count={this.state.count}/>
            </div>
        );
    }
}

class App extends React.Component {
    constructor() { //没有写props
        super();
    }

    render() {
        return (
            <div>
                {this.props.count}
            </div>
        );
    }
}

运行后显示正确，当在constructor和super中写了props，也毫无影响，运行显示正确，那么将App组件中的constructor改为：

constructor() {
        super();
        this.state = {c: this.props.count};
}

显示部分改为：

<div>
       {this.state.c}
</div>

那么则会报错

当把App组件中的constructor改为：

constructor(props) {
        super(props);
        this.state = {c: this.props.count};
    }

那么运行显示正确

所以说super()和super(props)的区别就是你是否需要在构造函数内使用this.props，如果需要那么你就必须要写props，如果不需要，那么写不写效果是一样的

参考链接：https://www.jianshu.com/p/1b5e86c68458

待研究：https://www.jianshu.com/p/26c63a17e362

constructor作用：

1.初始化state
2.bind this

constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};
  }

其实也可以被完全替代

• 初始化state： 因为state可以理解为component class中的属性（实例），所以可以按照class中定义属性的方式定义,并且还可以获取到this.props的值

  • 原因： 一旦被该component被实例化会立刻将props赋值this.props

class Counter extends Component {
      state = { counter: this.props.initCount };
      render() {
          return <button onClick={this.onIncrementClick}>{this.state.counter}</button>;
    }}

• bind event handler

  • bind原因是：害怕丢失this指代的对象，如果使用function定义方式定义实例函数，实例函数可能会丢失this：

    使用function定义的函数this指代的是函数的调用者，如果没有明确的调用者，那么就是window

    因此： 我们可以采用箭头函数定义实例函数，因为箭头函数的this用的是闭包中的this

class Counter extends Component {
  state = { counter: 0 };
  onIncrementClick = () => {
    this.setState(this.increment);
  }
  increment(state) {
     return { ...state, counter: state.counter + 1 };
  }
render() {
  return <button onClick={this.onIncrementClick}>{this.state.counter}</button>; 
 }
}

参考地址： https://www.jianshu.com/p/094a1c813f80

constructor(props) {
  super(props);
  this.state = {
    color: props.initialColor
  };
}

• 当心这种模式，因为状态将不会随着属性的更新而更新。保证属性和状态同步，你通常想要状态提升。