Question

我正在使用ES6创建React Class

class MyClass extends React.component {
    constructor(props){
        super(props);
        this.var1 = this.props.myValue;
    }
    var2 = this.props.myValue;
}

如您所见，可以使用var1调用var2和this.varName。

我的问题是有什么不同，或者只有2种方法来定义React类变量？

Answer 1

目前有一个动作停止使用构造函数方法来设置状态和局部变量。

这与ES16正确使用范围/绑定有关。

class MyClass extends React.component {
   var1 = this.props.myValue;
   var2 = this.props.myValue;
   doSomething = () => { /* "this" will be the component */ }
}

这比

更好

class MyClass extends React.component {
   constructor(props){
      this.var1 = this.props.myValue;
      this.var2 = this.props.myValue;
      this.doSomething = this.doSomething.bind(this);
   }

   doSomething() {
       // do something
   }
}

Answer 2

这些方法是否相同？嗯，是的，不是......

使用Babel？

如果您使用 Babel 编译器（如果您使用的是 JSX ），那么是的，这些方法是等效的，您可以使用您喜欢的任何一种方法。

另请参阅此demo。（感谢@garry-taylor指出这一点。）

不使用Babel？

如果您不使用 Babel ，则无法按照您目前的方式声明var2。它只是ESNext的提案，它还不是ECMAScript的官方部分。

供参考，看看here：

今天ES类目前仅限于方法的声明性规范，但是字段的声明性规范留给了不同地方的类实例上的ad-hoc expando突变。

该提案旨在提供一种声明机制，用于指定要放在类上的字段。这种机制对于开发人员和工具都很有用，因为它提供了指定预期属性的位置。

还有here：

class Counter extends HTMLElement {
  constructor() {
    super();
    this.x = 0;
  }

使用ESnext字段声明提议，上面的示例可以写为

class Counter extends HTMLElement {
  x = 0;
  constructor() {
    super();
  }

摘要

即使您可以在Babel / React中执行此操作，最好遵循ES标准并在构造函数中声明您的变量;至少现在（是。

但是，在React中，这些是等效的，如果提案通过，最终两个方法可能在ES中也会相同。

变量输入和输出构造函数之间的区别

2 个答案:

使用Babel？

不使用Babel？

摘要