Question

通常，如果您引用的方法后面没有（），例如 onClick = {this.handleClick}，则应绑定该方法。

我不清楚onClick={this.handleClick}和onClick={this.handleClick()}之间的区别，也不清楚为什么使用()意味着您不需要绑定this。

在理解方面的任何帮助将不胜感激。

Answer 1

this.handleClick是指一个功能。 this.handleClick()调用该函数。

使用()消除了绑定的必要，仅仅是在调用this.handleClick() javacript“知道” this所指的上下文中。

所以，如果我打电话给我

this.handleClick();

从上下文中可以清楚地知道this是什么。

但是如果我打电话

const foo = this.handleClick;
foo();

我仍然在调用相同的函数，但是对this的原始引用已经消失了。

至于“为什么”。我不知道这样做的历史原因，但这是定义Javascript的副作用。如果不是这种情况，JavaScript语言可能会更好一些，但这就是该语言的工作方式。我不确定这是否是令人满意的答案。

Answer 2

当影响对新变量的函数引用时，不会复制上下文（该函数内部由this引用）。

在下面的代码段中，saysHi函数使用this。它引用的对象根据其调用或绑定的方式而变化。

const jack = {
  name : 'Jack',
  saysHi : function() {
    console.log("Hi, I'm " + this.name);  
  }
};
jack.saysHi(); // this will reference jack

const someoneSaysHi = jack.saysHi;
someoneSaysHi(); // this will not reference jack anymore, but the global object window

const joe = { name : "Joe" };
const joeSaysHi = someoneSaysHi.bind(joe);
joeSaysHi(); // this will reference joe, because you bound the function to joe

通过调用jack.saysHi()，这将是对jack的引用。我用调用函数。操作符，在jack对象的上下文中调用它。
通过设置const someoneSaysHi = jack.saysHi ;然后调用someoneSaysHi ()，我在没有任何上下文的情况下调用它。因此this将成为对全局对象window的引用。这是语言的功能。
通过将someoneSaysHi绑定到joe上下文，我创建了一个新函数，在该函数中，这将是对joe的引用。

更完整的答案：How does the “this” keyword work?

现在，关于您的问题：

通常，如果您引用的方法后面没有（），例如 onClick = {this.handleClick}，则应绑定该方法。

onClick属性需要一个函数引用才能附加到click事件。

onClick={this.handleClick()}将立即调用this.handleClick（具有正确的上下文），并将click事件附加到this.handleClick函数的返回值。
onClick={this.handleClick}，不绑定任何内容，会将click事件附加到handleClick函数，但是在这种情况下，您的this函数内部的handleClick将是事件的当前事件目标（您单击的元素）-这是事件处理程序的功能。
onClick={this.handleClick.bind(this)}将click事件附加到一个新功能参考，该新功能参考绑定到this所引用的对象。

如果用（）引用一个类方法，为什么不必绑定它呢？

2 个答案: