useMemo 钩子的用例

Usecase for useMemo hook

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

This optimization helps to avoid expensive calculations on every render.

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

我不是计算机科学专家,但我知道 memoization 是计算 fibonacci

的一个很好的优化

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

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

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

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

  • 当您尝试从大型数组中过滤数据时,React 就是使用记忆的一个例子。

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

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