如何在React中传递带参数的函数作为属性而不创建箭头函数

Question

我有一个函数。

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

我想在 onPress 中调用这个函数。我知道一种方法是在 onPress 中使用另一个箭头函数，像这样：

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

但是，每次重新渲染都会创建一个新的函数，这会降低性能，可以通过仅在没有要传递的参数时调用类似于 onPress={this.doSomething} 的函数来避免。是否有类似的方法可以用于带有参数的情况，以便提高应用程序的性能？

- Sounak Biswas

---

不可能用一个参数做类似的事情。但是除非每次重新渲染都有大约10000个参数，否则我认为性能差异不会被察觉到... - undefined

我不这么认为，因为该函数是以事件对象作为参数调用的。 - undefined

Answer 1

你说得很对，箭头函数每次都会创建一个新的函数，这就是为什么React的浅层比较props会返回false的原因。你可以使用useCallback钩子来创建一个记忆化回调函数。所以，我相信你在render函数中有id变量。

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


<Text onPress={doSomething} />

记忆化的doSomething函数在每次更改id变量时都会发生变化。

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

您可以在由Dan Abramov撰写的优秀文章中了解有关React组件上下文中的记忆化的更多信息。

更新

如果您正在使用类组件，则可以从类方法返回一个记忆化的函数。

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)} />
    )
  }
}

- Ivan Burnaev

---

我正在使用一个类组件而不是函数组件。这个 id 变量只在 render() 作用域中可用，所以这个函数也应该在同一个作用域中吗？ - undefined

更新了我的答案。主要思想是在函数周围使用记忆化包装器。可以是任何东西：_.memoize，甚至是自定义实现（非常简单）。不要忘记为您的<Text />使用PureComponent或在shouldComponentUpdate中定义自定义逻辑。 - undefined