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

Question

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

在这里的官方Facebook文档中，他们说

通常，您应该在构造函数中初始化状态，然后在要更改时调用SetState。

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

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

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

Answer 1

在您作为链接附加的示例中，他们使用ES类字段（当前在第2阶段）。
这意味着您将需要一些额外的预设/插件的babel（或任何其他JavaScript编译器）来支持它，因为它尚不是Ecmascript的官方规格的一部分。

在另一个示例中，您使用的类构造函数是ES2015的一部分。

两者都会为您带来相同的结果，其中附加到类实例的属性。
这基本上只是原型图案的句法糖。

Answer 2

这与ES6类有关。

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

上面的功能将引发错误，说未定义道具。

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

上面的代码将将this的上下文传递到该功能中，并且可以正常工作。

同样，您的

state = {count: 0}

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

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