如何在 React 中传递 function 和 arguments 作为道具而不创建箭头 function

Question

我有一个 function

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

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

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

但是随后在每次重新渲染时都会创建一个新的 function 并降低性能，这可以通过仅在没有要传递的参数时调用类似onPress={this.doSomething}的函数来避免。 arguments 是否可以做类似的事情，这样我就可以提高我的应用程序的性能

Answer 1

你是绝对正确的，箭头 function 每次都会创建一个新的 function ，这就是为什么 React 的 shallow equal props 比较返回false 。

您可以使用useCallback钩子来创建一个 momoized 回调。 所以，我相信你的render中有id变量 function。

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


<Text onPress={doSomething} />

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

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

您可以在 Dan Abramov 撰写的一篇很棒的文章中阅读更多关于 React 组件上下文中的记忆化的内容。

更新程序

如果您正在使用 class 组件，那么您可以从 class 方法返回一个 momized function。

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