reactjs - 变量 in 和 out 构造函数的区别

Question

我正在使用 ES6 创建 React 类

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

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

我的问题是有什么区别或者只是定义 React 类变量的两种方法？

Answer 1

这些方法等效吗？嗯，是的，也不是……

---

使用 Babel？

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

另外，请参阅此 demo 。 (感谢 @garry-taylor 指出这一点)。

---

不使用 Babel？

如果您不使用 Babel，则无法按照您的方式声明 var2(目前情况)。这只是 ESNext 的提案这还不是 ECMAScript 的正式部分。

引用一下 here :

Today ES classes are currently limited to declarative specification of methods, but declarative specification of fields is left to ad-hoc expando mutations on class instances in various places.

This proposal aims to provide a declarative mechanism for specifying fields intended to be placed on classes. Such a mechanism is useful for both developers and tooling alike as it provides a place to specify the intended properties.

还有here :

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

With the ESnext field declarations proposal, the above example can be written as

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

---

摘要

尽管您可以在 Babel/React 中执行此操作，但最好遵循 ES 标准并在构造函数中声明变量；最起码到现在。

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