为什么用ES6方式定义React Component构造器不起作用？

Question

我正在尝试将其转换为：

constructor () {
  ...
}

对此：

constructor = () => {
  ...
}

但这是行不通的。 您能否解释为什么不允许这样做？ 是以某种方式危险吗？还是不允许构造函数为非静态的只是任意选择？

Answer 1

ES6类基本上只是围绕旧ES5原型继承的语法糖。 ES6中的constructor函数类似于ES5中的函数本身。 例如：

class foo {
    constructor () {
       console.log('hello world');
    }
}

等效于：

function foo() {
    console.log('hello world');
}

您要尝试在类定义中使用的箭头功能还不是ecmascript的一部分，但是由于babel的编译器，您现在可以使用它们了。 babel的工作如下：

class foo {
   boundFunction = () => {
       console.log('bound');
   }
}

变为：

function foo() {
    this.boundFunction = () => {
        console.log('bound');
    }
}

请注意，babel将函数从类定义中移出并将其移至构造函数中。 这样，每次创建对象时，它都会获得自己的函数实例

但是，接下来我们来谈谈您的情况。 这将告诉巴别尔做什么？

class foo {
   constructor = () => {
       console.log('bound');
   }
}

因此，从boundFunction示例中，babel应该将该函数移至构造函数中，而从第一个示例中起，它也应该是构造函数。 这些是互斥的，所以babel给您一个错误。