reactjs - 我应该将组件中定义的所有函数包装在 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 可能会阻止某些重新渲染。但是，如果您的状态很复杂，并且需要将多个此类函数作为 props 传递给子级，那么最好转向 useReducer而不是useState并传递dispatch子组件的方法

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

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