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

时间:2017-12-06 19:25:07

标签: javascript facebook react-native constructor ecmascript-6

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

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

  

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

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

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

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

2 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:0)

这更多与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以将其绑定到适当的上下文。