用例备注挂钩

时间:2019-03-29 12:49:58

标签: reactjs memoization react-hooks

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

  

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

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

我不是计算机科学方面的专家,但是我知道备忘录是计算fibonacci的很好的优化

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

  • 什么被视为expensive calculations
  • 有人可以给出真实的react示例吗?
  • 在什么情况下useMemo对性能优化有好处?

2 个答案:

答案 0 :(得分:1)

Memoization是存储计算值的过程,因此您无需再次重新计算。
在react中,最常见的用法是从redux存储派生的值(存在reselect)或功能组件的完整说明。 没有一个黄金法则可以决定一个函数是否昂贵并且应该被记住,因为它在很大程度上取决于您的特定用例,并且它是性能的陷阱,但是通常将其保存下来以进行数组过滤/排序或类似的操作。
知道应该记住什么而不是记住应用程序的最佳方法是分析应用程序,查看哪些计算占用最多的资源,并记住它们以查看它是否有所作为。

答案 1 :(得分:1)

首先,您应该知道您只能记住纯函数,即纯输出取决于其参数的函数。

因此,简而言之,当您知道最常用的输入保持不变并且不想重复为相同的输入重复计算结果时,便会做备忘录,特别是当计算成本很高时,这可能意味着需要执行计算的数据集很大

  • 使用备忘录的一种情况是React,可能是当您尝试从大型数组中过滤数据时。

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

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