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

Question

在react native中，当你有函数需要在渲染时运行并且必须传递变量时，大多数人建议应该使用

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

但是，当处理大型列表和复杂组件时，您必须优化代码。为 flatList 中的每个 renderItem 创建一个新函数会降低性能，有时会大大降低性能，具体取决于您为每个 renderItem 创建的函数数量。因此建议从在渲染时创建函数转变为使用函数引用。像这样:

functionName = () => {
   //code
}

onPress={this.functionName}

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

如果你这样做:

onPress={this.functionName(variable}

它只会在组件加载时立即运行该函数。

有什么想法吗？

Answer 1

我强烈建议使用柯里化(Currying) 来传递参数。

Currying 是将一个函数分成几个函数的过程，每个函数都接受一个参数。在本例中，此方法运行良好的原因是，当您在 render 方法上调用函数时，传递的参数自动为 event，因此要传递第二个参数，函数将必须curried 才能接收下一个参数。

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

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

然后您可以继续在渲染方法中调用您的函数:

onPress={this.functionName(variable)}

如果您想了解更多，这是一篇很棒的文章: Currying In JS

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

在任何其他情况下，您也可以按照官方 React Docs 的建议进行操作: React Docs on passing arguments to event handlers

祝你好运!