在React中，使用函数式组件时如何记住一个内联函数？

Question

箭头函数存在性能问题，将事件和参数传递给事件处理程序的最佳方法应该是什么？

例如：

选项 1：

 <div
    onClick={setPerson(name)}
 />

 const setPerson = (name) => (e: any): void => {
   setPerson(name)
   e.stopPropagation()
 }

选项 2：

<div
  onClick={(e) => setPerson(null, name, e)}
/>

 const setPerson = (name, e): void => {
   setPerson(name)
   e.stopPropagation()
 }

Answer 1

如果你想防止子组件因为获得新功能的道具而重新渲染，你可以像这样记忆它：

const memoizedSetPerson = React.useCallback(() => { // add the parameters
 // do what you want here
}, [setPerson])

用法：

<div onClick={memoizedSetPerson} />


const memoizedSetPerson = React.useCallback((e) => {
     // e will be the event
}, [setPerson])

useCallback 将 return 一个记忆函数，所以就像使用任何其他函数一样使用它。

In React, how to memorize an inline function when using functional components?