javascript - useCallback 与简单函数

Question

什么时候应该使用 useCallback 什么时候应该使用简单的数组函数？ 或者也许我不应该使用第二种方法？

const MyCompenent = (props) => {
  const handleClick = useCallback(()=>{
    //do stuff
  })
  return(
    <SomeCompnent onClick={handleClick} />
  )
}
// or
const MyCompenent = (props) => {
  return(
    <SomeCompnent onClick={()=> {/*do stuff*/}} />
  )
}

Answer 1

根据 docs ,

Pass an inline callback and an array of dependencies. useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders (e.g. shouldComponentUpdate).

这意味着，给定一个纯函数和依赖项，对于给定的一组参数/依赖项，输出将保持不变。所以它所做的是保存给定集合的输出，如果进行了这样的调用，而不是调用实际函数，直接返回先前计算的值。

---

在您的示例中，您没有传递任何依赖项。所以它非常类似于一个简单的函数，但有一个额外的包装层。

您可以为处理程序使用命名函数或内联函数。使用哪个属于个人意见，但我更喜欢使用命名函数，因为它可以保持 JSX 清洁并提供可重用性的可能性。

引用资料:

• > React’s useCallback and useMemo Hooks By Example