在React组件中,foo(){}和bar =()=> {}之间的区别是什么？我何时应该使用哪个？

Question

巴贝尔正在发挥其魔力,这使我对正在发生的事情感到非常困惑.

这个反应组件中foo和bar之间有什么区别？什么时候应该使用哪个？

class MyComponent extends Component {
  foo() {
    //...
  }
  bar = () => {
   //... 
  }
}

(我自己的猜测是foo在原型中,bar在构造函数中？反正我不知道我在说什么)

Answer 1

我自己的猜测是foo在原型中,而bar在构造函数中？

这是完全正确的.

foo() {}

在此上下文中是方法声明,并将值分配给原型.它相当于

MyComponent.prototype.foo = function() {};

bar = ... ;

另一方面是一个类领域.这是在构造函数中为实例分配属性的简写表示法:

constructor() {
  this.bar = ... ;
}

由于箭头函数的工作方式,使用带箭头函数的类字段基本上可以让您创建"绑定"方法.

有关箭头函数的更多信息:箭头函数与函数声明/表达式:它们是等效/可交换的吗？

什么时候应该使用哪个？

tl; dr是:当需要绑定函数时,使用类字段+箭头函数.

什么时候需要绑定功能？每当你想this在函数内部指一个特定的值,但你不控制如何调用该函数.

这主要是事件处理程序(即传递给其他函数/组件的函数)需要访问组件实例(例如,调用this.setState或访问this.props/ this.state)的情况.

你不必须,虽然使用它,你也可以绑定的方法,当你需要.但是,在构造函数中仅绑定一次方法对于React组件是理想的,因此,如果方法作为事件处理程序传递,则始终传递相同的函数对象.

如另一个答案所述,这与React完全没有关系.类字段可能在今年正式融入该语言.