为什么作为箭头函数的方法在React类中起作用而在普通类中不起作用？

Question

我们可以将组件类的方法声明为箭头函数，如下所示：

class SomeComponent extends React.Component {
  someMethod = () => { // <<----- This does not throw error
    // some code
  }
}

..不会引发任何错误，但是下面的错误：

class SomeNormalClass {
  someMethod = () => { // <<----- This throws error
    // some code
  }
}

在=之后显示意外的someMethod。如果我将someMethod改回正常功能，而不是将其声明为箭头功能，则效果很好，如下所示。为什么？

class SomeNormalClass {
  function someMethod() { // <<----- This works fine
    // some code
  }
}

Answer 1

第一个示例中的someMethod是类的属性，而不是方法。 BabelJS支持类中的属性，但不支持本机js。 您可以看到差异here。您应该在constructor中为Vanilla JS添加一些属性。

Answer 2

someMethod = () => {...}是类字段。类字段是stage 3 proposal，它本身不受支持，需要由编译器（Babel）进行转换； someMethod类字段是构造函数代码的语法糖：

constructor() {
  this.someMethod = () => {
    // some code
  }
}

Both SomeComponent and SomeNormalClass are expected to work（在相同条件下使用）。它们都不能在本地运行。