1

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

4

1 回答 1

1

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

function通过props例如传递的（引用类型）

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

假设你有一个子组件，它在挂载时必须在父组件中设置一些状态（不常见），上面的代码会生成一个未声明依赖的警告useEffect，所以让我们声明setParentState一个依赖，由 React 检查

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

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

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

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

你去吧。现在React知道stableSetter在生命周期内不会改变它的签名，因此不需要运行效果。

附带说明useCallback一下，它也用于useMemo优化昂贵的函数调用（memoization）。

的两个主要目的useCallback是

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

  • 记忆昂贵的计算计算

有什么缺点/性能吗？

useCallback主要用于通过仅在需要时更改内容来优化性能。它通过添加一个依赖层来做到这一点，就像useEffect（并且类似于它自己如何知道在 DOM 中必须如何改变某些东西），但是作为每一种性能优化技术，它可以向后射击，如果你用不必要的React填充整个应用程序，，，表演会反过来。useCallbackuseMemoReact.memo

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

于 2020-07-21T11:27:13.757 回答