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

IT技术 javascript reactjs function react-native
2021-05-07 18:59:48

当您有需要在渲染时运行且必须传递变量的函数时,在 React Native 中,大多数人建议应该使用

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

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

functionName = () => {
   //code
}

onPress={this.functionName}

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

如果你这样做:

onPress={this.functionName(variable}

它只会在组件加载时立即运行该功能。

有任何想法吗?

4个回答

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

柯里化是将一个函数分成多个函数的过程,每个函数接受一个参数。在这种情况下,这个方法工作得很好的原因是当你在渲染方法上调用一个函数时,传递的参数自动是event,所以要传递第二个参数,函数必须被柯里化才能接收下一个论点。

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

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

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

onPress={this.functionName(variable)}

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

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

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

祝你好运!

正如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传递,从而绕过柯里化的需要。

在您的构造函数(或任何variable可用的地方)中,您可以只预绑定一次函数:

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

我正在以学习者的身份写这个答案。所以它可能需要一些澄清。当我开始使用 JS 和 React 进行编码时,我遇到了这个问题(感谢 linter)并搜索了一些以了解最佳实践。但是,我找不到像这样直接使用变量的任何优化方法。我对这些情况的处理:

  • 如果我正在渲染项目列表,我会按照此处的建议创建自己的组件:react/jsx-no-bind因此,传递回调函数和变量,完成工作并使用此回调函数。是的,这里有一些工作,创建了一堆处理函数。但是,如果这是优化的方式,弄脏我的手不是问题。

  • 如果变量在 state 中或者来自 props,那么就没有必要像这样在 onClick 方法上使用它。在处理函数中,我们可以访问这个变量。