我们什么时候可以避免使用构造函数来初始化状态？答案

【问题标题】：When can we avoid using a constructor to initialize state?我们什么时候可以避免使用构造函数来初始化状态？
【发布时间】：2017-12-06 19:25:06
【问题描述】：

在 reactnativeexpress 网站here 上给出的示例中，state = {count: 0} 用于代替构造函数来初始化计数变量。

在官方 Facebook 文档 here 中，他们说

一般来说，你应该在构造函数中初始化状态，然后当你想改变它时调用setState。

所以我创建了一个构造函数以同样的方式初始化count：

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

代码似乎以相同的方式工作（至少在表面上），那么创建构造函数和初始化 count 的例子有什么区别？

【问题讨论】：

【解决方案1】：

在您附加为link 的示例中，他们使用ES Class Fields，这是一个提案（目前处于第2 阶段）。
这意味着您将需要一些额外的 babel 预设/插件（或任何其他 JavaScript 编译器）来支持它，因为它还不是 ECMAScript 官方规范的一部分。

在另一个示例中，您使用 class constructor，它是 ES2015 的一部分。

两者都会得到相同的结果，即附加到类实例的属性。
这基本上只是prototype pattern 的语法糖。

【讨论】：

【解决方案2】：

这更多地与 ES6 类有关。

getFullName() {
  return this.props.firstName + this.props.lastName;
}

上面的函数会抛出一个错误，说 props 没有定义。

getFullName = () => {
  return this.props.firstName + this.props.lastName;
}

上面的代码会将this的上下文传递给函数，并且可以正常工作。

同样，你的

state = {count: 0}

在类的上下文中执行[使用适当的this]。

需要在构造函数中使用this.state 调用相同的state 以将其绑定到适当的上下文。

【讨论】：