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

小编典典

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

reactjs

当您具有需要在渲染器上运行且必须传递变量的函数时，在React native中，大多数人建议应使用

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

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

functionName = () => {
   //code
}

onPress={this.functionName}

但是我还不能弄清楚如何使用这种方法将变量传递给函数。

如果您这样做：

onPress={this.functionName(variable}

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

有任何想法吗？

阅读 314

2020-07-22

共1个答案

小编典典

就像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作为道具传递，从而绕开了对计算的需求。

2020-07-22