Question

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

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

祝你好运！

Answer 2

正如Esther Cuan所暗示的那样，currying是要走的路。如果您使用依赖于变量更改的动态创建函数，则可能会出现这种情况。然后，创建这些函数所花费的时间远远少于每次变量更改时重新渲染组件所花费的时间。效率方面，优先考虑的是最大限度地减少变量变化，以便在不断重新修改功能之前尽可能减少重新发布。

但是，如果您确定某些功能是一致的，即使是通过重新呈现，并且不希望它们在这里被重新声明，那么您将如何实现这一目标：

d[0]

你会注意到这种方法a只被声明一次。

这种方法的性能缺陷是，现在你必须创建另一个组件（以及可能的类附带的生命周期方法），以便将class Component extends React.Component { functionName = (e) => { const { variable } = this.props // run logic on the event and variable } render() { // some code onPress={this.functionName} } }作为道具传递，以避免需要钻营。

Answer 3

在你的构造函数中（或只要variable可用），你可以只预先绑定一次函数：

this.handle_press = this.functionName.bind(this, variable);

Answer 4

我是以学习者的身份写这个答案的。所以可能需要一些澄清。当我开始用JS和React编写代码时，我遇到了这个问题（感谢linter）并且搜索了一下以学习最佳实践。但是，我找不到像这样直接使用变量的任何优化方法。我为这些情况做了什么：

如果我正在渲染项目列表，我按照此处的建议创建自己的组件：react/jsx-no-bind因此，传递一个回调函数和变量，完成工作并使用此回调函数。是的，有些人在这里工作，创造了一堆处理功能。但是，如果这是优化的方式，弄脏我的手不是问题。
如果变量处于状态或来自props，则无需像这样在onClick方法上使用它。在处理程序函数中，我们可以访问此变量。

Answer 5

您可以传递variable作为该元素的值参数，例如

<button
 value={variable}
 onPress={this.functionName}>
 click
</button>

然后，您可以将变量“提取”为：

fuctionName = e => {
 const yourVariable = e.target.value;
 // now you have access to your variable through the const declaration
}

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

5 个答案: