用例useMemo钩子

Question

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

此优化有助于避免在每个渲染上进行昂贵的计算。

我看了他们提供的memoized link，我理解的是你可以把它想象成缓存。

我不是计算机科学方面的专家，但我知道memoization是计算fibonacci的一个很好的优化

我仍然试图更好地理解为什么以及如何使用useMemo，但我仍然不清楚一些事情。

• 什么被认为是expensive calculations？
• 有人可以给真正的react例子吗？
• 在什么情况下useMemo有利于性能优化？

Answer 1

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

Answer 2

首先，你应该知道你只能记住纯函数，即输出完全依赖于它的参数的函数。

简而言之，当您知道大多数情况下输入保持不变并且您不希望不必要地为同一输入反复重新计算结果时，特别是当计算成本很高（这可能意味着数据集）时，您会进行记忆化。需要执行的计算很大

• 使用memoization的情况是当您尝试从大型数组中过滤数据时可能是React。
• 另一种情况是，您希望将基于某些参数的嵌套对象转换为其他对象或数组。

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