Question

我读过有关handle events in react with arrow functions的文章。由于重新渲染问题，该文章的最后一种方式可能不是最好的。

e.g。

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

我提到你的代码有一个无法解决的问题，因为你没有办法拆分你的curry handleSelect函数，因为你传递的索引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)} )} } }

如果每次都必须创建一个新函数，那么你也可以内联它而不是返回一个函数。但这是首选。

修改的

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

来自他的评论：

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

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

1 个答案: