我们何时可以避免使用构造函数初始化状态？

Question

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

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

  

通常，您应该在构造函数中初始化state，然后在想要更改它时调用setState。

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

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

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

Answer 1

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

在另一个示例中，您使用属于ES2015的class constructor。

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

Answer 2

这更多与ES6类有关。

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

上面的函数会抛出错误，说没有定义道具。

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

上面的代码会将this的上下文传递给函数，并且效果很好。

同样，你的

state = {count: 0}

在类[使用适当的this]。

的上下文中执行

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