我应该在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也会记住函数，并且频繁变化的依赖项可能无论如何都需要重新创建函数。

Answer 2

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