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

Question

我读过有关处理事件的文章与箭头函数作出反应 。 由于重新渲染问题，该文章的最后一种方式可能不是最好的。

例如

 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) {/* ... */} ）。

---

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

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

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

  }
}

如果你需要创建一个新的功能，每一次，那么你还不如内联VS它返回的功能。 但这是首选。

---

编辑

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

从他的评论：

因为你打电话() => this.handleSelect(i)通过箭头功能， this势必会在this封闭的上下文[其为类指针]的