在构造函数和状态中初始化状态

Question

除了访问道具之外，在ES6中设置初始状态的两种方法之间有什么区别？

constructor(props) {
    super(props);

    this.state = {
        highlighted: 5,
        backgroundColor: '#f3f3f3', 
    }
}

VS

 state = {
        highlighted: 5,
        backgroundColor: '#f3f3f3',
    }

Answer 1

前者只是后者的语法，所以访问构造函数参数确实是唯一的区别。

This is how it gets transpiled by Babel仅使用babel-preset-stage-2预设来处理建议的类属性语法：

class Example {
  state = {
    highlighted: 5,
    backgroundColor: '#f3f3f3',
  }
}

输出：

class Example {
  constructor() {
    this.state = {
      highlighted: 5,
      backgroundColor: '#f3f3f3'
    };
  }
}

这也是使用类属性箭头函数声明函数将其绑定到实例的原因。

It gets moved into the constructor，其中箭头函数保留的this值是新实例。

class Example {
  boundFunction = () => {
    // ...
  }
}

输出：

class Example {
  constructor() {
    this.boundFunction = () => {
      // ...
    };
  }
}