useMemo跨组件的行为

Question

在我的组件中，我正在使用useMemo来运行并缓存一个稍微昂贵的查询到浏览器运行时。到目前为止，它已大大减少了后续渲染所需的时间。

但是，实际的第一个渲染仍然是一个问题。我一次渲染了数千个组件实例，看来不必要地重复了昂贵的查询。相同的查询结果可用于许多此类实例，因为我一次只对查询使用两个或三个唯一的输入。该查询可以视为纯查询，因为它对于相同的输入始终返回相同的结果。

我只希望记忆化的返回值可用于同一组件的其他实例，但分析数据表明并非如此。

是否有一种干净，可持续的方法来确保在对同一函数的所有调用中共享记录的结果，而不管源组件实例是什么？

Answer 1

React挂钩所维护的状态特定于调用它们的组件实例。

为了使useMemo或useCallback拥有多个组件实例的公共状态，它们应该出现在最接近的公共父对象中，并在必要时为深层嵌套的子代提供上下文API。

如果它的行为方式不同，则应使用通用的备忘录实用程序，例如Lodash memoize：

const expensiveFn = () => ...;

const memoizedExpensiveFn = _.memoize(expensiveFn);

它还可以控制缓存存储：

memoizedExpensiveFn.Cache = ES6MapWithExpiration;

Answer 2

useMemo计算的结果绑定到特定的组件实例。 您有两种选择： 1.将计算移到树上。 2.使用其他纪念工具。