查看 React 的useMemo
文档。他们说当你需要计算一个昂贵的计算时使用它。
此优化有助于避免每次渲染的昂贵计算。
我查看了他们提供的链接memoized
,我的理解是你可以把它想象成一个缓存。
我不是计算机科学专家,但我知道记忆是计算斐波那契的一个很好的优化
我仍在努力更好地理解为什么以及如何使用useMemo
,但有些事情对我来说仍然不清楚。
- 什么被认为是
expensive calculations
? - 有人可以举出真实的
react
例子吗? - 在什么情况下
useMemo
有利于性能优化?
首先,你应该知道你只能记住纯函数,即输出完全取决于其参数的函数。
简而言之,当您知道大多数情况下输入保持不变并且您不想不必要地一次又一次地重新计算相同的输入的结果时,您会进行记忆,尤其是当计算成本高昂时,这可能意味着需要执行计算的数据集很大。
-
在 React 中使用记忆的情况可能是当你尝试从大型数组中过滤数据时。
-
另一种情况是,当您希望将基于某些参数的嵌套对象转换为另一个对象或数组时。
在这种情况下useMemo
真的很有帮助。如果数组和筛选条件在重新渲染过程中保持不变,则不会再次执行计算,而是从缓存中返回先前计算的数据。 请记住,记忆数据存储在内存中,因此请确保在需要时使用它。
Memoization
是存储计算值的过程,因此您不必再次重新计算它。
在 react 中,最常见的用法是从 redux 存储(存在重新选择)派生的值,或者功能组件的完整记忆。
没有黄金法则来决定一个函数是否昂贵并且应该被记住,因为它在很大程度上取决于你的特定用例,以及它的性能陷阱,但通常它被保存用于数组过滤/排序,或类似的东西。
了解应该记住什么和不应该记住什么的最佳方法是分析你的应用,看看哪些计算占用的资源最多,并记住它们,看看它是否有所作为。
为了回答 EugenSunic 的注释问题,useMemo 不会记住您使用的所有依赖项组合,只会记住您的 CURRENT 依赖项数组。
假设您的 useMemo 如下所示:
const [x, setX] = useState(1)
const doubleX = useMemo(() => {
console.log(`Recalculating...`)
return x * 2
}, [x])
/* component returns an input that updates x */
在初始渲染时,x 为 1; useMemo console.logs"重新计算...">并返回 1 * 2 (= 2)。
在随后的渲染中,如果 x 仍然是 1,useMemo 将返回 2 而不重新运行乘法 - 您可以验证这一点,因为 console.log不会运行。
现在更新您的依赖项;假设 x 是 6。 useMemo console.logs"重新计算...">,运行 2 * 6 并返回 12。
您更新了依赖项; x 再次为 1。 使用备忘录将控制台.log"正在重新计算...">,再次运行乘法 (2 * 1) 并返回 2。