Question

我在ES6 React代码

中看到了很多

class Foo extends React.Component {
  bar = () => {
    console.log("bar")
  }

  baz() {
    console.log("baz")
  }
}

似乎他们在bar上定义了baz和Foo方法，但它们有何不同。

Answer 1

声明的不同之处在于函数的编写方式和context的{{1}}，

在第一种语法中

this

该函数使用Arrow function语法编写。

箭头功能没有自己的bar = () => { console.log("bar") }; this的{{1}}值使用了封闭执行this。因此内部有context个关键字此函数将引用this
的上下文

然而第二个宣言

React class

是一个简单的函数，此函数中的baz() { console.log("baz") }指的是函数本身的上下文。

因此，当您尝试访问React类属性/函数（如this keyword或this.state时），在第二种情况下会出现错误（如果您没有在此函数的其他任何位置使用绑定（例如构造函数））然而它会在第一种情况下起作用，因为对于箭头函数，this.setState在函数体内意味着与在它之外的事物相同。这意味着如果您在组件的自定义函数中使用箭头函数，他们可以毫不费力地使用this和this。

在 why you need to bind functions in React classes

上查看此答案

Answer 2

之前的答案绝对正确，这也是您希望在反应类中使用箭头函数的原因。

我只是想指出一个微妙的差异，这是他们在课堂上使用以避免意外的潜在陷阱......

在类上定义的箭头函数作为属性添加到实例中，恰好是一个函数，而不是定义为箭头函数将将函数添加为方法到班级的原型。

在永远不会扩展的React组件中，这很好，但如果出现这种情况，你想要子组化一个组件，你将无法覆盖箭头函数，期望能够通过{{1来调用基类}，你只能完全覆盖它

super

Answer 3

为简单起见，两者都是平等的：

bar =（）=＆gt; {...}
this.bar = this.bar.bind（this）

ES6中React类定义方法的两种方法有什么区别

3 个答案: