跨组件的 useMemo 行为

Question

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

然而，实际的第一次渲染仍然是一个问题。我一次渲染了我的组件的数千个实例，似乎不必要地重复了昂贵的查询。相同的查询结果可以用于很多这样的实例，因为我一次只使用两个或三个唯一的输入进行查询。可以将查询视为纯查询，因为它始终为相同的输入返回相同的结果。

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

是否有一种干净且可持续的方法来确保在对同一函数的所有调用之间共享记忆结果，而不管原始组件实例如何？

Answer 1

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

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

如果它应该以不同的方式运行，则应使用通用的备忘录实用程序，例如Lodashmemoize：

const expensiveFn = () => ...;

const memoizedExpensiveFn = _.memoize(expensiveFn);

它还允许控制缓存存储：

memoizedExpensiveFn.Cache = ES6MapWithExpiration;