React中useMemo Hook与cache函数的区别是什么？

以下是两者的关键差异：

1. 缓存作用范围与生命周期 #

• cache 是全局跨渲染周期的缓存：缓存的是目标函数的返回值，只要传入的参数不变，即便组件卸载后重新挂载、甚至在不同组件中调用，缓存依然有效。它的生命周期不受组件实例的影响。
• useMemo 是组件级别的缓存：缓存绑定到组件的渲染实例，组件卸载后缓存会被清除，重新挂载组件时会重新执行计算逻辑。

2. 缓存触发机制 #

• cache 基于函数参数自动缓存：无需手动声明依赖，它会根据每次调用时传入的参数生成缓存键，参数相同则直接返回缓存值。
• useMemo 依赖手动指定的依赖数组：只有当依赖数组中的值发生变化时，才会重新计算结果；若依赖数组为空，仅在组件首次渲染时计算一次。

3. 使用场景 #

• cache 适用于跨组件复用的复杂计算/数据请求：比如多个组件需要调用同一个耗时的API请求函数，或者需要在组件间共享计算结果的场景（常配合React Suspense使用）。
• useMemo 适用于组件内部的性能优化：避免组件每次渲染时重复执行高开销的计算逻辑，仅在特定依赖项变化时才重新计算。

4. 调用限制 #

• cache 可以在任意位置调用：无论是组件内部、工具函数中，甚至是异步代码里，只要是需要缓存函数返回值的场景都能使用。
• useMemo 必须遵循Hook规则：只能在组件的顶层或其他自定义Hook中调用，不能在条件判断、循环等语句内执行。

内容的提问来源于stack exchange，提问作者Vishal Tanna