React 中的constructor

以前一直觉得constructor必须声明，否则会造成无法获取到this.props方法，其实：

如果你不需要初始化你的state属性，也不需要bind任何方法，那么完全不需要显示写出这个构造方法。

时间

这个方法会在组件实例化的时候被调用，此时组件并没有被mount。如果这个方法被定义了，而且你还要在这个方法中写statement，那么请先进行super(props)的调用：

否则会造成this.props不存在（因为此时实例还没创建），也就是说，如果你的state初始值需要props赋值，那么请必须先进行super(props)的调用

绝对不可以这样做

constructor(props) {
 super(props);
 // Don't do this!
 this.state = { color: props.color };
}

作用

• 初始化state
• binding event handler method to instance

其实也可以被完全替代

• 初始化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>; 
   }
  }