问传递箭头函数与传递函数

EN

第二种情况是创建一个anonymous function，它执行handleChange方法，从而为它提供context。

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

您可能还想看看箭头如何在呈现中实现上下文绑定

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

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)} />

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

在呈现中使用箭头函数可能会导致一些性能问题。

我建议您在类属性中使用箭头函数，但必须使用第2阶段的特性。

在这里，您会发现两个选项之间有一个很好的比较：

https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56