useCallback：什么时候使用？ 有什么缺点/性能问题吗？

Question

有关于什么是 useCallback 以及必要时使用它的文章。 但是在一个大型项目中，很难理解何时开始使用它。 因此，如果我将它用于每个用例，它会影响应用程序的性能吗？

Answer 1

useCallback和useMemo是辅助钩子，主要目的是添加额外的依赖检查层以确保同步性。 通常你想使用useCallback来确保一个你知道如何改变而 React 不会改变的prop的稳定签名。

例如，通过props传递的function （参考类型）

const Component = ({ setParentState }) =>{
    useEffect(() => setParentState('mounted'), [])
}

假设您有一个子组件，在安装时必须在父组件中设置一些 state（不常见），上面的代码将在useEffect中生成未声明依赖项的警告，所以让我们将setParentState声明为依赖项以由 React 检查

const Component = ({ setParentState }) =>{
    useEffect(() => setParentState('mounted'), [setParentState])
}

现在，这种效果在每次渲染时都会运行，不仅在安装时，而且在每次更新时。 发生这种情况是因为setParentState是一个function ，每次调用 function Component时都会重新创建它。 你知道setParentState不会改变它的签名超时，所以告诉 React 是安全的。 通过将原始助手包装在useCallback ，您就可以做到这一点（通过添加另一个依赖检查层）。

const Component = ({ setParentState }) =>{
   const stableSetter = useCallback(() => setParentState(), [])

   useEffect(() => setParentState('mounted'), [stableSetter])
}

那里有 go。 现在React知道stableSetter不会在生命周期内更改它的签名，因此效果不需要不必要地运行。

在旁注useCallback它也像useMemo一样使用，以优化昂贵的 function 调用（记忆）。

useCallback的两个主要目的是

• 优化依赖引用相等的子组件以防止不必要的渲染。 字体

• 记忆昂贵的计算计算

有什么缺点/性能吗？

useCallback主要用于通过仅在需要时更改内容来优化性能。 它通过添加一个依赖层来实现这一点，就像useEffect一样（类似于React本身如何知道在 DOM 中必须如何改变某些东西），但是作为每一种性能优化技术，如果你用不必要的东西填充整个应用程序，它可能会倒退useCallback ， useMemo ， React.memo的性能将 go 反过来。

所以关键是要明智地使用，仔细选择什么需要有稳定的签名，什么不需要。