Passing an arrow function vs passing the function

Question

Say I have a function:

handleChange = (e) => {
  this.setState({ [e.target.id]: e.target.value });
}

What is the difference between the following:

1.

<FormControl value={this.state.password} onChange={this.handleChange} />

<FormControl value={this.state.password} onChange={(e) => this.handleChange(e)} />

Answer 1

第二种情况 ananonymous function被创建，它执行该handleChange方法并从而为其提供context.

每次 React 组件渲染时，都会在第二种情况下创建一个新函数，而不是在第一种情况下，因为向处理程序提供了相同的 handleChange 方法引用。

你可能还想看看渲染中的箭头函数是如何实现上下文绑定的

Answer 2

假设你的事件处理程序在你的类中是这样写的

handleChange = (e) => {
  this.setState({ [e.target.id]: e.target.value });
}

让我们来看您提到的第一个例子。

<FormControl value={this.state.password} onChange={this.handleChange} />

在这里，对于每个更改，您都将传递handleChange 函数的内存引用，并向其传递事件对象。

转到第二种方法。

<FormControl value={this.state.password} onChange={(e) => this.handleChange(e)} />

在这里，您将创建一个新的匿名函数，每次发生事件更改时，该函数都会将事件对象作为参数。如果您有较大的列表项，这会大大增加垃圾收集。在这种情况下添加箭头函数是多余的，因为由于您handleChange最初编写方法的方式，上下文已经被绑定。作为性能提示，如果您在类中使用箭头函数，请对事件处理程序使用选项 1。

Answer 3

在第一种情况下，您将用作handleChange事件处理程序。

在第二种情况下，您使用一个新函数作为事件处理程序，该函数又调用handleChange.

不同之处在于第二个示例中将有两个函数调用。否则它们是相同的。

换句话说：没有必要使用第二种形式，甚至可能不利于重新渲染。