Javascript 反应结合功能

我见过很多地方调用函数，如下所示

onChange={this.fileSelected}

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

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

我想问一下，它们的意思是否相同，或者有什么不同，以及何时使用什么。

如果您先使用：

onChange = {this.fileSelected}

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

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

第二条：

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

---

这定义了一个匿名函数，但不调用它。只有在触发onClick时，才会调用它。但是，在某些情况下，使用匿名函数可能会导致性能问题。该匿名函数将在每次渲染时定义—如果您有一个组件经常重新渲染，则可能会影响应用程序的性能。如果您确信不会经常呈现组件，那么为了方便起见，匿名函数应该可以使用。

onChange={this.fileSelected}

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

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

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

从更高的层次来看，它们可能具有相同的行为，但如果在大型代码库中始终使用第二种方法，则应用程序的性能将受到影响

这篇文章更深入地讨论了这个问题：

onChange={this.fileSelected}

这将把fileSelected函数直接绑定到onChange方法。所以，当调用onChange方法时，它将调用fileSelected函数

当

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

这将调用onClick函数，您将在其中调用clearDisplay函数。所以，当您调用onClick方法时，第一个匿名调用，其中clearDisplay函数被调用。所以在这个方法中，基本上有两个函数被调用。在这种方法中，你可以打额外的电话或做其他事情

e、 g

---

onChange={this.fileSelected}

不会在每次渲染时执行。它将仅在调用onChange时执行。根据ES6，回调函数就是这样做的。第一个选项能够避免不必要的重新加载。它不会自动让一切变得更好。

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