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

Question

我在ES6 React代码中看到了很多

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

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

好像他们都定义方法bar和baz上Foo,但他们如何不同.

Answer 1

声明的函数编写方式context不同this,

在第一个语法中

bar = () => {
    console.log("bar")
  }

该函数是使用Arrow function语法编写的.

箭头功能没有自己的功能this; 使用this封闭执行的值context.因此this,此函数中的关键字将引用该函数的上下文React class

然而第二个宣言

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

是一个简单的函数,this keyword在这个函数中指的是函数本身的上下文.

因此,当您尝试访问React类属性/函数时,this.state或者this.setState您将在第二种情况下得到错误(如果您还没有在此函数的任何其他位置使用绑定(示例构造函数)),那么它将在第一种情况下工作,因为箭头函数,this表示函数体内与它外部相同的东西.这意味着如果您在组件的自定义函数中使用箭头函数,它们可以使用this并且this.setState没有任何意外.

检查这个答案,了解为什么需要在React类中绑定函数