在React中编写事件处理程序的最佳方式是什么

Question

我读过一篇关于在react with arrow函数中处理事件的文章。由于重新渲染的问题，文章中的最后一种方式可能不是最好的。

例如

class Example extends React.Component {
handleSelect = i => e => {
console.log(i)
}
render() {
return {this.state.language.map(item, i) => (
<ListItem 
...
onPress={this.handleSelect(i)}  // re-render sub component every time the Example render() because of the annoymous function
/>
)}

}
}

我想知道在React中用哪种方式编写事件处理程序最好？

Answer 1

为了获得React的最佳性能，您需要最小化渲染过程中创建的对象数量。作为提醒，函数声明(例如function myFunc或const func = () => {})创建一个对象。

---

我认为您的代码有一个无法解决的问题，因为当调用handleSelect时，您正在创建内部函数的新实例：

handleSelect = i => e => {
console.log(i)
}

我将使用function表示法重写它，因为它更清楚发生了什么(但在实践中我更喜欢箭头函数)：

handleSelect = function (i) {
return function (e) {
console.log(i);
}
}

这里的问题是每次渲染的当您调用handleSelect时，它会创建一个全新的内部函数(即function (e) {/* ... */})。

---

我提到您的代码有一个无法解决的问题，因为您正在传递在呈现函数中创建的索引i，所以无法拆分当前的handleSelect函数。因为这种状态在其他任何地方都不存在，所以每次都必须创建一个新函数来关闭它，这没关系。

我甚至会这样重构你的代码：

class Example extends React.Component {
// as @RickJolly mentioned, this method doesn't have to be arrow
handleSelect (i) {
console.log(i)
}
render() {
return {this.state.language.map(item, i) => (
<ListItem 
...
onPress={() => this.handleSelect(i)}
)}
}
}

如果每次都必须创建一个新函数，那么与返回函数相比，您还不如内联它。不过这是偏好。

---

编辑

正如@RickJolly提到的，如果你的方法不使用this，那么它就不应该是一个箭头函数。

根据他的评论：

由于您通过箭头函数调用() => this.handleSelect(i)，因此this绑定到封闭上下文的this(它是类指针)