如何在 React 中使用 useMemo 优化我的代码？

Question

我在 React 中遇到了 useMemo() 钩子的情况。

我有一个名为a 的数组对象。该对象包含多个对象。这个数组很大。当它包含b 和c 对象时，a 看起来像a = [b,c]。我正在对数组a 进行大量计算。这是我的代码 sn-p：

    const computedValue = useMemo(() => {
         return a.map(key,() => {
           anotherHighComputationFunc(key);
         });
    },[a])

const anotherHighComputationFunc = useMemo((key) => {
        // ..... do some expensive computation
       return someValue;
},[key]);

如果a 的引用没有改变，我不会再次计算该值，我只是返回预先计算的值。如果a 的引用发生更改，那么我将查看数组a 以检查是否某个键已更改其在数组内的引用。如果某个键的引用没有改变，则返回该键的预计算值，否则对该键进行计算。

问题是钩子规则失败了，因为我在另一个钩子中使用了一个钩子。所以它给我一个错误。有没有其他方法可以在 2 个级别上进行记忆？

Answer 1

useMemo() 钩子在这里对你没有帮助，因为它的缓存大小为 1，你不能在其他钩子中调用钩子。另外，你不需要记住函数，而是调用的结果。

您可以使用WeakMap 创建一个简单的记忆包装器，这将允许垃圾收集器在不需要时清理值。

注意：WeakMap 的键必须是对象。

const weakMemo = fn => {
  const map = new WeakMap();
  
  return obj => {
    if (map.has(obj)) return map.get(obj);
    
    const res = fn(obj);
    
    map.set(obj, res);
    
    return rs;
  }
};

// the useMemo is needed here to preserve the instance of the memoized function with the cached values
const computeKey = useMemo(() => weakMemo((key) => {
  // ..... do some expensive computation
  return someValue;
}), [anotherHighComputationFunc]);

const computedValue = useMemo(() => a.map(computeKey), [a, computeKey]);

Answer 2

Hook 的规则明确规定：不要在循环、条件或嵌套函数中调用 Hook。相反，请始终在 React 函数的顶层使用 Hooks。

不要为 anotherHighComputationFunc 使用挂钩，而是创建一个 cache 对象，该对象存储函数的值，如果它在缓存对象内，则返回它。

const cache = {};

function anotherHighComputationFunc(key) {
   if (cache[key]) return cache[key];

    /** anotherHighComputation calculation here */
    cache[key] = anotherHighComputationValue;
    return anotherHighComputationValue
} 

 const computedValue = useMemo(() => {
     return a.map(key,() => {
       anotherHighComputationFunc(key);
    });
},[a])