我应该将组件中定义的所有函数都包装在 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将有助于避免在功能组件重新呈现时重新生成功能。然而，功能的重新创建并没有造成太大的性能差异。

在以下情况下应首选使用 useCallback

1. 如果您将函数作为 props 传递给子组件，并且子组件通常不需要重新渲染，除非某个 prop 更改，那么 useCallback 可能会阻止某些重新渲染。但是，如果您的状态很复杂，并且您需要将多个这样的函数作为道具传递给子组件，最好将方法转移到useReducer而不是useState将dispatch方法传递给子组件

2. 您正在指定一个函数作为对 的依赖useEffect。在这种情况下，您必须确保不会在每次渲染时重新创建该函数，否则useEffect将在每次渲染时触发。

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