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

Question

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

javascriptreactjsreact-hooksusecallback

3

有关useCallback及其使用的文章已有，但在大型项目中难以理解何时开始使用它。
因此，如果为每个使用案例使用它，是否会影响应用程序的性能。

- pnkz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dupocas · Accepted Answer

useCallback和useMemo是帮助程序员添加额外的依赖检查层以确保同步的辅助Hooks。通常你会使用useCallback来确保一个稳定的签名给一个prop，这个prop的变化是已知的，但React并不知道。

例如，通过props传递的function(引用类型)

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

假设您有一个子组件，它在挂载时必须设置父组件的某些状态（不太常见），上述代码将生成一个“未声明依赖项”的警告，因此让我们声明setParentState作为React要检查的依赖项。

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

现在这个效果在每次渲染时都会运行，而不仅仅是在挂载时。这是因为setParentState是一个函数，每次调用Component函数时都会重新创建。你知道setParentState的签名不会随着时间改变，所以告诉React是安全的。通过将原始助手包装在useCallback中，您正在做到这一点（通过添加另一个依赖项检查层）。

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

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

请看这里。现在React知道stableSetter在生命周期内不会改变其签名，因此效果不需要不必要地运行。

另外，useCallback也像useMemo一样用于优化昂贵的函数调用（记忆化）。

useCallback的两个主要目的是：

优化依赖于引用相等性以防止不必要渲染的子组件。 Font
记忆昂贵的计算计算

有什么缺点/性能问题吗？

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

因此，关键是明智地使用，仔细选择哪些需要具有稳定签名，哪些不需要。