Question

我已经看到很多reactjs的地方，函数的调用方式如下

onChange = {this.fileSelected}

我也看到了它的用法，如下所示

onClick = {（）=> this.clearDisplay（）}

我想问一下两者的含义是否相同或有什么区别以及何时使用什么。

Answer 1

如果您使用“第一”：

onChange = {this.fileSelected}

它仅在调用onChange时执行。如果要绑定此函数，则必须在组件类构造函数中声明它，如下所示：

constructor(props) {
    super(props);
    this.state = {
      // your state
    };
    this.clearDisplay = this.clearDisplay.bind(this);
}

第二个：

onClick={() => this.clearDisplay()}

这定义了一个匿名函数，但是没有调用它。仅在触发onClick时才调用它。但是，在某些情况下，使用匿名函数可能会导致性能问题。该匿名函数将在每个渲染器上定义-如果您的组件经常重新渲染，则可能会损害应用程序的性能。如果您确定该组件不会经常显示，则为方便起见，可以使用匿名函数。

Answer 2

onChange={this.fileSelected}

更可取，因为它不会导致不必要的重新渲染。

onClick={() => this.clearDisplay()}

当您传递这样的匿名函数时，实际上将在该类的所有实例上调用该函数，而不是在触发该事件的实例上调用该函数。

从较高的角度看，它们似乎具有相同的行为，但是如果您要在大型代码库中始终使用第二种方法，则应用程序的性能会受到影响。

本文对此问题进行了更深入的介绍：

Answer 3

onChange = {this.fileSelected}

这会将 fileSelected 函数绑定到 onChange 方法。因此调用onChange方法时，它将调用 fileSelected 函数。

同时

onClick = {（）=> this.clearDisplay（）}

这将调用您正在调用 clearDisplay 函数的 onClick 函数。所以当您调用onClick方法时，首先要在其中调用clearDisplay函数的匿名方法。因此基本上在此方法中调用了两个函数。在这种方法中，您可以进行其他通话或其他操作

例如

onClick={() => {
  console.log("this function called")
  this.clearDisplay();
}