时间戳

首页 > 解决方案 > 如何在不创建箭头函数的情况下在 React 中将带有参数的函数作为 prop 传递

javascript - 如何在不创建箭头函数的情况下在 React 中将带有参数的函数作为 prop 传递

问题描述

我有一个功能

doSomething = (id) => {
  console.log(id) 
}

我想在 onPress 中调用这个函数。我知道这样做的一种方法是在 onPress 中使用另一个箭头函数，如下所示：

<Text onPress={() => this.doSomething(id)}>Do Some Work</Text>

但是在每次重新渲染时都会创建一个新函数并降低性能，这可以通过调用这样的函数来避免，onPress={this.doSomething}只有在没有要传递的参数时。是否可以使用参数进行类似的操作，以便我可以提高应用程序的性能

标签： javascriptreactjs

解决方案

你是绝对正确的，箭头函数每次都会创建一个新函数，这就是为什么 React 的浅等道具比较返回的原因false。

您可以使用useCallbackhook 来创建一个 momoized 回调。所以，我相信你的函数id中有变量。render

const doSomething = useCallback((e) => {
  console.log(id)
}, [id])


<Text onPress={doSomething} />

每次更改变量时，都会更改记忆doSomething功能。id

但是，默认情况下，如果父组件更新，那么每个子组件也会更新。除非它有memo包装器，或者shouldComponentUpdate定义了生命周期钩子。

您可以在Dan Abramov 撰写的一篇精彩文章中阅读更多关于 React 组件上下文中的记忆化的信息。

UPD

如果您使用的是类组件，那么您可以从类方法中返回一个 momized 函数。

class Component extends React.Component {
 
  // I used Lodash memoize for example

  doSomething = _.memoize((id) => {
    return function (e) {
      console.log(id)
    }
  })

  render () {
    return (
      <Text onPress={doSomething(id)} />
    )
  }
}

推荐阅读