javascript - 为什么以 ES6 方式定义 React 组件构造函数行不通？

Question

我正在尝试转换它:

constructor () {
  ...
}

对此:

constructor = () => {
  ...
}

但这行不通。您能否解释一下为什么不允许这样做？它是否有任何危险，或者只是一个任意选择不允许构造函数是非静态的？

Answer 1

ES6 类基本上只是旧 ES5 原型(prototype)继承周围的语法糖。 ES6 中的构造函数类似于 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 正在将函数从类定义中取出，并将其移至构造函数中。这样，每次创建一个对象时，它都会获得自己的函数实例

然后我们就进入了你的场景。这会告诉 babel 做什么？

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

因此，从 boundFunction 示例来看，babel 应该将此函数移至构造函数中，但从第一个示例来看，它也应该是> 构造函数。这些是互斥的东西，所以 babel 会给你一个错误。