Question

我有一个功能

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

我想在onPress内部调用此函数。我知道一种方法是通过在onPress内使用另一个箭头功能，如下所示：

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

但是，每次重新渲染时都会创建一个新函数，并且会降低性能，只有在没有参数要传递时才调用此类onPress={this.doSomething}这样的函数才能避免。使用参数可以实现类似的目的，这样我就可以提高应用程序的性能

Answer 1

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

您可以使用useCallback钩子来创建动态回调。因此，我相信您在id函数中拥有render变量。

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


<Text onPress={doSomething} />

每次更改doSomething变量时，都会更改已记忆的id函数。

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

您可以在Dan Abramov撰写的精彩article中读到更多有关React组件上下文中的记忆的信息。

UPD

如果您使用的是类组件，则可以从类方法中返回经过妈妈化的函数。

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

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

1 个答案: