【问题标题】:Usecase for useMemo hookuseMemo 钩子的用例
【发布时间】:2019-08-20 10:00:29
【问题描述】:

查看 React 的 useMemo documentation。他们说当你需要计算昂贵的计算时使用它。

这种优化有助于避免在每次渲染时进行昂贵的计算。

我查看了他们提供的memoizedlink,我的理解是您可以将其视为缓存。

我不是计算机科学专家,但我知道记忆化是计算fibonacci的一个很好的优化@

我仍在尝试更好地了解为什么以及如何使用useMemo,但我仍然不清楚一些事情。

  • 什么是expensive calculations
  • 有人能给出真实的react 例子吗?
  • 在什么情况下useMemo 有利于性能优化?

【问题讨论】:

    标签: reactjs memoization react-hooks


    【解决方案1】:

    首先你应该知道你只能记忆纯函数,即输出完全取决于其参数的函数。

    因此,简而言之,当您知道大多数情况下输入保持不变并且您不想不必要地为相同的输入一次又一次地重新计算结果时,您会进行记忆化,特别是当计算成本很高时,这可能意味着需要计算的数据集很大

    • 当您尝试从大型数组中过滤数据时,React 可能会使用 memoization。

    • 另一种情况是,您希望将基于某些参数的嵌套对象转换为其他对象或数组。

    在这种情况下useMemo 真的很有帮助。如果数组和过滤条件在重新渲染时保持不变,则不再进行计算,而是从缓存中返回先前计算的数据

    【讨论】:

    • 这是否意味着如果我们有多个条件,例如其中的 5 个条件,这 5 个过滤器结果会全部缓存在内存中吗?我假设 React.memo 在一段时间后得到了那些垃圾收集吗?
    【解决方案2】:

    Memoization 是存储计算值的过程,因此您不必再次重新计算它。
    在 react 中,最常见的用法是从 redux 存储(存在 reselect)派生的值,或功能组件的完整记忆。
    没有黄金法则来决定一个函数是否昂贵并且应该被记忆,因为它在很大程度上取决于您的特定用例,并且它的性能缺陷,但通常它被保存用于数组过滤/排序或类似的东西。
    了解哪些内容应该被记忆、哪些不应该被记忆的最好方法是分析你的应用程序,看看哪些计算占用了最多的资源并记忆它们,看看它是否会产生影响。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-05-31
      • 1970-01-01
      • 2020-01-14
      • 2022-01-15
      • 1970-01-01
      • 2021-03-24
      • 2019-11-23
      • 2019-12-31
      相关资源
      最近更新 更多