如何将变量传递给函数引用？

Question

如果你有需要在渲染时运行的函数并且必须传递变量,那么在本机做出反应时,大多数人建议应该使用

onPress{() => this.functionName(variable)}

但是,在处理大型列表和复杂组件时,您必须优化代码.为每个renderItem创建一个新函数可以flatList降低性能,有时甚至会很大,具体取决于您创建的每个renderItem的函数数量.所以建议从创建渲染函数到使用函数引用.像这样:

functionName = () => {
   //code
}

onPress={this.functionName}

但是我无法弄清楚如何使用此方法将变量传递给函数.

如果你这样做:

onPress={this.functionName(variable}

它只会在组件负载上立即运行该功能.

有任何想法吗？

Answer 1

我强烈建议使用currying来传递一个论点.

Currying是将函数分成几个函数的过程,每个函数都使用一个参数.在这种情况下,这个方法工作得非常好的原因是因为当你在render方法上调用一个函数时,传递的参数是自动的event,所以为了传递第二个参数,函数必须被curry以便接收下一个论点.

您可以这样定义您的函数:

functionName = variable => event => {
 //code 
}

然后,您可以继续在render方法中调用函数:

onPress={this.functionName(variable)}

如果您想了解更多内容,这是一篇很棒的文章: 在JS中讨论

这个方法非常优雅和有用,因为它不需要在React的render方法中的匿名函数中包装你的函数调用.

在任何其他情况下,您还可以执行官方React Docs建议的内容: React Docs将参数传递给事件处理程序

祝好运!

Answer 2

正如Esther Cuan 所建议的那样，咖喱是要走的路。如果您使用依赖于变量更改的动态创建的函数，则很有可能。那么创建这些函数所花费的时间比每次变量改变时重新渲染组件所花费的时间要少得多。在效率方面，优先级应该是最小化变量更改，以便在函数不断重新定义之前很久就最小化重新渲染。

但是，如果您确定某些功能是一致的，即使通过重新渲染，并且不希望它们被重新声明，您可以通过以下方式实现：

class Component extends React.Component {
  functionName = (e) => {
    const { variable } = this.props
    // run logic on the event and variable
  } 

  render() {
    // some code
    onPress={this.functionName}
  }
}

您会注意到这种方法functionName只声明一次。

这种方法的性能缺陷在于，现在您必须创建另一个组件（可能还有类附带的生命周期方法）才能variable作为 prop传递，从而绕过柯里化的需要。