我应该将组件中定义的所有函数包装在 useCallback 中吗？

Question

据我所知，React 的功能组件中定义的函数会在组件重新呈现时重新生成。由于 useCallback 可以由特定的依赖项触发，因此可以防止不必要地重新生成这些函数。我是否应该将它们每个包装在 useCallback 中，并传递相关依赖项？

import React from 'react'

const Comp = () => {
   const fn1 = useCallback(
     ()=>{
      // do something
　　　}, [dependency1])

   const fn2 = useCallback(
     ()=>{
      // do something
　　　}, [dependency2])

   return (
      //something
   )
}

Answer 1

useCallback 将有助于避免在功能组件 re-renders 时重新生成功能。但是，函数的重新创建并没有太大的性能差异。

在以下情况下应优先使用 useCallback

如果您将函数作为 props 传递给 child 组件并且 child 组件通常不需要 re-rendering 除非某个 prop 发生变化那么 useCallback 可能会阻止某些 re-renders。但是，如果你的状态很复杂并且你需要将多个这样的函数作为道具传递给 children，最好转移到 useReducer 而不是 useState 并传递 dispatch 方法 child 组件
您正在指定一个函数作为 useEffect 的依赖项。在这种情况下，您必须确保不会在每次渲染时都重新创建该函数，否则 useEffect 将在每次渲染时触发。

总体而言，必须明智地而不是盲目地决定使用 useCallback，因为您可能会过度使用 useCallback 提供的优势并最终降低性能，因为 useCallback 也会记住函数和频繁更改的依赖项可能无论如何都需要重新创建函数。

Answer 2

只是在上面的答案中添加另一个案例。有时你可能有一个计算量很大的函数，你可能不希望它在每次渲染时计算结果，所以在这种情况下你也可以使用 useCallback

我应该将组件中定义的所有函数包装在 useCallback 中吗？

Should I wrap all functions that defined in component in useCallback?

reactjs

react-hooks

usecallback