Question

我见过使用Javascript类的代码使用以下形式（例如React）：

class UserProfile extends Component {
  state = {
    open: false
  }

  handleOpen = () => {
    this.setState({ open: true })
  }
}

为什么将handleOpen实现为设置为函数的属性而不是像：

class UserProfile extends Component {
  state = {
    open: false
  }

  handleOpen() {
    this.setState({ open: true })
  }
}

提前致谢！

Answer 1

这也是一个功能，但它被称为箭头功能，其工作方式与传统的＆＃34;略有不同。实现。它是与ECMAScript 6一起引入的。

这是MDN docs所说的内容：

箭头函数表达式的语法短于function expression，并且不绑定自己的this，arguments，super或new.target。这些函数表达式最适合非方法函数，不能用作构造函数。

主要好处之一是您不需要将this绑定到该函数，因为箭头函数没有自己的this对象：

在箭头功能之前，每个新函数都定义了自己的这个值

这保证了范围安全;偶然使用错误的this是不可能的。它可以说也更具可读性。

然而，一个缺点是箭头函数是匿名的，这意味着当你的代码中出现错误时，很难进行堆栈跟踪。但对于React应用程序，我们可以使用devtool：＆＃39; cheap-module -eval - 源地图＆＃39;从babel到我们的堆栈跟踪中很容易找到错误。

Answer 2

这是关于你方法中this的上下文。如果你像第二个例子那样实现它，this将不会引用组件实例，使用箭头函数，就像在第一个示例this中引用组件实例一样。（由于未使用React.createClass）。

对于第二个示例，您必须在构造函数中执行this.handleOpen = this.handleOpen.bind(this)。

编辑：有关arrow functions的详细信息，请参阅Chris的答案。