何时使用 useMemo 和 useCallback：React 爱好者的简要指南

如果您是 React 开发人员，您可能已经在网上遇到过 React useMemo 与 useCallback 的讨论，结果比以往任何时候都更加困惑。 很难弄清楚 useMemo 和 useCallback 之间的区别。 没关系！ 一开始可能很难理解 React-Hooks，但它们在以后会非常有用。

在本文中，我们将向您展示 useCallback 和 useMemo 之间的区别以及何时使用 useCallback 和 useMemo。

useMemo 和 useCallback 的区别

React 16.8 引入了两个内置的钩子。 引入这些功能是为了优化性能。 useMemo 与 useCallback 之间的差异似乎可以忽略不计，因此我们将尝试消除混淆。

什么是 React-Hooks？

Hooks 是 React 中引入的新特性，它允许在不编写类的情况下使用 useState 和其他 React 特性。 挂钩是“挂钩”到 React 的状态和生命周期特性的方法和函数。

useCallback 与 useMemo

每当子组件在没有真正需要的情况下一遍又一遍地重新渲染时，都会使用 useCallback 挂钩。 当您使用 useCallback 时，您可以通过返回正在传递的该函数的相同实例而不是每次都创建一个新实例来防止这种不必要的重新渲染。 这可以节省大量时间（以及花费在开发时间上的金钱）。 使用 memoized 回调传递一组依赖项将产生一个 memoized 版本，该版本仅在依赖项更改时才会更改。

在 React 的功能组件中使用了 useMemo。 它用于返回一个记忆值。 记忆是指通过返回缓存结果而不是为下次运行再次重新编译具有相同参数的函数来节省重新编译时间的过程。 缓存的结果在下次调用时返回。 useMemo 钩子提供内存映射值。

显然，有一些相似之处。 在 useMemo 和 useCallback 中，钩子接受一个函数以及一个依赖数组。 但是，useCallback 会记住返回值，而 useMemo 会记住函数。 换句话说，一个缓存一个值类型，另一个缓存一个函数。

• 阅读更多——如何以及为什么要保持文件井井有条
• 在课堂上使用电子设备的 9 大方法

何时使用 useCallback 与 useMemo

那么什么时候应该使用 useCallback，什么时候 useMemo 是最好的选择呢？ 让我们看一个例子。 如果计算量大且成本高昂的代码接受参数并返回值，则 useMemo 是最佳选择。 这样，您可以在渲染之间继续引用值，而无需重新运行代码并浪费您的时间和计算能力。

如果你需要在多个渲染中保持一个函数实例的持久性，你应该使用 useCallback 代替，因为它本质上将函数放在你的 React 组件范围之外以保持它的完整性。

什么是使用效果？

我们已经提到了依赖数组，你在使用 useEffect 时可能会遇到。 useEffect 是另一个 React 钩子。 它用于使用回调参数逻辑处理功能组件中的副作用。 依赖项是副作用的依赖项列表，例如，道具或状态值。

这个钩子向 React 展示了组件在渲染后需要执行一个动作。 当 DOM 更新时，您传递的效果将被存储。 您还可以执行数据获取来实现此结果。

简而言之，useCallback、useMemo 和 useEffect 都与提高 React 应用程序中组件重新渲染之间的性能有关。

不过，重要的是不要过度使用钩子。 这些钩子引入了新的复杂逻辑，它可能会产生与您预期相反的效果，产生性能问题而不是解决它们。 useMemo 应该只用于非常昂贵的计算。

不要使用 useMemo 或 useCallback 来修复应用程序的基本问题。 最终，这些问题会重新出现并困扰您，因此最好先解决任何已知故障。

• 阅读更多 –如何选择最佳 CMS
• 加密方法的优缺点是什么？

结论

希望这篇文章很有见地，并且您可以更好地理解这两个钩子。 总之：

• 都接受一个函数和依赖数组
• useMemo 记忆返回值，useCallback 记忆函数。

useMemo 和 useCallback 之间的区别非常明显！ 这些工具具有节省时间和金钱的潜力，但前提是它们必须在适当的上下文和环境中使用。

我希望本教程可以帮助您了解何时使用 useMemo 和 useCallback：React Fans 简要指南。 如果您想说什么，请通过评论部分告诉我们。 如果你喜欢这篇文章，请分享它并在 Facebook、Twitter 和 YouTube 上关注 WhatVwant 以获取更多技术提示。

何时使用 useMemo 和 useCallback – 常见问题